/* =========================================================
   SumaPay — Sistema de Diseño (Fase 1, Desktop)
   ========================================================= */

/* Etapa de desarrollo: los tamaños (espaciados, dimensiones, radios) se escriben en cada regla como
   calc(PX / 16 * 1rem), sin variables intermedias. Aquí solo viven color, tipografía base y movimiento. */
:root {
  /* Color */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-primary-start: #2daaff;
  --color-primary-end: #154665;
  --gradient-primary: linear-gradient(180deg, var(--color-primary-start), var(--color-primary-end));
  --slider-section-bg: #111111;
  --page-pill-bg: rgba(42, 42, 45, 0.8);
  --page-pill-dot-color: rgba(245, 245, 247, 0.8);
  /* Indicador de espera del autoplay: se llena sobre el fondo del pill mientras llega la siguiente card */
  --page-pill-progress-bg: rgba(245, 245, 247, 0.16);
  --ui-card-bg: #000000;
  --ui-card-border: linear-gradient(135deg, #c9c9c9 0%, #313131 100%);

  /* Tipografía */
  --font-family-base: 'SF UI Display', -apple-system, 'SF Pro Display', system-ui,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Movimiento: física de inercia tipo Apple */
  --ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-liquid: 550ms;

  /* Encuadre de la imagen de fondo de las ui-card (la url llega desde data-bg) */
  --ui-card-image-size: cover;
  --ui-card-image-position: center;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-liquid: 1ms;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: calc(15 / 16 * 1rem);
  line-height: 1.5;
}

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

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

/* =========================================================
   Accesibilidad: skip link
   ========================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: calc(10 / 16 * 1rem) calc(16 / 16 * 1rem);
  background: var(--color-primary-end);
  color: var(--color-text);
  border-radius: calc(4 / 16 * 1rem);
}

.skip-link:focus {
  left: calc(16 / 16 * 1rem);
  top: calc(16 / 16 * 1rem);
}

/* =========================================================
   Tipografía genérica (tx-*) — no atada a h1/h2/p
   Fuente: catálogos "TOKENS TIPOGRÁFICOS EN PIXELES SUMAPAY" (un PDF por breakpoint).
   Base = Desktop XXL 1920x1080. Cada breakpoint del catálogo se escribe como @media
   abierto hacia abajo (max-width del rango Bootstrap) y solo con lo que cambia frente a la base.
   ========================================================= */
.tx-eyebrow {
  font-size: calc(26 / 16 * 1rem);
  line-height: calc(35 / 16 * 1rem);
  letter-spacing: 0;
  font-weight: 700;
  text-transform: uppercase;
}

.tx-hero {
  font-size: calc(61 / 16 * 1rem);
  line-height: calc(67 / 16 * 1rem);
  letter-spacing: calc(-1.3 / 16 * 1rem);
  font-weight: 700;
  text-transform: none;
}

.tx-body {
  font-size: calc(20 / 16 * 1rem);
  line-height: calc(27 / 16 * 1rem);
  letter-spacing: calc(-0.5 / 16 * 1rem);
  font-weight: 600;
  text-transform: none;
}

.tx-legal {
  font-size: calc(16 / 16 * 1rem);
  font-weight: 500;
  line-height: calc(21 / 16 * 1rem);
  letter-spacing: calc(-0.5 / 16 * 1rem);
  text-transform: none;
}

.tx-bcard {
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(21 / 16 * 1rem);
  letter-spacing: calc(-0.7 / 16 * 1rem);
  font-weight: 500;
  text-transform: none;
}

.tx-btn {
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(17 / 16 * 1rem);
  letter-spacing: calc(0.7 / 16 * 1rem);
  font-weight: 500;
  text-transform: none;
}

.tx-nav {
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(17 / 16 * 1rem);
  letter-spacing: calc(0.7 / 16 * 1rem);
  font-weight: 500;
  text-transform: none;
}

.tx-display {
  font-size: calc(53 / 16 * 1rem);
  line-height: calc(60 / 16 * 1rem);
  letter-spacing: calc(-1.3 / 16 * 1rem);
  font-weight: 700;
  text-transform: none;
}

.tx-display-sm {
  font-size: calc(40 / 16 * 1rem);
  line-height: calc(48 / 16 * 1rem);
  letter-spacing: calc(-1.3 / 16 * 1rem);
  font-weight: 700;
  text-transform: none;
}

.tx-feature {
  font-size: calc(30 / 16 * 1rem);
  line-height: calc(37 / 16 * 1rem);
  letter-spacing: calc(-1.3 / 16 * 1rem);
  font-weight: 700;
  text-transform: none;
}

/* Catálogo 1199-992 (rango lg de Bootstrap). tx-bcard no cambia respecto a la base. */
@media (max-width: 1199.98px) {
  .tx-eyebrow {
    font-size: calc(19 / 16 * 1rem);
    line-height: calc(24 / 16 * 1rem);
    font-weight: 600;
  }

  .tx-hero {
    font-size: calc(43 / 16 * 1rem);
    line-height: calc(48 / 16 * 1rem);
  }

  .tx-body {
    font-size: calc(15 / 16 * 1rem);
    line-height: calc(20 / 16 * 1rem);
  }

  .tx-btn {
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(19 / 16 * 1rem);
    letter-spacing: calc(0.5 / 16 * 1rem);
    font-weight: 500;
  }

  .tx-nav {
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(19 / 16 * 1rem);
    letter-spacing: 0;
  }

  .tx-display {
    font-size: calc(33 / 16 * 1rem);
    line-height: calc(39 / 16 * 1rem);
  }

  .tx-feature {
    font-size: calc(21 / 16 * 1rem);
    line-height: calc(30 / 16 * 1rem);
    letter-spacing: calc(-0.9 / 16 * 1rem);
    font-weight: 600;
  }
}

/* Mobile, por debajo de sm (576). Solo tamaño y altura de línea; el resto del token se hereda. */
@media (max-width: 575.98px) {
  .tx-eyebrow {
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(24 / 16 * 1rem);
  }

  .tx-hero {
    font-size: calc(33 / 16 * 1rem);
    line-height: calc(40 / 16 * 1rem);
  }

  .tx-body {
    font-size: calc(16 / 16 * 1rem);
    line-height: calc(23 / 16 * 1rem);
  }

  .tx-display-sm {
    font-size: calc(25 / 16 * 1rem);
    line-height: calc(30 / 16 * 1rem);
    letter-spacing: calc(-0.3 / 16 * 1rem);
  }
}

/* Tokens de color: solo cambian el color, heredan tamaño/peso/altura del padre */
.tx-blue {
  color: var(--color-primary-start);
}

/* Enlaces de avisos, términos y FAQ. El azul es el inicio del degradado del botón. */
a.tx-legal-link,
a.tx-legal-link:hover,
a.tx-legal-link:focus-visible {
  color: var(--color-primary-start);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-start);
}

.tx-gray {
  color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   Liquid Glass — clase base + variantes
   ========================================================= */
.liquid-glass {
  position: relative;
  border: 1px solid transparent;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}

/* Borde reflectante especular: degradado de blanco a transparente, grosor 1px */
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Variante 1: Frosted (Concept) */
.liquid-glass.frosted {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(20, 20, 20, 0.4);
}

/* Variante 2: Clear (iOS Default) */
.liquid-glass.clear {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background-color: rgba(255, 255, 255, 0.02);
}

/* Variante 3: Blur (One UI / Deep Glass) */
.liquid-glass.blur {
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  background-color: rgba(10, 10, 10, 0.6);
}

/* Fallback para navegadores sin soporte de backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass.frosted {
    background-color: rgba(20, 20, 20, 0.75);
  }
  .liquid-glass.clear {
    background-color: rgba(20, 20, 20, 0.55);
  }
  .liquid-glass.blur {
    background-color: rgba(10, 10, 10, 0.85);
  }
}

/* =========================================================
   Botón primario (pill, degradado)
   ========================================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
  white-space: nowrap;
  background: var(--gradient-primary);
  color: var(--color-text);
  padding: calc(14 / 16 * 1rem) calc(21 / 16 * 1rem);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform var(--duration-liquid) var(--ease-liquid),
    filter var(--duration-liquid) var(--ease-liquid);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.1);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

/* =========================================================
   Vignette superior — protege el contraste del header
   (franja fija, solo decorativa, no interactúa con el mouse/teclado)
   ========================================================= */
.vignette-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(148 / 16 * 1rem);
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0) 100%);
}

/* =========================================================
   Header flotante
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: calc(42 / 16 * 1rem);
  transition: padding-block var(--duration-liquid) var(--ease-liquid);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* El logo siempre queda anclado a la izquierda */
.site-header__logo {
  flex-shrink: 0;
  transform-origin: left center;
  transition: transform var(--duration-liquid) var(--ease-liquid);
}

.site-header__logo-img {
  width: calc(150 / 16 * 1rem);
  height: calc(45 / 16 * 1rem);
}

/* Bloque derecho: nav + botón viven juntos DENTRO de un mismo cristal, anclado a la derecha */
.site-header__menu {
  display: flex;
  align-items: center;
  gap: calc(150 / 16 * 1rem);
  flex-shrink: 0;
  border-radius: 999px;
  padding: calc(6 / 16 * 1rem) calc(6 / 16 * 1rem) calc(6 / 16 * 1rem) calc(26 / 16 * 1rem);
  transform-origin: right center;
  transition: transform var(--duration-liquid) var(--ease-liquid),
    gap var(--duration-liquid) var(--ease-liquid),
    padding var(--duration-liquid) var(--ease-liquid);
}

.nav-pill__list {
  display: flex;
  align-items: center;
  gap: calc(16 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-pill__list a {
  display: inline-block;
  padding: calc(6 / 16 * 1rem) calc(10 / 16 * 1rem);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--duration-liquid) var(--ease-liquid),
    background-color var(--duration-liquid) var(--ease-liquid);
}

.nav-pill__list a:hover,
.nav-pill__list a:focus-visible {
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-pill__list a:focus-visible {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

.site-header .btn-primary {
  flex-shrink: 0;
}

/* Estado: header encogido al hacer scroll */
.site-header.is-scrolled {
  padding-block: calc(10 / 16 * 1rem);
}

.site-header.is-scrolled .site-header__logo {
  transform: scale(0.69);
}

.site-header.is-scrolled .site-header__menu {
  gap: calc(4 / 16 * 1rem);
  transform: scale(0.69);
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: calc(10 / 16 * 1rem);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
}

.site-header__icon {
  display: block;
  width: calc(25 / 16 * 1rem);
  height: calc(25 / 16 * 1rem);
}

.site-header__icon--close {
  display: none;
}

.site-header.is-nav-open .site-header__icon--open {
  display: none;
}

.site-header.is-nav-open .site-header__icon--close {
  display: block;
}

.site-header__overlay {
  display: none;
}

body.is-nav-open {
  overflow: hidden;
}

/* Logo 150px + menú 822px + padding del container 24px = 996px.
   Por debajo de xl el container mide 960px, así que el menú horizontal ya no cabe. */
@media (max-width: 1199.98px) {
  .site-header__toggle {
    display: inline-flex;
    position: relative;
    z-index: 3;
  }

  .site-header.is-scrolled .site-header__toggle {
    transform: scale(0.69);
    transform-origin: right center;
  }

  .site-header__menu {
    display: none;
  }

  .site-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
  }

  .site-header.is-nav-open .site-header__overlay {
    display: block;
  }

  .site-header.is-nav-open .site-header__menu,
  .site-header.is-scrolled.is-nav-open .site-header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(16 / 16 * 1rem);
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: calc(300 / 16 * 1rem);
    max-width: calc(100vw - calc(48 / 16 * 1rem));
    height: auto;
    margin: 0;
    padding: calc(40 / 16 * 1rem) calc(20 / 16 * 1rem);
    border-radius: calc(16 / 16 * 1rem);
    transform: translate(-50%, -50%);
  }

  .site-header.is-nav-open .nav-pill__list {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 / 16 * 1rem);
  }

  .site-header.is-nav-open .site-header__menu .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: min(100dvh, 1000px);
  overflow: hidden;
  /* Contenedor de consulta: la escena usa cqw/cqh para replicar el área cover del fondo */
  container-type: size;
}

.hero--demo {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escena: caja idéntica al área que object-fit: cover asigna al fondo (1920x1100), centrada.
   Las piezas se posicionan en % de esta caja, por eso encajan igual que en fondoCompleto.webp
   en cualquier proporción de viewport. Es absoluta: no aporta altura ni provoca layout shift. */
.hero__scene {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Fallback sin unidades cq: cubre solo cuando el viewport es más ancho que 1920/1100 */
  width: 100%;
  aspect-ratio: 1920 / 1100;
  width: max(100cqw, calc(100cqh * 1920 / 1100));
  height: max(100cqh, calc(100cqw * 1100 / 1920));
}

.hero__piece {
  position: absolute;
  height: auto;
}

/* Coordenadas medidas sobre fondoCompleto.webp (lienzo 3840x2200, recortes a escala 1:1) */
.hero-anim-computer {
  left: 52.292%;
  top: 51.273%;
  width: 45.078%;
}

.hero-anim-phone {
  left: 72.474%;
  top: 14.318%;
  width: 27.526%;
}

.hero-anim-card {
  left: 55.833%;
  top: 0;
  width: 33.698%;
}

/* ==========================================================================
   FASE 2: ANIMACIÓN ESCALONADA DEL HERO (POST-LOAD)
   Sin transición en reposo: solo .is-hero-loaded (window.load) la activa.
   ========================================================================== */
.hero-anim-item {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* 1. Computadora: entrada lenta y suave */
.is-hero-loaded .hero-anim-computer {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* 2. Mano con teléfono: entrada rápida */
.is-hero-loaded .hero-anim-phone {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.65s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.65s;
}

/* 3. Mano con tarjeta: entrada rápida casi simultánea */
.is-hero-loaded .hero-anim-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.8s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

/* ==========================================================================
   FASE 3: REVELACIÓN AL SCROLL (ESTILO APPLE - UNA SOLA VEZ)
   El observador añade .is-visible y escribe transition-delay inline para el
   escalonado ascendente (0.15s por paso) dentro de cada lote que entra junto.
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tx-legal.reveal-on-scroll.is-visible {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim-item,
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .tx-legal.reveal-on-scroll {
    opacity: 0.8 !important;
  }
}

/* Contenedor de contenido: se superpone a la imagen y centra verticalmente (center center) */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* col-xxl-7 + col-xxl-5; el vacío derecho lo cubre la imagen */
.hero-content {
  color: var(--color-text);
}

.hero-content .tx-eyebrow {
  margin: 0 0 calc(40 / 16 * 1rem) 0;
}

.hero-content .tx-hero {
  margin: 0 0 calc(60 / 16 * 1rem) 0;
}

.hero-content .tx-body {
  margin: 0 0 calc(40 / 16 * 1rem) 0;
}

.hero-content .btn-primary {
  margin-top: 0;
}

/* Mobile: el texto sube y las piezas ocupan el mismo lugar, abajo, una por una. */
@media (max-width: 575.98px) {
  .hero-content {
    transform: translateY(calc(-40 / 16 * 1rem));
  }

  .hero-content .tx-eyebrow {
    margin: 0 0 calc(8 / 16 * 1rem) 0;
  }

  .hero-content .tx-hero {
    margin: 0 0 calc(20 / 16 * 1rem) 0;
  }

  .hero__scene {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    aspect-ratio: auto;
  }

  .hero-anim-computer,
  .hero-anim-phone,
  .hero-anim-card {
    left: 50%;
    top: auto;
    bottom: calc(-48 / 16 * 1rem);
    /* 30% más bajas que 130%: el alto sigue al ancho (height: auto). */
    width: calc(130% * 0.7);
    max-width: none;
    height: auto;
    transform: translateX(-50%) translateY(calc(30 / 16 * 1rem));
  }

  .is-hero-loaded .hero-anim-computer,
  .is-hero-loaded .hero-anim-phone,
  .is-hero-loaded .hero-anim-card {
    opacity: 0;
    transition: none;
  }

  .is-hero-loaded .hero-anim-computer {
    animation: hero-seq-laptop 18s linear infinite;
  }

  .is-hero-loaded .hero-anim-phone {
    animation: hero-seq-phone 18s linear infinite;
  }

  .is-hero-loaded .hero-anim-card {
    animation: hero-seq-card 18s linear infinite;
  }
}

@keyframes hero-seq-laptop {
  0% { opacity: 0; transform: translateX(-50%) translateY(calc(30 / 16 * 1rem)); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0); }
  25% { opacity: 1; transform: translateX(-50%) translateY(0); }
  33% { opacity: 0; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

@keyframes hero-seq-phone {
  0%,
  33% { opacity: 0; transform: translateX(-50%) translateY(calc(30 / 16 * 1rem)); }
  41% { opacity: 1; transform: translateX(-50%) translateY(0); }
  58% { opacity: 1; transform: translateX(-50%) translateY(0); }
  66% { opacity: 0; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

@keyframes hero-seq-card {
  0%,
  66% { opacity: 0; transform: translateX(-50%) translateY(calc(30 / 16 * 1rem)); }
  74% { opacity: 1; transform: translateX(-50%) translateY(0); }
  91% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .hero-anim-computer,
  .hero-anim-phone {
    opacity: 0 !important;
  }

  .hero-anim-card {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
}

/* =========================================================
   Sección "cards-slider" — encabezado (dentro de container) + slider-card (full-bleed)
   ========================================================= */
.cards-slider {
  background-color: var(--slider-section-bg);
  padding: calc(110 / 16 * 1rem) 0 calc(130 / 16 * 1rem);
}

.cards-slider__intro {
  text-align: center;
  color: var(--color-text);
}

.cards-slider__title {
  margin: 0 0 calc(40 / 16 * 1rem) 0;
}

.cards-slider__lead {
  margin: 0 0 calc(60 / 16 * 1rem) 0;
}

/* --- Slider-card: full-bleed, sin padding lateral, tarjetas pueden rebasar el canvas --- */
.slider-card {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* El JS escribe --slider-track-x (card activa centrada); .is-instant desactiva la transición para drag y posición inicial */
.slider-card__track {
  display: flex;
  /* 60px medidos en los mockups de estados (firststate/secondstate/3rdstate) @ 1920 */
  gap: calc(60 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  transform: translateX(var(--slider-track-x, 0px));
  transition: transform var(--duration-liquid) var(--ease-liquid);
  will-change: transform;
}

.slider-card__track.is-instant {
  transition: none;
}

.slider-card__item {
  position: relative;
  flex: 0 0 auto;
  width: calc(964 / 16 * 1rem);
  height: calc(435 / 16 * 1rem);
  border-radius: calc(50 / 16 * 1rem);
  overflow: hidden;
  background-color: #1c1f22;
  color: var(--color-text);
  /* Las cards laterales se activan al clic (misma funcionalidad que el carrusel de Tarjetas) */
  cursor: pointer;
}

.slider-card__item.is-active {
  cursor: default;
}

.slider-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-card__text {
  position: absolute;
  top: calc(40 / 16 * 1rem);
  left: calc(40 / 16 * 1rem);
  max-width: 40%;
  margin: 0;
}

.slider-card__tag {
  position: absolute;
  bottom: calc(40 / 16 * 1rem);
  left: calc(40 / 16 * 1rem);
  margin: 0;
}

/* Celular: card más alta y angosta, texto al centro y un recorte de las vecinas.
   El hueco baja de 60: con la card en 294, 60 se come el sobrante y no se asoma el carrusel. */
@media (max-width: 767.98px) {
  .cards-slider {
    padding: calc(70 / 16 * 1rem) 0 calc(80 / 16 * 1rem);
  }

  .slider-card__track {
    gap: calc(16 / 16 * 1rem);
  }

  .slider-card__item {
    width: calc(294 / 16 * 1rem);
    height: calc(550 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
  }

  .slider-card__image {
    object-position: center center;
  }

  .slider-card__text,
  .slider-card__tag {
    left: 50%;
    width: 80%;
    max-width: 80%;
    text-align: center;
    transform: translateX(-50%);
  }
}

/* --- Page-pill: paginación (base única para todos los carruseles) ---
   El ancho lo da el contenido (padding 30 + gap 15), así sirve igual con 3 o con 9 dots.
   El ::before es el indicador de espera: el JS pone .is-counting y --page-pill-progress-ms en cada
   intervalo del autoplay y el relleno cruza el pill de izquierda a derecha hasta el siguiente cambio. */
.page-pill {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 / 16 * 1rem);
  width: fit-content;
  height: calc(56 / 16 * 1rem);
  padding: 0 calc(30 / 16 * 1rem);
  margin: calc(40 / 16 * 1rem) auto 0;
  border-radius: 999px;
  background-color: var(--page-pill-bg);
  border: none;
  overflow: hidden;
}

.page-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--page-pill-progress-bg);
  transform-origin: left center;
  transform: scaleX(0);
}

.page-pill.is-counting::before {
  transform: scaleX(1);
  transition: transform var(--page-pill-progress-ms, 10000ms) linear;
}

.page-pill__dot {
  flex: 0 0 auto;
  width: calc(10 / 16 * 1rem);
  height: calc(10 / 16 * 1rem);
  padding: 0;
  border: none;
  border-radius: 999px;
  background-color: var(--page-pill-dot-color);
  cursor: pointer;
  transition: width var(--duration-liquid) var(--ease-liquid);
}

.page-pill__dot.is-active {
  width: calc(60 / 16 * 1rem);
}

.page-pill__dot:focus-visible {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

/* =========================================================
   Feature-grid — tercera sección (fondo + destellos + lista de ui-card)
   Fondo y destellos NO llevan url() en CSS: viven en data-bg (HTML) y el observador
   los inyecta al acercarse al viewport, para no competir con el hero (Fase 3).
   ========================================================= */
.feature-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  padding: calc(140 / 16 * 1rem) 0 calc(160 / 16 * 1rem);
}

.feature-grid__flare {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  height: calc(320 / 16 * 1rem);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.feature-grid__flare--top {
  top: 0;
  background-position: top center;
}

.feature-grid__flare--bottom {
  bottom: 0;
  background-position: bottom center;
}

.feature-grid .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.feature-grid__title {
  margin: 0 0 calc(60 / 16 * 1rem) 0;
}

.feature-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feature-grid__pill {
  display: none;
}

/* Celular: misma pista que el carrusel de arriba. La card conserva alto, padding y radio.
   El ancho queda por debajo del viewport para que se asome la anterior o la siguiente. */
@media (max-width: 767.98px) {
  .feature-grid__slider {
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .feature-grid__list {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(16 / 16 * 1rem);
    width: max-content;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    transform: translateX(var(--slider-track-x, 0px));
    transition: transform var(--duration-liquid) var(--ease-liquid);
  }

  .feature-grid__list.is-instant {
    transition: none;
  }

  .feature-grid__list > li {
    flex: 0 0 auto;
    width: calc(100vw - calc(88 / 16 * 1rem));
    max-width: none;
    padding: 0;
  }

  .feature-grid__pill {
    display: flex;
  }
}

/* =========================================================
   UI-card reutilizable — borde + fondo + heading (la instancia elige h*) + p
   No estiliza h1–h6 por tipo; el look tipográfico viene de los tokens tx-*
   ========================================================= */
.ui-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: calc(500 / 16 * 1rem);
  height: 100%;
  padding: calc(40 / 16 * 1rem) calc(30 / 16 * 1rem);
  gap: calc(8 / 16 * 1rem);
  border-radius: calc(30 / 16 * 1rem);
  overflow: hidden;
  background-color: var(--ui-card-bg);
  background-repeat: no-repeat;
  background-position: var(--ui-card-image-position);
  background-size: var(--ui-card-image-size);
  color: var(--color-text);
  text-align: center;

}

.ui-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: calc(2 / 16 * 1rem);
  background: var(--ui-card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.ui-card__title {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.ui-card__text {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

/* =========================================================
   Ecosistema — título + laptop y tablet en 3D
   Cada recuadro es un 20% más ancho que la tablet anterior.
   El modelo se encuadra para que se vea un poco más de la mitad;
   teclado y bordes salen del área visible.
   ========================================================= */
.ecosystem {
  background-color: var(--color-bg);
  padding: calc(140 / 16 * 1rem) 0 calc(24 / 16 * 1rem);
  overflow: hidden;
  text-align: center;
  color: var(--color-text);
}

.ecosystem__kicker {
  margin: 0 0 calc(16 / 16 * 1rem) 0;
}

.ecosystem__title {
  margin: 0 0 calc(28 / 16 * 1rem) 0;
}

.ecosystem__devices {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  width: 136%;
  margin-left: -18%;
  box-sizing: border-box;
}

.ecosystem__device {
  display: block;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 5 / 4;
  background: transparent;
}

.ecosystem__photos {
  display: none;
}

@media (max-width: 575.98px) {
  .ecosystem {
    padding: calc(80 / 16 * 1rem) 0 calc(30 / 16 * 1rem);
  }

  .ecosystem__devices {
    display: none;
  }

  .ecosystem__photos {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(8 / 16 * 1rem);
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .ecosystem__photo {
    display: block;
    width: calc(360 / 16 * 1rem);
    height: auto;
    flex: 0 0 auto;
  }
}

/* El diamante de producto anima el color. Sin @property el cambio sería un corte seco. */
@property --bg-active-start {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}

@property --bg-active-mid {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}

@property --bg-active-end {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}

/* =========================================================
   Tarjetas — carrusel acordeón (mockups Tarjetas 01 / Tarjetas 2 @ 1920)
   Card activa 720x573 centrada en el viewport; colapsadas 288x573 con una franja
   vertical; 12px entre cards. El JS escribe --orbit-x (activa centrada) y mueve
   .is-active; el ancho de la card y la pista comparten duración y curva para que
   el movimiento sea coherente.
   ========================================================= */
#tarjetas,
#alianzas {
  scroll-margin-top: calc(100 / 16 * 1rem);
}

/* El header fijo no tapa el título al llegar desde un ancla. */
.scroll-anchor {
  scroll-margin-top: calc(100 / 16 * 1rem);
}

/* Pegado bajo el header fijo. El top es el mismo del ancla. */
.sticky-below-header {
  position: sticky;
  top: calc(100 / 16 * 1rem);
}

.card-orbit {
  position: relative;
  background-color: var(--color-bg);
  padding: calc(80 / 16 * 1rem) 0 calc(90 / 16 * 1rem);
  overflow: hidden;
  text-align: center;
  color: var(--color-text);
  --bg-active-start: #000000;
  --bg-active-mid: #000000;
  --bg-active-end: #000000;
  transition: --bg-active-start var(--duration-liquid) var(--ease-liquid),
    --bg-active-mid var(--duration-liquid) var(--ease-liquid),
    --bg-active-end var(--duration-liquid) var(--ease-liquid);
}

/* Diamante detrás de título, cards y paginación. La opacidad vive en cada parada. */
.card-orbit::before {
  content: '';
  position: absolute;
  opacity: 0.55;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    var(--bg-active-start) 0%,
    var(--bg-active-mid) 40%,
    var(--bg-active-end) 80%
  );
}

.card-orbit > * {
  position: relative;
  z-index: 1;
}

.card-orbit__title {
  margin: 0 0 calc(80 / 16 * 1rem) 0;
}

.card-orbit__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.card-orbit__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(12 / 16 * 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  transform: translateX(var(--orbit-x, 0px));
  transition: transform var(--duration-liquid) var(--ease-liquid);
  will-change: transform;
}

.card-orbit__track.is-instant,
.card-orbit__track.is-instant .orbit-card,
.card-orbit__track.is-instant .orbit-card__body,
.card-orbit__track.is-instant .orbit-card__art,
.card-orbit__track.is-instant .orbit-card__handle,
.card-orbit__track.is-instant .liquid-glass-card::before,
.card-orbit__track.is-instant .liquid-glass-card::after {
  transition: none;
}

.card-orbit:has(.card-orbit__track.is-instant) {
  transition: none;
}

.card-orbit__item {
  position: relative;
  flex: 0 0 auto;
}

/* Paradas del diamante: centro, transición y negro en los costados.
   La misma declaración pinta la variable en la card y en la sección cuando esa card está activa. */
.card-orbit__item--empresarial,
.card-orbit:has(.card-orbit__item--empresarial.is-active) {
  --bg-active-start: rgba(104, 109, 109, 0.7);
  --bg-active-mid: #2c3131;
  --bg-active-end: #000000;
}

.card-orbit__item--business-plus,
.card-orbit:has(.card-orbit__item--business-plus.is-active) {
  --bg-active-start: rgba(131, 131, 131, 0.6);
  --bg-active-mid: #434343;
  --bg-active-end: #000000;
}

.card-orbit__item--combustible,
.card-orbit:has(.card-orbit__item--combustible.is-active) {
  --bg-active-start: rgba(4, 107, 62, 0.7);
  --bg-active-mid: #0a2f2a;
  --bg-active-end: #000000;
}

.card-orbit__item--incentivo,
.card-orbit:has(.card-orbit__item--incentivo.is-active) {
  --bg-active-start: rgba(67, 101, 172, 0.8);
  --bg-active-mid: rgba(32, 66, 137, 0.8);
  --bg-active-end: #000000;
}

.card-orbit__item--viaticos,
.card-orbit:has(.card-orbit__item--viaticos.is-active) {
  --bg-active-start: rgba(161, 164, 162, 0.85);
  --bg-active-mid: rgba(100, 101, 105, 0.85);
  --bg-active-end: #000000;
}

.card-orbit__item--despensa,
.card-orbit:has(.card-orbit__item--despensa.is-active) {
  --bg-active-start: rgba(119, 164, 181, 0.85);
  --bg-active-mid: rgba(60, 115, 140, 0.85);
  --bg-active-end: #000000;
}

.card-orbit__item--uniformes,
.card-orbit:has(.card-orbit__item--uniformes.is-active) {
  --bg-active-start: rgba(166, 198, 209, 0.85);
  --bg-active-mid: rgba(108, 161, 184, 0.85);
  --bg-active-end: #000000;
}

.card-orbit__item--restaurante,
.card-orbit:has(.card-orbit__item--restaurante.is-active) {
  --bg-active-start: rgba(234, 138, 51, 0.3);
  --bg-active-mid: #2f2001;
  --bg-active-end: #000000;
}

.card-orbit__item--conexion-social,
.card-orbit:has(.card-orbit__item--conexion-social.is-active) {
  --bg-active-start: rgba(254, 254, 254, 0.7);
  --bg-active-mid: rgba(190, 190, 190, 0.7);
  --bg-active-end: #000000;
}

/* Cristal de las cards. Independiente de .liquid-glass del menú. */
.liquid-glass-card {
  background-color: transparent;
  background-image: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

.liquid-glass-card.clear {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.liquid-glass-card::before,
.liquid-glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--duration-liquid) var(--ease-liquid);
}

/* Borde en reposo: 1px, reflejo en esquina. No usa border de caja para no mover el layout. */
.liquid-glass-card::before {
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  opacity: 1;
}

/* Borde activo: 3px, blanco al 13% / 70% / 13% a 90°. */
.liquid-glass-card::after {
  padding: 3px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.13) 100%
  );
  opacity: 0;
}

.card-orbit__item.is-active .liquid-glass-card::before {
  opacity: 0;
}

.card-orbit__item.is-active .liquid-glass-card::after {
  opacity: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass-card.clear {
    background-color: rgba(20, 20, 20, 0.55);
  }
}

.orbit-card {
  position: relative;
  overflow: hidden;
  width: calc(288 / 16 * 1rem);
  height: calc(573 / 16 * 1rem);
  border-radius: calc(30 / 16 * 1rem);
  cursor: pointer;
  transition: width var(--duration-liquid) var(--ease-liquid);
}

.card-orbit__item.is-active .orbit-card {
  width: calc(720 / 16 * 1rem);
  cursor: default;
}

/* Franja de la card colapsada: 14x473 centrada, misma altura que la ilustración */
.orbit-card__handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(14 / 16 * 1rem);
  height: calc(473 / 16 * 1rem);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.28);
  transition: opacity var(--duration-liquid) var(--ease-liquid);
}

.card-orbit__item.is-active .orbit-card__handle {
  opacity: 0;
}

/* Contenido: ancho fijo para que el texto no refluya mientras la card crece; oculto e
   inerte (visibility) mientras la card está colapsada, así sus enlaces no reciben foco */
.orbit-card__body {
  position: absolute;
  left: calc(51 / 16 * 1rem);
  top: calc(88 / 16 * 1rem);
  width: calc(280 / 16 * 1rem);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-liquid) var(--ease-liquid),
    visibility 0s linear var(--duration-liquid);
}

.card-orbit__item.is-active .orbit-card__body {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-liquid) var(--ease-liquid), visibility 0s;
}

.orbit-card__kicker {
  display: none;
  margin: 0 0 calc(16 / 16 * 1rem) 0;
}

.orbit-card__title {
  margin: 0 0 calc(24 / 16 * 1rem) 0;
}

.orbit-card__text {
  margin: 0 0 calc(44 / 16 * 1rem) 0;
}

/* Ilustración 298x475 anclada a la derecha (margen 51) y centrada en vertical.
   El enlace ocupa esa caja; la imagen llena el enlace. */
.orbit-card__art {
  position: absolute;
  right: calc(51 / 16 * 1rem);
  top: 50%;
  width: calc(298 / 16 * 1rem);
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-liquid) var(--ease-liquid),
    visibility 0s linear var(--duration-liquid);
}

.orbit-card__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.card-orbit__item.is-active .orbit-card__art {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-liquid) var(--ease-liquid), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-card,
  .orbit-card__body,
  .orbit-card__art,
  .orbit-card__handle,
  .liquid-glass-card::before,
  .liquid-glass-card::after,
  .card-orbit {
    transition: none;
  }
}

/* Celular, por debajo de sm: cards fijas como la sección de 3 (294×550, separación 16).
   El contenido se apila y la ilustración gira a horizontal, al ancho interior. */
@media (max-width: 575.98px) {
  .card-orbit__track {
    gap: calc(16 / 16 * 1rem);
  }

  .orbit-card,
  .card-orbit__item.is-active .orbit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(294 / 16 * 1rem);
    height: calc(550 / 16 * 1rem);
    padding: calc(55 / 16 * 1rem) calc(20 / 16 * 1rem);
    border-radius: calc(20 / 16 * 1rem);
    text-align: center;
  }

  .orbit-card__kicker {
    display: none;
    margin: 0 0 calc(5 / 16 * 1rem) 0;
    font-size: calc(14 / 16 * 1rem);
    letter-spacing: calc(1 / 16 * 1rem);
  }

  .orbit-card__title {
    margin: 0 0 calc(14 / 16 * 1rem) 0;
  }

  .orbit-card__text {
    margin: 0 0 calc(25 / 16 * 1rem) 0;
  }

  .orbit-card__handle {
    display: none;
  }

  .orbit-card__body,
  .card-orbit__item.is-active .orbit-card__body {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    text-align: center;
    opacity: 1;
    visibility: visible;
  }

  .orbit-card__art,
  .card-orbit__item.is-active .orbit-card__art {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 794 / 499;
    margin-top: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    container-type: inline-size;
  }

  .orbit-card__art img {
    position: absolute;
    width: auto;
    height: 100cqi;
    max-width: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* Título de estas cards, por debajo de 1200. No altera .tx-feature del resto del sitio. */
@media (max-width: 1199.98px) {
  .orbit-card__title {
    font-size: calc(29 / 16 * 1rem);
    letter-spacing: calc(-0.2 / 16 * 1rem);
    font-weight: 700;
  }
}

/* =========================================================
   Red de alianzas — panel con foto y contenido en la mitad derecha
   Medidas del mockup @1920: panel 1720x1206 con 100 de aire lateral (los mismos 100 son el padding
   lateral de la sección, así el panel sale centrado sin anchos fijos).
   ========================================================= */
.alliance {
  background-color: var(--color-bg);
  padding: calc(110 / 16 * 1rem) calc(100 / 16 * 1rem) calc(126 / 16 * 1rem);
}

.alliance__panel {
  position: relative;
  max-width: calc(1720 / 16 * 1rem);
  margin-inline: auto;
  aspect-ratio: 1720 / 1206;
  border-radius: calc(30 / 16 * 1rem);
  overflow: hidden;
  color: var(--color-text);
}

.alliance__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Las dos mitades de la grilla: la izquierda se deja libre para la foto y la derecha centra el contenido */
.alliance__grid {
  position: relative;
  z-index: 1;
  height: 100%;
  align-items: center;
}

/* El bloque arranca en el centro del panel (canaleta de 12) y corta a 158 de su borde derecho: con la
   canaleta de la fila, 170 de padding dan los 690 de texto medidos a 1920 y conservan ese aire al angostar */
.alliance__content {
  padding-right: calc(170 / 16 * 1rem);
}

.alliance__content .tx-eyebrow {
  margin: 0 0 calc(10 / 16 * 1rem) 0;
}

.alliance__content .tx-display {
  margin: 0 0 calc(25 / 16 * 1rem) 0;
}

.alliance__content .tx-body {
  margin: 0;
}

/* Celular: el panel de alianzas toma la card de Beneficios.
   Las reglas de escritorio de .alliance* no se modifican. */
@media (max-width: 575.98px) {
  .alliance {
    padding: calc(24 / 16 * 1rem) calc(12 / 16 * 1rem) calc(10 / 16 * 1rem);
  }

  .alliance__panel {
    aspect-ratio: auto;
    max-width: none;
    min-height: calc(590 / 16 * 1rem);
    margin: calc(10 / 16 * 1rem) 0;
    padding: calc(40 / 16 * 1rem) calc(22 / 16 * 1rem) calc(60 / 16 * 1rem);
    border-radius: calc(28 / 16 * 1rem);
    border: 1px solid rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: start;
    justify-content: center;
  }

  .alliance__image {
    object-position: center center;
  }

  .alliance__grid {
    width: 100%;
    height: auto;
    margin: 0;
    --bs-gutter-x: 0;
  }

  .alliance__grid > .col-6:empty {
    display: none;
  }

  .alliance__content {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    text-align: center;
  }
}

/* =========================================================
   Certificaciones — texto en la primera mitad y sellos en la segunda
   Los sellos van a distinta altura entre sí (así vienen en el mockup, no es una escala uniforme) y se
   reparten el ancho de su columna con space-between, separados por una línea vertical.
   ========================================================= */
.certifications {
  background-color: var(--color-bg);
  padding: calc(105 / 16 * 1rem) 0 calc(115 / 16 * 1rem);
  color: var(--color-text);
}

.certifications__intro .tx-display {
  margin: 0 0 calc(40 / 16 * 1rem) 0;
}

.certifications__intro .tx-body {
  margin: 0;
}

.certifications__seals {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* El tamaño se da por ancho (el alto sale de la proporción del viewBox de cada SVG): así, cuando la
   columna se estrecha, los tres se encogen juntos y en proporción en vez de desbordar la fila */
.certifications__seal {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
}

/* GPTW es el sello más esbelto, así que va a 150 de alto para que pese igual que los otros dos (130) */
.certifications__seal--gptw {
  width: calc(88 / 16 * 1rem);
}

.certifications__seal--mx {
  width: calc(130 / 16 * 1rem);
}

.certifications__seal--esr {
  width: calc(281 / 16 * 1rem);
}

.certifications__divider {
  flex: 0 0 auto;
  width: calc(2 / 16 * 1rem);
  height: calc(90 / 16 * 1rem);
  background-color: rgba(245, 245, 247, 0.5);
}

/* Celular, por debajo de sm. La clase extra solo aporta el aire superior de los sellos. */
@media (max-width: 575.98px) {
  .certifications__seals-gap {
    margin-top: calc(35 / 16 * 1rem);
  }

  .certifications__seal--gptw {
    width: calc(47 / 16 * 1rem);
  }

  .certifications__seal--mx {
    width: calc(57 / 16 * 1rem);
  }

  .certifications__seal--esr {
    width: calc(113 / 16 * 1rem);
  }

  .certifications__divider {
    height: calc(50 / 16 * 1rem);
  }
}

/* =========================================================
   Footer — container con cuatro columnas 4 / 2 / 2 / 4 desde XXL hasta MD.
   Debajo de MD cada una pasa a 12 y el row-gap las separa al apilarse.
   ========================================================= */
.site-footer {
  background-color: var(--slider-section-bg);
  padding: calc(105 / 16 * 1rem) 0 calc(115 / 16 * 1rem);
  color: var(--color-text);
}

/* Solo actúa cuando las columnas se apilan (debajo de MD): en línea no hay segunda fila */
.site-footer__grid {
  row-gap: calc(40 / 16 * 1rem);
}

.site-footer__logo {
  width: calc(290 / 16 * 1rem);
  height: auto;
  margin-bottom: calc(36 / 16 * 1rem);
}

.site-footer__address {
  margin: 0 0 calc(40 / 16 * 1rem) 0;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: calc(16 / 16 * 1rem);
  margin: 0 0 calc(24 / 16 * 1rem) 0;
  padding: 0;
  list-style: none;
}

/* Las redes nacen al 70% y llegan a blanco pleno en hover */
.site-footer__social-link {
  display: block;
  opacity: 0.7;
  transition: all 0.25s ease-in-out;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  opacity: 1;
}

.site-footer__social-link:focus-visible {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

.site-footer__social-icon {
  width: calc(40 / 16 * 1rem);
  height: calc(40 / 16 * 1rem);
  border-radius: 50%;
  object-fit: cover;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__title {
  margin: 0 0 calc(20 / 16 * 1rem) 0;
}

.site-footer__title--seals {
  margin-bottom: calc(24 / 16 * 1rem);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li + li {
  margin-top: calc(10 / 16 * 1rem);
}

/* El gris de reposo lo pone el token tx-gray; el hover solo lo lleva a blanco */
.site-footer__link {
  transition: all 0.25s ease-in-out;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-text);
}

.site-footer__link:focus-visible {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

.site-footer__seals {
  display: flex;
  align-items: center;
  gap: calc(20 / 16 * 1rem);
}

/* Los sellos se miden por alto (el ancho lo da su viewBox). object-fit: contain los deja encogerse
   sin deformarse si la columna se queda corta, como pasa en MD, donde el trío no cabe a tamaño pleno. */
.site-footer__seal {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  height: calc(75 / 16 * 1rem);
  object-fit: contain;
}

/* GPTW es el sello más esbelto: va 15px más alto para que pese igual que los otros dos */
.site-footer__seal--gptw {
  height: calc(90 / 16 * 1rem);
}

/* Acordeón del FAQ. Fondo negro; el azul es el del botón. */
.faq-accordion {
  --bs-accordion-color: #fff;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.12);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: calc(12 / 16 * 1rem);
  --bs-accordion-inner-border-radius: calc(12 / 16 * 1rem);
  --bs-accordion-btn-padding-x: calc(18 / 16 * 1rem);
  --bs-accordion-btn-padding-y: calc(16 / 16 * 1rem);
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(45, 170, 255, 0.25);
  --bs-accordion-active-color: var(--color-primary-start);
  --bs-accordion-active-bg: rgba(45, 170, 255, 0.08);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232daaff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-body-padding-x: calc(18 / 16 * 1rem);
  --bs-accordion-body-padding-y: calc(16 / 16 * 1rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(12 / 16 * 1rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.faq-accordion .accordion-item {
  background: transparent;
  color: #fff;
}

.faq-accordion .accordion-header {
  margin: 0;
}

.faq-accordion .accordion-button {
  font-size: calc(16 / 16 * 1rem);
  font-weight: 600;
  line-height: calc(21 / 16 * 1rem);
  letter-spacing: calc(-0.5 / 16 * 1rem);
}

.faq-accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.faq-accordion .tx-legal {
  opacity: 0.8;
}

/* Escala propia, después de la 4 de Bootstrap (1.5rem).
   5 = 48px. 6 = 72px, el mismo salto. */
.m-5 { margin: calc(48 / 16 * 1rem) !important; }
.mt-5, .my-5 { margin-top: calc(48 / 16 * 1rem) !important; }
.mb-5, .my-5 { margin-bottom: calc(48 / 16 * 1rem) !important; }
.ms-5, .mx-5 { margin-left: calc(48 / 16 * 1rem) !important; }
.me-5, .mx-5 { margin-right: calc(48 / 16 * 1rem) !important; }
.p-5 { padding: calc(48 / 16 * 1rem) !important; }
.pt-5, .py-5 { padding-top: calc(48 / 16 * 1rem) !important; }
.pb-5, .py-5 { padding-bottom: calc(48 / 16 * 1rem) !important; }
.ps-5, .px-5 { padding-left: calc(48 / 16 * 1rem) !important; }
.pe-5, .px-5 { padding-right: calc(48 / 16 * 1rem) !important; }

.m-6 { margin: calc(72 / 16 * 1rem) !important; }
.mt-6, .my-6 { margin-top: calc(72 / 16 * 1rem) !important; }
.mb-6, .my-6 { margin-bottom: calc(72 / 16 * 1rem) !important; }
.ms-6, .mx-6 { margin-left: calc(72 / 16 * 1rem) !important; }
.me-6, .mx-6 { margin-right: calc(72 / 16 * 1rem) !important; }
.p-6 { padding: calc(72 / 16 * 1rem) !important; }
.pt-6, .py-6 { padding-top: calc(72 / 16 * 1rem) !important; }
.pb-6, .py-6 { padding-bottom: calc(72 / 16 * 1rem) !important; }
.ps-6, .px-6 { padding-left: calc(72 / 16 * 1rem) !important; }
.pe-6, .px-6 { padding-right: calc(72 / 16 * 1rem) !important; }

/* Contacto: el banner ocupa al menos el alto de la pantalla y crece si el contenido no cabe. */
.contacto-banner {
  position: relative;
  box-sizing: border-box;
  min-height: 100dvh;
  padding-top: calc(180 / 16 * 1rem);
  padding-bottom: calc(48 / 16 * 1rem);
  overflow: hidden;
}

.contacto-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.contacto-banner .container {
  position: relative;
  z-index: 1;
}

/* Contacto: textos a la izquierda, formulario a la derecha, fondo negro. */
.contacto-list {
  margin: 0;
  padding-left: 1.25rem;
}

.contacto-list li::marker {
  color: var(--color-primary-start);
}

.contacto-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(16 / 16 * 1rem);
  padding: calc(80 / 16 * 1rem) calc(50 / 16 * 1rem);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

@media (max-width: 575.98px) {
  .contacto-card {
    padding: calc(60 / 16 * 1rem) calc(20 / 16 * 1rem);
  }
}

.contacto-field {
  display: block;
  margin-bottom: calc(20 / 16 * 1rem);
}

.contacto-input,
.contacto-select {
  width: 100%;
  border: 0;
  border-radius: calc(10 / 16 * 1rem);
  background: #fff;
  color: #111;
  padding: calc(12 / 16 * 1rem) calc(14 / 16 * 1rem);
  font: inherit;
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(21 / 16 * 1rem);
}

.contacto-input:focus,
.contacto-select:focus {
  outline: 2px solid var(--color-primary-start);
  outline-offset: 2px;
}

.contacto-input.is-invalid,
.contacto-select.is-invalid,
.contacto-terms.is-invalid {
  outline: 2px solid #ff5c5c;
  outline-offset: 2px;
}

.contacto-terms.is-invalid {
  border-radius: calc(8 / 16 * 1rem);
}

.contacto-terms {
  display: flex;
  align-items: flex-start;
  gap: calc(10 / 16 * 1rem);
  margin: calc(8 / 16 * 1rem) 0 calc(16 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(20 / 16 * 1rem);
}

.contacto-terms input {
  margin-top: calc(3 / 16 * 1rem);
  flex-shrink: 0;
}

.contacto-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: calc(6 / 16 * 1rem);
  white-space: nowrap;
  background: var(--gradient-primary);
  color: var(--color-text);
  padding: calc(20 / 16 * 1rem);
  border-radius: 999px;
  border: 0;
  cursor: pointer;
}

.contacto-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.contacto-submit.is-sending:disabled {
  cursor: wait;
}

.contacto-lottie {
  display: flex;
  justify-content: center;
  min-height: calc(180 / 16 * 1rem);
  margin-bottom: calc(8 / 16 * 1rem);
}

.contacto-note {
  margin-top: calc(12 / 16 * 1rem);
  color: #ffb4b4;
}

.contacto-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto-turnstile {
  margin-bottom: calc(16 / 16 * 1rem);
}

/* Landing de incentivos: medidas de layout tomadas de la página anterior.
   La tipografía vive en los tokens tx-*; aquí solo hay posición, aire y recorte. */
.inc-lead {
  max-width: calc(640 / 16 * 1rem);
}

.inc-points p {
  margin: 0 0 calc(16 / 16 * 1rem);
  max-width: calc(760 / 16 * 1rem);
}

.inc-points p:last-child {
  margin-bottom: 0;
}

.inc-photo {
  background: var(--color-bg);
  padding: calc(24 / 16 * 1rem) 0 calc(10 / 16 * 1rem);
}

.inc-photo__card {
  position: relative;
  min-height: calc(520 / 16 * 1rem);
  margin: calc(50 / 16 * 1rem) 0 calc(20 / 16 * 1rem);
  padding: calc(48 / 16 * 1rem) calc(56 / 16 * 1rem);
  border-radius: calc(28 / 16 * 1rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #111;
}

.inc-photo__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.inc-photo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.inc-photo__copy {
  position: relative;
  z-index: 1;
  width: min(calc(560 / 16 * 1rem), 48%);
}

/* Mismo trazo del recuadro en incentivos.php: borde blanco al 45%. */
.inc-photo-line {
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.inc-cards {
  background: var(--color-bg);
  padding: calc(20 / 16 * 1rem) 0 calc(60 / 16 * 1rem);
}

.inc-cards img {
  width: 100%;
  height: auto;
}

.inc-cta {
  background: linear-gradient(34deg, rgba(17, 17, 33, 1) 0%, rgba(13, 42, 97, 1) 100%);
  padding: calc(70 / 16 * 1rem) 0;
}

@media (max-width: 991.98px) {
  .inc-lead,
  .inc-points p {
    max-width: none;
  }

  .inc-photo__card {
    align-items: flex-end;
    justify-content: flex-end;
    min-height: calc(630 / 16 * 1rem);
    margin: calc(30 / 16 * 1rem) 0;
    padding: calc(49 / 16 * 1rem) calc(26 / 16 * 1rem);
    text-align: center;
  }

  .inc-photo__media img {
    object-position: center center;
  }

  .inc-photo__copy {
    width: 100%;
  }

  .inc-cards {
    padding: calc(30 / 16 * 1rem) 0 calc(70 / 16 * 1rem);
  }
}

.inc-photo__card.inc-photo-space {
  margin: calc(80 / 16 * 1rem) 0 calc(80 / 16 * 1rem);
}

.inc-cards.inc-cards-space {
  padding: calc(80 / 16 * 1rem) 0 calc(80 / 16 * 1rem);
}

/* =========================================================
   Superficies compartidas
   Banda con brillo radial y hueco de imagen antes de que exista el archivo.
   ========================================================= */
.radial-panel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  padding: calc(80 / 16 * 1rem) 0 calc(90 / 16 * 1rem);
  color: var(--color-text);
}

.radial-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(45, 170, 255, 0.42) 0%,
    rgba(21, 70, 101, 0.28) 38%,
    rgba(0, 0, 0, 0) 72%
  );
}

.radial-panel > * {
  position: relative;
  z-index: 1;
}

.media-placeholder {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(45, 170, 255, 0.35), transparent 58%),
    linear-gradient(160deg, #1c1c1e 0%, #0b1c2c 100%);
}

/* XL Bootstrap (1200–1399). Solo el delta frente a la base XXL. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .tx-eyebrow {
    font-size: calc(17 / 16 * 1rem);
    line-height: calc(22 / 16 * 1rem);
  }

  .tx-hero {
    font-size: calc(51 / 16 * 1rem);
    line-height: calc(57 / 16 * 1rem);
  }

  .tx-body {
    font-size: calc(16 / 16 * 1rem);
    line-height: calc(24 / 16 * 1rem);
    letter-spacing: calc(0.2 / 16 * 1rem);
  }

  .tx-display {
    font-size: calc(37 / 16 * 1rem);
    line-height: calc(50 / 16 * 1rem);
  }

  .tx-feature {
    font-size: calc(24 / 16 * 1rem);
    line-height: calc(31 / 16 * 1rem);
    letter-spacing: calc(0.4 / 16 * 1rem);
  }

  .ui-card .tx-bcard {
    letter-spacing: calc(0.4 / 16 * 1rem);
  }

  .orbit-card .tx-bcard,
  .site-footer .tx-bcard {
    font-size: calc(14 / 16 * 1rem);
    letter-spacing: calc(1 / 16 * 1rem);
  }

  .hero-content .tx-eyebrow {
    margin: 0 0 calc(10 / 16 * 1rem) 0;
  }

  .hero-content .tx-hero {
    margin: 0 0 calc(20 / 16 * 1rem) 0;
  }

  .cards-slider__title {
    margin: 0 0 calc(30 / 16 * 1rem) 0;
  }

  .card-orbit__title {
    margin: 0 0 calc(40 / 16 * 1rem) 0;
  }

  .orbit-card {
    height: calc(483 / 16 * 1rem);
  }

  .orbit-card__handle {
    height: calc(393 / 16 * 1rem);
  }

  .orbit-card__art {
    right: calc(18 / 16 * 1rem);
  }

  .orbit-card__art img {
    width: 85%;
  }

  .certifications__seal--gptw {
    width: calc(78 / 16 * 1rem);
  }

  .certifications__seal--mx {
    width: calc(105 / 16 * 1rem);
  }

  .certifications__seal--esr {
    width: calc(221 / 16 * 1rem);
  }

  .site-footer__logo {
    width: calc(253 / 16 * 1rem);
  }
}

/* =========================================================
   Blog — listado, TOC, tabla, relacionados
   ========================================================= */
.blog-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  padding: calc(180 / 16 * 1rem) 0 calc(80 / 16 * 1rem);
}

.blog-index .container {
  position: relative;
  z-index: 1;
}

.blog-share .site-footer__social-icon {
  width: calc(30 / 16 * 1rem);
  height: calc(30 / 16 * 1rem);
}

.blog-toc {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(12 / 16 * 1rem);
  padding: calc(24 / 16 * 1rem);
}

.blog-toc__title {
  margin: 0 0 calc(16 / 16 * 1rem) 0;
  text-align: center;
}

.blog-toc ol {
  margin: 0;
  padding-left: calc(20 / 16 * 1rem);
}

.blog-toc a {
  color: inherit;
}

.blog-toc a:hover,
.blog-toc a:focus-visible,
.blog-toc a.tx-blue,
.blog-toc a[aria-current="true"] {
  color: var(--color-primary-start);
}

.blog-table thead th {
  background-color: #1a1e21;
  border-bottom: 1px solid #5c5c63;
}

.blog-table__center {
  text-align: center;
}

.blog-hero {
  padding-top: calc(180 / 16 * 1rem);
}

.faq-section,
.legal-section {
  padding-top: calc(180 / 16 * 1rem) !important;
}

article .w-100 {
  height: auto;
}

.blog-body {
  padding-bottom: calc(50 / 16 * 1rem);
}

.blog-solucion {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-solucion:hover,
.blog-solucion:focus-visible {
  color: inherit;
}

.blog-solucion:hover .btn-outline-light,
.blog-solucion:focus-visible .btn-outline-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.blog-related {
  padding: calc(80 / 16 * 1rem) 0;
  background: linear-gradient(90deg, #121213 0%, #0d2a61 100%);
}

.blog-related__card {
  display: block;
  height: 100%;
  padding: calc(24 / 16 * 1rem);
  border-radius: calc(16 / 16 * 1rem);
  color: var(--color-text);
}

.blog-related__card:hover,
.blog-related__card:focus-visible,
.blog-related__card:hover .tx-feature,
.blog-related__card:hover .tx-gray,
.blog-related__card:focus-visible .tx-feature,
.blog-related__card:focus-visible .tx-gray {
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .blog-body {
    padding-bottom: 0;
  }

  .row > .blog-solucion-col {
    margin-top: 0;
    padding-bottom: calc(50 / 16 * 1rem);
  }
}

@media (max-width: 575.98px) {
  .blog-toc {
    display: none;
  }

  .blog-hero {
    padding-top: calc(130 / 16 * 1rem);
  }
}

.blog-related__title {
  margin: 0 0 calc(12 / 16 * 1rem) 0;
}

.blog-related__lead {
  margin: 0;
}