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

: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));

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

  /* Proporción áurea: toda unidad de espaciado nace de --space-unit x phi^n */
  --phi: 1.618;
  --space-unit: 1rem;
  --space-3xs: calc(var(--space-unit) / var(--phi) / var(--phi) / var(--phi));
  --space-2xs: calc(var(--space-unit) / var(--phi) / var(--phi));
  --space-xs: calc(var(--space-unit) / var(--phi));
  --space-sm: var(--space-unit);
  --space-md: calc(var(--space-unit) * var(--phi));
  --space-lg: calc(var(--space-unit) * var(--phi) * var(--phi));
  --space-xl: calc(var(--space-unit) * var(--phi) * var(--phi) * var(--phi));
  --space-2xl: calc(var(--space-unit) * var(--phi) * var(--phi) * var(--phi) * var(--phi));

  /* Geometría */
  --radius-pill: 999px;

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

  /* Header: valores que cambian al hacer scroll */
  --header-padding-block: var(--space-lg);
  /* Equivalente relativo de 150px @ 16px raíz (150 / 16 = 9.375rem), sin usar px sólidos */
  --header-menu-gap: calc(var(--space-unit) * 9.375);

  /* Escala tipográfica de contenido: fidelidad 1:1 con Figma (1920x1080), en rem vía calc.
     Se nombra por tamaño, no por elemento, para poder reutilizarse en cualquier componente futuro. */

  /* Factor de escala SOLO del Hero (se aplica localmente en .hero-content, nunca dentro de estos
     tokens base) para poder probar proporciones sin afectar la fidelidad 1:1 de otras secciones. */
  --hero-scale: 0.7;
  --hero-type-scale: calc(var(--hero-scale) * 0.9);

  /* Tokens base: fidelidad 1:1 con Figma, en rem vía calc. Se nombran por tamaño (no por elemento)
     para reutilizarse en cualquier componente. Ningún factor de escala vive aquí. */
  --fs-100: calc(20 / 16 * 1rem);
  --lh-100: calc(26 / 16 * 1rem);
  --fs-200: calc(27 / 16 * 1rem);
  --lh-200: calc(34 / 16 * 1rem);
  --fs-300: calc(33 / 16 * 1rem);
  --lh-300: calc(43 / 16 * 1rem);
  --fs-400: calc(55 / 16 * 1rem);
  --lh-400: calc(65 / 16 * 1rem);
  --fs-500: calc(66 / 16 * 1rem);
  --lh-500: calc(76 / 16 * 1rem);
  --ls-normal: 0;
  --ls-tight: calc(-1.2 / 16 * 1rem);

  /* Ritmo vertical de contenido (independiente del espaciado áureo, mapea specs de diseño) */
  --content-space-sm: calc(40 / 16 * 1rem);
  --content-space-md: calc(60 / 16 * 1rem);

  /* Slider-card: dimensiones, radios, pill de paginación (todo en rem vía calc, fidelidad Figma) */
  --slider-card-w: calc(964 / 16 * 1rem);
  --slider-card-h: calc(435 / 16 * 1rem);
  --slider-card-radius: calc(50 / 16 * 1rem);
  --slider-card-gap: var(--space-sm);
  --slider-card-text-pad: var(--content-space-sm);

  --slider-section-bg: #111111;
  --slider-section-pad-top: calc(110 / 16 * 1rem);
  --slider-section-pad-bottom: calc(130 / 16 * 1rem);

  --page-pill-w: calc(160 / 16 * 1rem);
  --page-pill-h: calc(56 / 16 * 1rem);
  --page-pill-bg: rgba(42, 42, 45, 0.8);
  --page-pill-dot-color: rgba(245, 245, 247, 0.8);
  --page-pill-dot-w: calc(10 / 16 * 1rem);
  --page-pill-dot-active-w: calc(60 / 16 * 1rem);
}

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

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  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: var(--space-xs) var(--space-sm);
  background: var(--color-primary-end);
  color: var(--color-text);
  border-radius: var(--space-3xs);
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-sm);
}

/* =========================================================
   Tipografía genérica (tx-*) — no atada a h1/h2/p
   Base = 1300–1200px. Franja especial 1399–1301. xxl = 1920–1400.
   ========================================================= */
.tx-kicker {
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(16 / 16 * 1rem);
  letter-spacing: calc(0.89 / 16 * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.tx-display {
  font-size: calc(50 / 16 * 1rem);
  line-height: calc(54 / 16 * 1rem);
  letter-spacing: 0;
  font-weight: 700;
}

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

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

@media (min-width: 1301px) and (max-width: 1399px) {
  .tx-kicker {
    font-size: calc(19 / 16 * 1rem);
    line-height: calc(19 / 16 * 1rem);
    letter-spacing: calc(0.89 / 16 * 1rem);
  }

  .tx-display {
    font-size: calc(47 / 16 * 1rem);
    line-height: calc(53 / 16 * 1rem);
    letter-spacing: 0;
  }

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

  .tx-btn {
    font-size: calc(16 / 16 * 1rem);
  }
}

@media (min-width: 1400px) {
  .tx-kicker {
    font-size: calc(23 / 16 * 1rem);
    line-height: calc(23 / 16 * 1rem);
    letter-spacing: calc(0.5 / 16 * 1rem);
  }

  .tx-display {
    font-size: calc(60 / 16 * 1rem);
    line-height: calc(68 / 16 * 1rem);
    letter-spacing: 0;
  }

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

  .tx-btn {
    font-size: calc(16 / 16 * 1rem);
  }
}

/* =========================================================
   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: var(--space-2xs);
  white-space: nowrap;
  background: var(--gradient-primary);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  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(var(--space-2xl) * 1.35);
  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: var(--header-padding-block);
  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: 150px;
  height: 45px;
}

/* 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: var(--header-menu-gap);
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  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: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-pill__list a {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  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: var(--space-xs);
}

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

.site-header.is-scrolled .site-header__menu {
  gap: calc(var(--space-3xs) * 1.15);
  transform: scale(0.69);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: min(100dvh, 1000px);
}

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

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

/* 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-kicker {
  margin: 0 0 calc(var(--content-space-sm) * var(--hero-scale)) 0;
}

.hero-content .tx-display {
  margin: 0 0 calc(var(--content-space-md) * var(--hero-scale)) 0;
}

.hero-content .tx-body {
  margin: 0 0 calc(var(--content-space-sm) * var(--hero-scale)) 0;
}

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

/* =========================================================
   Sección "cards-slider" — encabezado (dentro de container) + slider-card (full-bleed)
   ========================================================= */
.cards-slider {
  background-color: var(--slider-section-bg);
  padding: var(--slider-section-pad-top) 0 var(--slider-section-pad-bottom);
}

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

.cards-slider__title {
  margin: 0 0 var(--content-space-sm) 0;
  /* Reducción total del 25% (15% + 10%) sobre el tamaño base original (--fs-400 = 55px) */
  font-size: calc(var(--fs-400) * 0.75);
  line-height: calc(var(--lh-400) * 0.75);
  letter-spacing: calc(var(--ls-tight) * 0.75);
  font-weight: 700;
}

/* Misma tipografía que .hero-content__description: no pueden ser diferentes */
.cards-slider__lead {
  margin: 0 0 var(--content-space-md) 0;
  font-size: calc(var(--fs-100) * var(--hero-type-scale));
  line-height: calc(var(--lh-100) * var(--hero-type-scale));
  letter-spacing: var(--ls-normal);
  font-weight: 600;
}

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

.slider-card__track {
  display: flex;
  gap: var(--slider-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  will-change: transform;
}

/* Sin transition inline por defecto: JS decide cuándo animar (drag vs autoplay/dot) */
.slider-card__item {
  position: relative;
  flex: 0 0 auto;
  width: var(--slider-card-w);
  height: var(--slider-card-h);
  border-radius: var(--slider-card-radius);
  overflow: hidden;
  background-color: #1c1f22;
  color: var(--color-text);
}

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

.slider-card__text {
  position: absolute;
  top: var(--slider-card-text-pad);
  left: var(--slider-card-text-pad);
  max-width: 40%;
  margin: 0;
  font-size: var(--fs-100);
  line-height: var(--lh-100);
  letter-spacing: var(--ls-normal);
  font-weight: 600;
  color: var(--color-text);
}

.slider-card__tag {
  position: absolute;
  bottom: var(--slider-card-text-pad);
  left: var(--slider-card-text-pad);
  margin: 0;
  font-size: var(--fs-300);
  line-height: var(--lh-300);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Page-pill: paginación --- */
.page-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: var(--page-pill-w);
  height: var(--page-pill-h);
  margin: var(--content-space-sm) auto 0;
  border-radius: var(--radius-pill);
  background-color: var(--page-pill-bg);
  border: none;
}

.page-pill__dot {
  flex: 0 0 auto;
  width: var(--page-pill-dot-w);
  height: var(--page-pill-dot-w);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background-color: var(--page-pill-dot-color);
  cursor: pointer;
  transition: width var(--duration-liquid) var(--ease-liquid);
}

.page-pill__dot.is-active {
  width: var(--page-pill-dot-active-w);
}

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