/* ==========================================================================
   Clave Digital · Landing — Sistema Serena v2 (fondos: negro puro + variantes)
   Solo blanco/negro (y sus variantes) como fondo. El azul océano/bruma queda
   como detalle puntual (bordes, iconos); el azul eléctrico es el único acento.
   ========================================================================== */

:root {
  --c-bg: #0B0C0E;             /* negro puro — fondo dominante */
  --c-bg-alt: #131417;         /* variante suave para franjas alternas */
  --c-surface: #1B1D21;        /* superficie de tarjetas/contenedores */
  --c-secondary: #5B8AA0;      /* azul bruma — detalle puntual, no fondo */
  --c-accent: #3D8BFF;
  --c-accent-hover: #5C9EFF;
  --c-accent-readable: #AED2FF;
  --c-ink: #0A1B28;
  --c-white: #FFFFFF;
  --c-body: #E7E9EC;
  --glow: rgba(61, 139, 255, 0.28);

  --card-bg: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.1);

  --font-logo: "Poppins", sans-serif; /* solo referencia; el logo real es imagen (logo.png) */
  --font-head: "Bricolage Grotesque", sans-serif;
  --font-body: "Inter", sans-serif;

  --container: 1140px;
  --radius: 14px;
  --header-h: 72px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-body);
  background-color: var(--c-bg);
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800; /* Bricolage Grotesque luce mejor en ExtraBold para titulares */
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-white);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; }

p strong { color: var(--c-white); }

a { color: var(--c-accent-readable); }

.container {
  /* Móvil intacto: mismo comportamiento de siempre (min ancho - 2.5rem), confirmado que ya
     estaba bien y no se debía tocar. */
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

/* En ventanas de portátil (~1200-1400px, el rango típico de un portátil real, no un monitor
   externo) el .container de 1140px fijo dejaba muy poco margen a los lados (~40-70px por
   lado): con 90% no bastaba porque 90% de 1300px (1170px) seguía superando 1140px, así que el
   max-width fijo ganaba igual sin dar más aire. Con 85% el contenedor empieza a ceder ancho ya
   en ~1250px de viewport en vez de esperar a ~1900px, dando un margen visualmente cómodo mucho
   antes — scoped a >900px para no tocar el comportamiento ya validado en móvil/tablet. */
@media (min-width: 900px) {
  .container {
    width: clamp(320px, 85%, var(--container));
  }
}

.container--narrow { max-width: 780px; }

.overline {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-accent-readable);
  margin-bottom: 0.9rem;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  padding: 0.85rem 1.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn--primary {
  background-color: var(--c-accent);
  color: var(--c-ink);
  box-shadow: 0 0 24px var(--glow);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 32px var(--glow);
}

.btn--ghost {
  background-color: transparent;
  color: var(--c-white);
  border: 1px solid rgba(174, 210, 255, 0.45);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--c-accent-hover);
  color: var(--c-accent-readable);
}

.btn--lg { padding: 1rem 2.1rem; font-size: 1.06rem; }
.btn--xl { padding: 1.15rem 2.8rem; font-size: 1.15rem; }

.btn:focus-visible { outline: 3px solid var(--c-accent-readable); outline-offset: 3px; }

/* ---------- Header ---------- */
/* Header: negro puro en reposo (arriba del todo). Al hacer scroll (.is-scrolled) pasa a un
   gris de --c-surface más transparente que antes, para sentirse como un plano flotante
   ligero sobre el contenido, con la línea de acento azul reforzando la separación. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(11, 12, 14, 0.9); /* var(--c-bg) — negro fijo en reposo */
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.header.is-scrolled {
  background-color: rgba(27, 29, 33, 0.62); /* var(--c-surface), más transparente que en reposo */
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(61, 139, 255, 0.35);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Logo actual: símbolo (imagen) + wordmark en texto real, ya no todo en una sola imagen.
   El texto real es nítido a cualquier resolución y permite usar la tipografía de marca. */
.brand__logo { height: 38px; width: auto; }
.brand__logo--footer { height: 32px; }
.brand__wordmark {
  margin-left: 0.35rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.brand__wordmark--footer { font-size: 1.15rem; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-body);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav a:hover, .nav a:focus-visible { color: var(--c-accent-readable); }
.nav__cta { padding: 0.55rem 1.2rem; }
.nav a.nav__cta { color: var(--c-white); }

/* Subrayado animado — solo enlaces de texto, no el botón "Hablemos" */
.nav a:not(.nav__cta) {
  position: relative;
  padding-block: 0.2rem;
}
.nav a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: var(--c-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav a:not(.nav__cta):hover::after,
.nav a:not(.nav__cta):focus-visible::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .nav a:not(.nav__cta)::after { transition: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--c-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- Hero cinematográfico ---------- */
/* El Hero termina exactamente en el borde inferior de este bloque: la imagen queda
   recortada aquí (overflow:hidden) y la barra de nichos vive fuera, como sección aparte. */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 680px;
  max-height: 960px;
  display: flex;
  align-items: center;
  padding: var(--header-h) 0 0;
}

/* Imagen enmarcada: un margen fino la separa del header y de la barra de nichos,
   con esquinas redondeadas — ya no ocupa el hero a sangre completa */
.hero__bg {
  position: absolute;
  inset: clamp(14px, 2.2vh, 28px);
  z-index: 0;
  border-radius: 1.25rem;
  background-size: cover;
  background-position: center; /* imagen recortada en origen: ya no queda margen lateral relevante que ajustar */
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(1.02);
  opacity: 0.9; /* último empujón de transparencia para separarla del grid */
}

/* Gradiente de lectura: negro sólido a la izquierda (texto) → un valle de máxima claridad en el
   centro (deja ver la foto) → vuelve a oscurecer bajo la consola de widgets, para que el grid se
   separe con contraste limpio de la imagen en vez de leerse "sucio" sobre ella.
   Sigue exactamente el mismo inset que .hero__bg para no salirse del marco. */
.hero__scrim {
  position: absolute;
  inset: clamp(14px, 2.2vh, 28px);
  z-index: 0;
  border-radius: 1.25rem;
  background:
    linear-gradient(90deg,
      rgba(11, 12, 14, 0.94) 0%,
      rgba(11, 12, 14, 0.9) 34%,
      rgba(11, 12, 14, 0.5) 46%,
      rgba(11, 12, 14, 0.08) 58%,
      rgba(11, 12, 14, 0.1) 66%,
      rgba(11, 12, 14, 0.66) 82%,
      rgba(11, 12, 14, 0.76) 100%),
    linear-gradient(0deg,
      rgba(11, 12, 14, 0.85) 0%,
      rgba(11, 12, 14, 0.3) 22%,
      transparent 45%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* El texto vive directamente sobre el fondo, sin caja ni superficie propia */
.hero__copy h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4); }

/* Partículas + glow de fondo, muy sutiles — decorativas, fuera del flujo de lectura */
.hero__particles {
  position: absolute;
  inset: -10% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero__particles span {
  position: absolute;
  display: block;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background-color: var(--c-accent-readable);
  opacity: 0.35;
  animation: particle-drift var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.15; }
  50% { transform: translate(var(--dx, 12px), var(--dy, -18px)); opacity: 0.5; }
}

@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }
}

.hero__sub { margin-top: 1.3rem; font-size: 1.15rem; max-width: 34em; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hero__note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--c-accent-readable);
}

/* ---------- Hero: consola de widgets (glassmorphism, estilo "panel de mando") ---------- */
.console {
  position: relative;
  display: grid;
  gap: 0.65rem; /* gap reducido: compacto y técnico */
  max-width: 300px;
  margin-left: auto;
}

/* Halo detrás del grid: degradado azul océano de marca → negro, radial (no un bloque cuadrado).
   Separa visualmente la consola de la foto sin convertir el azul en fondo dominante del Hero —
   es un detalle puntual acotado a esta zona, como permite el sistema de marca. */
.console::before {
  content: "";
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(45, 94, 126, 0.72) 0%, rgba(11, 12, 14, 0.85) 60%, transparent 100%);
  pointer-events: none;
}

.console__item {
  position: relative;
  border-radius: 0.85rem;
  padding: 1rem 1.15rem;
  background-color: rgba(13, 16, 20, 0.62);
  border: 1px solid rgba(174, 210, 255, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.console__icon { width: 18px; height: 18px; fill: var(--c-accent-readable); flex-shrink: 0; }

/* Widget 1: contador grande */
.console__main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.console__counter,
.console__counter-suffix {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--c-white);
}
.console__counter-suffix { font-size: 1.6rem; }

/* Widget 2: sistema activo, con pulso cian */
.console__item--status { display: flex; align-items: center; gap: 0.65rem; }
.console__pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #22E5FF;
  box-shadow: 0 0 10px #22E5FF;
  flex-shrink: 0;
}
.console__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid #22E5FF;
  animation: pulse-ring 2s ease-out infinite;
}

/* Widget 3: etiqueta con icono */
.console__item--tag { display: flex; align-items: center; gap: 0.65rem; }

.console__label {
  font-size: 0.8rem;
  color: var(--c-body);
}
.console__label--main { font-size: 0.88rem; font-weight: 600; color: var(--c-white); }

@keyframes pulse-ring {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .console__pulse::after { animation: none; }
}

/* ---------- Hero: wrapper del visual + tarjetas flotantes ---------- */
.hero__visual { position: relative; }

.float-card {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background-color: rgba(27, 29, 33, 0.55);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.85rem;
  color: var(--c-body);
  white-space: nowrap;
  animation: float 5s ease-in-out infinite;
}

.float-card strong { color: var(--c-white); }

.float-card__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(61, 139, 255, 0.18);
  border: 1px solid rgba(61, 139, 255, 0.4);
}
.float-card__icon svg { width: 14px; height: 14px; fill: var(--c-accent-readable); }

.float-card--top-left {
  top: -14px;
  left: -18px;
  animation-delay: 0s;
}
.float-card--bottom-right {
  bottom: -34px;
  right: -14px;
  animation-delay: 1.4s; /* desfase para que no floten al unísono */
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .float-card { animation: none; }
}

/* Franja de confianza */
/* Bloque sólido e independiente del Hero — el negro es propio, no una transparencia
   heredada de la imagen, así el texto de la marquesina siempre queda perfectamente legible */
.trustbar {
  position: relative;
  z-index: 1;
  background-color: var(--c-bg);
  padding: 1.4rem 0;
  border-top: 1px solid var(--card-border);
}
.trustbar__head { margin-bottom: 0.9rem; }
.trustbar__label { font-size: 0.82rem; color: var(--c-accent-readable); }

/* Infinite Marquee: dos copias idénticas del track, la animación desplaza exactamente el 50%
   del ancho total — al llegar ahí el bucle es imperceptible porque la segunda copia ya ocupa
   la posición de la primera */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  /* Degradado en los bordes: el texto aparece/desaparece desde la transparencia, sin cortes */
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  animation: marquee-scroll 20s linear infinite;
}

/* Pausa al hacer hover sobre cualquiera de las dos copias del track */
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track li {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-body);
  opacity: 0.85;
  white-space: nowrap;
}
.marquee__dot { color: var(--c-accent); opacity: 1; font-size: 1rem; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Secciones ---------- */
.section { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.section--alt { background-color: var(--c-bg-alt); }

.section__head { max-width: 720px; margin-bottom: 2.6rem; }
.section__lead { margin-top: 1rem; font-size: 1.1rem; }
.section__cta { margin-top: 2.4rem; }

/* ---------- Problemas · fondo de "sobrecarga digital" ---------- */
.problems { position: relative; isolation: isolate; overflow: hidden; }

/* Servicios reutiliza la misma Data Layer (más tenue) para diferenciarse de Sectores/Casos,
   que también son fondo negro liso y quedaban indistinguibles entre sí */
.services { position: relative; isolation: isolate; overflow: hidden; }
.services .data-layer__grid { opacity: 0.6; }

/* Capa de datos animada: grid + partículas, azul muy tenue, flota detrás de las tarjetas.
   z-index:-1 y pointer-events:none garantizan que nunca interfiere con el texto ni los clics. */
.data-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.data-layer__grid {
  position: absolute;
  inset: -20%; /* excedente para que el desplazamiento nunca deje bordes vacíos */
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.12) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Máscara radial: más presente en los bordes, se desvanece hacia el centro donde está el texto */
  mask-image: radial-gradient(ellipse 55% 55% at center, transparent 0%, black 85%);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at center, transparent 0%, black 85%);
  animation: data-grid-drift 90s linear infinite;
}

@keyframes data-grid-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(64px, 64px); }
}

.data-layer__dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #38bdf8;
  opacity: 0.14;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.25);
  animation: data-dot-float var(--dur, 38s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes data-dot-float {
  0%, 100% { transform: translate(0, 0); opacity: 0.08; }
  50% { transform: translate(18px, -14px); opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
  .data-layer__grid, .data-layer__dot { animation: none; }
}

/* Cristal ahumado: las tarjetas flotan sobre la textura de datos */
.problems__grid .card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(61, 139, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Tarjetas de Diagnóstico: quietas en el grid, con botón de ampliar ---------- */
.card--scan {
  position: relative;
  padding-top: 2.4rem;
}

.card__expand {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(61, 139, 255, 0.1);
  border: 1px solid rgba(61, 139, 255, 0.25);
  color: var(--c-accent-readable);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.card__expand svg { width: 15px; height: 15px; fill: currentColor; }
.card__expand:hover,
.card__expand:focus-visible {
  background: rgba(61, 139, 255, 0.22);
  border-color: rgba(61, 139, 255, 0.5);
  transform: scale(1.08);
}

/* ---------- Modo Foco: lightbox con navegación entre tarjetas ---------- */
.focus-mode[hidden] { display: none; }

.focus-mode {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-mode__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 9, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.focus-mode__card {
  position: relative;
  z-index: 1;
  width: min(560px, calc(100vw - 5rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 2.4rem 2.2rem;
  background: var(--card-bg);
  border: 1px solid rgba(61, 139, 255, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px var(--glow);
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  animation: focus-card-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes focus-card-in {
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.focus-mode__card h3 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 1rem; }
.focus-mode__card p { font-size: 1.08rem; line-height: 1.7; }

.focus-mode__close,
.focus-mode__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(27, 29, 33, 0.7);
  border: 1px solid var(--card-border);
  color: var(--c-white);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.focus-mode__close:hover, .focus-mode__close:focus-visible,
.focus-mode__nav:hover, .focus-mode__nav:focus-visible {
  background: rgba(61, 139, 255, 0.28);
}

.focus-mode__close {
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 3rem);
  width: 40px;
  height: 40px;
}
.focus-mode__close svg { width: 16px; height: 16px; fill: currentColor; }

.focus-mode__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
}
.focus-mode__nav svg { width: 20px; height: 20px; fill: currentColor; }
.focus-mode__nav--prev { left: clamp(0.75rem, 3vw, 2.5rem); }
.focus-mode__nav--next { right: clamp(0.75rem, 3vw, 2.5rem); }
.focus-mode__nav:hover { transform: translateY(-50%) scale(1.08); }

body.scan-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .focus-mode__card { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .focus-mode__card { width: calc(100vw - 2rem); padding: 2rem 1.4rem; }
  .focus-mode__nav { width: 38px; height: 38px; }
  .focus-mode__nav--prev { left: 0.4rem; }
  .focus-mode__nav--next { right: 0.4rem; }
}

/* ---------- Web Inteligente (showcase Paleta / Tipografía / Tono) ----------
   El radial-gradient azul intenso de la iteración anterior rompía la identidad de marca
   (fondo dominante debe ser blanco/negro, azul solo de acento) — el propio usuario lo
   corrigió. Vuelve a la franja oscura estándar del sitio con un degradado sutil gris-azulado
   en vez de un color plano, para que la sección conserve algo de la profundidad pedida sin
   reintroducir el azul dominante. */
.branding-suite {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--c-bg-alt) 0%, #1a1d24 100%);
}

/* Encabezado centrado como pieza de diseño equilibrada: la sección entera se lee como un
   bloque simétrico, no como texto a la izquierda + contenido a la derecha (que es el patrón
   por defecto de .section__head en el resto del sitio — de ahí el modificador propio). */
.branding-suite__head {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Espacio generoso entre el encabezado centrado y el bloque de tarjetas+monitor, para que la
   sección respire en vez de sentirse amontonada. */
.branding-suite__layout-wrap {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  justify-content: center;
}

/* Bento sticky: 60/40. La columna del mockup no lleva align-items:center porque el sticky
   necesita que su contenedor tenga la altura real de la columna izquierda para poder "pegarse"
   mientras esta se desplaza. Todo el bloque (tarjetas+monitor) queda centrado como unidad en
   la página gracias al max-width + el wrapper flex de arriba. */
.branding-suite__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 1040px;
  width: 100%;
}

.branding-suite__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 420px;
}

.branding-suite__card {
  cursor: pointer;
  /* Glassmorphism premium: bg-white/5 + border-white/10 */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.branding-suite__card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-5px);
  /* shadow-xl */
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Tarjeta activa: resplandor tipo ring-2 ring-blue-500/50, indica cuál se ve en el mockup */
.branding-suite__card.is-active {
  border-color: rgba(61, 139, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(61, 139, 255, 0.5), 0 20px 40px rgba(0, 0, 0, 0.35);
  background: rgba(61, 139, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .branding-suite__card { transition: none; }
  .branding-suite__card:hover { transform: none; }
}

.swatch-row { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.type-preview {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--card-border);
}
.type-preview__big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--c-white);
}
.type-preview__small {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--c-body);
}

.tone-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.tone-tag {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(61, 139, 255, 0.12);
  border: 1px solid rgba(61, 139, 255, 0.3);
  color: var(--c-accent-readable);
}

.branding-suite__cta { text-align: center; }

/* Botón "Shimmer": degradado azul→cian + brillo diagonal que recorre el botón en bucle lento */
.btn--shimmer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--c-accent) 0%, #38bdf8 100%);
  color: var(--c-ink);
  padding: 1.05rem 2.4rem;
  font-size: 1.05rem;
  box-shadow: 0 0 30px var(--glow);
}
.btn--shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  mix-blend-mode: overlay;
  transform: skewX(-20deg);
  animation: shimmer-sweep 3.2s ease-in-out infinite;
}
.btn--shimmer:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 36px var(--glow);
}
@keyframes shimmer-sweep {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--shimmer::after { animation: none; }
}

@media (max-width: 900px) {
  .branding-suite__layout { grid-template-columns: 1fr; }
  .branding-suite__bento { max-width: none; }
}

/* El monitor ocupaba toda la pantalla inicial en móvil (width:100% + min-height:300px del
   body de la app + marco/base/cuello), dejando el bento de tarjetas fuera de vista y dando
   la sensación de que no hay nada interactivo que tocar. Se reduce su tamaño máximo y la
   altura mínima de la pantalla del monitor específicamente en móvil. */
@media (max-width: 640px) {
  .monitor { max-width: 320px; margin: 0 auto; }
  .app-window__body { min-height: 200px; }
  .app-window__view { min-height: 200px; }
}

/* ---------- Monitor de hardware (marco del mockup Brand Architect) ----------
   El mockup ya no es una simple ventana flotante: es un monitor de escritorio minimalista
   (marco negro mate + base + cuello) con una pantalla que arranca "apagada" (negro puro) y
   se enciende al primer clic en una tarjeta. La interfaz interna es tema oscuro/OLED, nunca
   fondos claros, para que combine con el "encendido" del panel. */
.app-window-wrap {
  position: sticky;
  top: 100px;
  display: flex;
  justify-content: center;
}

.monitor {
  width: 100%;
  max-width: 560px;
}

.monitor__screen-frame {
  position: relative;
  border-radius: 16px;
  /* Bisel mínimo: la app ocupa prácticamente el 100% del área interior, sin bordes muertos. */
  padding: 2%;
  background: #050505;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.4s ease-out;
}
/* Resplandor del marco al encender el panel */
.monitor__screen-frame.is-on {
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 50px rgba(56, 189, 248, 0.22), 0 0 110px rgba(56, 189, 248, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .monitor__screen-frame { transition: none; }
}

.app-window {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

/* Gradiente de luz radial desde el centro de la pantalla, solo visible con el panel encendido:
   simula un OLED que emite luz propia además del contenido. La clase .is-on se añade tanto a
   .app-window__body como a .app-window (el JS marca ambos) para no depender de :has(). */
.app-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}
.app-window.is-on::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .app-window::before { transition: none; }
}

.app-window__titlebar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: #000;
}
.app-window__dot { width: 6px; height: 6px; border-radius: 50%; }
.app-window__url {
  margin-left: 0.7rem;
  font-size: 0.7rem;
  color: #6B7280;
  font-family: var(--font-body);
}

.app-window__body {
  position: relative;
  min-height: 300px;
  background: #000;
}

/* Trigger de contenido: cada vista ocupa el mismo hueco (grid stacking), solo la activa
   es visible/interactiva. El cambio es un fade-in + scale(0.98→1) de 0.3s, "encendido OLED". */
.app-window__view {
  display: none;
  grid-template-columns: 1fr 1.1fr;
  min-height: 300px;
  opacity: 0;
  transform: scale(0.98);
}
.app-window__body.is-on .app-window__view.is-active {
  display: grid;
  animation: app-view-in 0.4s ease-out forwards;
}
@keyframes app-view-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .app-window__body.is-on .app-window__view.is-active { animation: none; opacity: 1; transform: scale(1); }
}

/* Estado apagado: pantalla negra total, visible hasta el primer clic */
.app-window__off {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #000;
  text-align: center;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
.app-window__off-label {
  font-size: 0.8rem;
  color: #3D4A5C;
  font-family: var(--font-body);
}
.app-window__body.is-on .app-window__off {
  opacity: 0;
  pointer-events: none;
}

.app-window__panel {
  padding: 1.1rem 1rem;
  background: #0A0E14;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.app-window__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5B6B82;
}
.app-window__field {
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: #12181F;
  border: 1px solid rgba(56, 189, 248, 0.25);
  font-size: 0.8rem;
  color: #E6EDF5;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.app-window__field--font { font-family: var(--font-head); font-size: 0.95rem; }
.app-window__field--font-body { font-family: var(--font-body); font-weight: 500; }

.app-window__swatches { display: flex; gap: 0.35rem; margin-bottom: 0.3rem; }
.app-window__swatches span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.app-window__btn {
  margin-top: auto;
  text-align: center;
  padding: 0.55rem;
  border-radius: 8px;
  background: #38BDF8;
  color: #04121C;
  font-size: 0.78rem;
  font-weight: 700;
}

.app-window__tone-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.3rem; }
.app-window__tone-list span {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: #12181F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  color: #8A98AC;
}

.app-window__preview {
  padding: 1.1rem 1rem;
  background: #000;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.app-window__preview-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5B6B82;
  margin-bottom: 0.2rem;
}
.app-window__card {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: #0F2A3D;
  color: #E6EDF5;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.12);
}
.app-window__card--light {
  background: #0A0E14;
  color: #38BDF8;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.app-window__card-line {
  display: block;
  width: 40%;
  height: 3px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: rgba(56, 189, 248, 0.5);
}
.app-window__card-line--accent { background: #8FBFA3; width: 30%; }

.app-window__preview--type { justify-content: center; gap: 0.55rem; }
.app-window__type-h1 {
  font-family: var(--font-head);
  font-size: 1.3rem;
  line-height: 1.15;
  color: #E6EDF5;
}
.app-window__type-h2 {
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: #38BDF8;
}
.app-window__type-p {
  font-size: 0.76rem;
  line-height: 1.5;
  color: #8A98AC;
}

.app-window__tone-quote {
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  background: #0A0E14;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-style: italic;
  color: #E6EDF5;
  line-height: 1.5;
}
.app-window__tone-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.app-window__tone-pills span {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38BDF8;
  font-size: 0.72rem;
  font-weight: 600;
}

/* Reflejo sutil de cristal en la parte superior del marco */
.monitor__glare {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 30%);
  pointer-events: none;
}

/* Cuello + base: dan la apariencia tridimensional de monitor de escritorio, estilo Apple
   Studio Display (base ancha y plana, cuello grueso y recto, no un trípode fino). Colores
   más claros que el fondo de la sección para que tengan presencia propia en vez de fundirse
   con el degradado gris-azulado detrás. */
.monitor__neck {
  width: 24%;
  max-width: 130px;
  height: 30px;
  margin: 0 auto;
  background: #1F2937;
  border-radius: 0 0 4px 4px;
}
.monitor__base {
  width: 160px;
  max-width: 55%;
  height: 12px;
  margin: 0 auto;
  border-radius: 4px;
  background: #374151;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

@media (max-width: 520px) {
  .app-window__view.is-active { grid-template-columns: 1fr; }
  .app-window__panel { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
}

/* En móvil se oculta el monitor (mockup del Brand Architect) por completo: ocupaba toda la
   pantalla y no aportaba interacción usable en pantallas pequeñas. Va DESPUÉS de la definición
   base de .app-window-wrap (position:sticky; display:flex) para ganar por orden de cascada —
   si se pusiera antes, la regla base la sobrescribiría. En escritorio (>900px) queda intacto. */
@media (max-width: 900px) {
  .app-window-wrap { display: none; }
}

/* ---------- Sección A · Inmersiva (imagen fondo + overlay + zoom + widget IA) ---------- */
.immersive {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.immersive__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.immersive__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 6s ease-out;
  filter: saturate(0.85) brightness(0.75);
}
.immersive__media.is-zoomed img { transform: scale(1.08); }

.immersive__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 12, 14, 0.94) 0%, rgba(11, 12, 14, 0.78) 42%, rgba(11, 12, 14, 0.42) 100%),
    linear-gradient(0deg, rgba(11, 12, 14, 0.55), transparent 40%);
}

.immersive__content { max-width: 620px; padding-block: 3rem; }
.immersive__content h2 { margin-top: 0.3rem; }

/* Widget "IA analizando datos" — borde neón fino */
.ai-widget {
  margin-top: 2.2rem;
  width: min(100%, 360px);
  border-radius: var(--radius);
  background-color: rgba(11, 12, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-accent);
  box-shadow: 0 0 1px var(--c-accent), 0 0 24px var(--glow);
  padding: 1.1rem 1.3rem;
}
.ai-widget__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-accent-readable);
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--card-border);
}
.ai-widget__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}
.ai-widget__rows { display: grid; gap: 0.6rem; list-style: none; font-size: 0.9rem; }
.ai-widget__rows li { display: flex; justify-content: space-between; align-items: center; color: var(--c-body); }
.ai-widget__rows strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--c-white); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .immersive__media img { transition: none; }
  .ai-widget__dot { animation: none; }
}

@media (max-width: 720px) {
  .immersive { min-height: 0; padding-block: 4rem; }
  .immersive__media img { transition: none; transform: none !important; } /* sin zoom en móvil: evita jank en scroll táctil */
  .immersive__content { max-width: 100%; }
  .ai-widget { width: 100%; }
}

/* ---------- Sectores · grid de nicho (3 tarjetas con imagen) ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
}

.sector-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}
.sector-card--tall { grid-row: 1 / 3; min-height: 100%; }

.sector-card__media { position: absolute; inset: 0; z-index: -2; }
.sector-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.7s ease;
  filter: saturate(0.88) brightness(0.82);
}
.sector-card:hover .sector-card__media img,
.sector-card:focus-within .sector-card__media img { transform: scale(1.06); }

/* Cada tarjeta recibe un matiz de overlay ligeramente distinto — evita que las tres luzcan idénticas */
.sector-card__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(11, 12, 14, 0.92) 10%, rgba(11, 12, 14, 0.25) 70%, rgba(11, 12, 14, 0.35) 100%);
}
.sector-card--tall .sector-card__overlay {
  background: linear-gradient(0deg, rgba(11, 12, 14, 0.9) 15%, rgba(11, 12, 14, 0.15) 65%, rgba(45, 94, 126, 0.25) 100%);
}
.sector-grid .sector-card:nth-child(2) .sector-card__overlay {
  background: linear-gradient(0deg, rgba(11, 12, 14, 0.92) 20%, rgba(11, 12, 14, 0.2) 75%, rgba(61, 139, 255, 0.18) 100%);
}
.sector-grid .sector-card:nth-child(3) .sector-card__overlay {
  background: linear-gradient(0deg, rgba(11, 12, 14, 0.92) 20%, rgba(11, 12, 14, 0.3) 70%, transparent 100%);
}

.sector-card__content { padding: 1.4rem 1.4rem 1.5rem; }
.sector-card__tag {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-white);
  margin-bottom: 0.5rem;
}
.sector-card__content p {
  font-size: 0.9rem;
  color: var(--c-body);
  max-width: 32em;
}

@media (prefers-reduced-motion: reduce) {
  .sector-card__media img { transition: none; }
}

@media (max-width: 860px) {
  .sector-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .sector-card--tall { grid-row: auto; min-height: 280px; }
  .sector-card { min-height: 220px; }
}

/* ---------- Automatización WhatsApp (continuación del Hero) ---------- */
.floating-showcase { position: relative; }
.floating-showcase__copy .btn { margin-top: 2.4rem; }

/* Fundido: disuelve el límite entre el Hero y esta sección — mismo fondo, sin borde cortante */
.hero-to-whatsapp-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(0deg, transparent 0%, rgba(61, 139, 255, 0.05) 100%);
  pointer-events: none;
}

.floating-showcase__inner {
  position: relative;
  display: grid;
  /* minmax(0, 1fr) en vez de 1fr: sin el mínimo explícito, el ancho mínimo implícito de una
     columna de grid es "auto" (el ancho de su contenido). Con texto grande (ajustes de
     accesibilidad del navegador que amplían solo el rem, no el zoom completo) o gaps que
     crecen con rem, el phone-mock de la columna derecha empujaba la columna más allá del
     ancho disponible del .container y se desbordaba fuera del viewport. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.floating-showcase__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Como es un item de grid, su min-width implícito también es "auto" (ancho de contenido) —
     min-width:0 permite que se encoja de verdad si la columna del grid no tiene sitio. */
  min-width: 0;
}

.phone-mock {
  width: min(100%, 280px);
  aspect-ratio: 9 / 18.5;
  border-radius: 34px;
  background-color: var(--c-surface);
  border: 1px solid var(--card-border);
  /* Resplandor azulado propio, como si el teléfono emitiera luz */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 70px var(--glow), 0 0 130px rgba(61, 139, 255, 0.16);
  padding: 0.6rem;
  position: relative;
}
.phone-mock__notch {
  width: 40%;
  height: 18px;
  margin: 0 auto 0.4rem;
  border-radius: 0 0 12px 12px;
  background-color: var(--c-bg);
}
.phone-mock__screen {
  height: calc(100% - 26px);
  border-radius: 24px;
  background-color: var(--c-bg);
  padding: 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
}

.chat-bubble {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.chat-bubble--in {
  align-self: flex-start;
  background-color: var(--c-surface);
  border: 1px solid var(--card-border);
  color: var(--c-body);
  border-bottom-left-radius: 4px;
}
.chat-bubble--out {
  align-self: flex-end;
  background-color: var(--c-accent);
  color: var(--c-ink);
  font-weight: 500;
  border-bottom-right-radius: 4px;
}

/* ---------- IA en vivo: conversación animada dentro del phone-mock ---------- */
.chat-bubble {
  animation: bubble-in 0.35s ease-out;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-bubble__cursor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 1px;
  background-color: currentColor;
  vertical-align: -0.1em;
  animation: cursor-blink 0.8s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-indicator {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background-color: var(--c-surface);
  border: 1px solid var(--card-border);
  animation: bubble-in 0.35s ease-out;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-accent-readable);
  opacity: 0.5;
  animation: typing-bounce 1s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .typing-indicator { animation: none; }
  .chat-bubble__cursor { animation: none; }
}

/* Mini-CTA bajo el mockup, dentro de la misma columna visual */
.floating-showcase__mini-cta {
  margin-top: 2.6rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--c-body);
}
.floating-showcase__mini-cta a {
  display: inline-block;
  margin-left: 0.4rem;
  font-weight: 600;
  color: var(--c-accent-readable);
  text-decoration: none;
}
.floating-showcase__mini-cta a:hover { color: var(--c-white); }

/* El mockup "sale" del contenedor y flota, tal como el resto de tarjetas flotantes del sitio */
.status-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background-color: rgba(27, 29, 33, 0.6);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-white);
  white-space: nowrap;
  animation: float 5s ease-in-out infinite;
  animation-delay: 0.8s;
}
.status-badge--main {
  bottom: 6%;
  left: -6%;
}
.status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3DFF9C;
  box-shadow: 0 0 8px #3DFF9C;
}

/* Las dos etiquetas del hero, reubicadas aquí como indicadores de estado junto al móvil.
   Antes usaban right/left en % negativo puro, lo que las sacaba del viewport y las recortaba
   en anchos intermedios (más visible en Firefox por cómo calcula el 100% disponible con
   scrollbar) — clamp() limita cuánto pueden salir del contenedor en píxeles reales. */
.floating-showcase__visual .float-card--top-left {
  top: 6%;
  left: clamp(-24px, -8%, -8px);
  animation-delay: 0s;
}
.floating-showcase__visual .float-card--bottom-right {
  bottom: 24%;
  right: clamp(-24px, -10%, -8px);
  animation-delay: 2.2s;
}

@media (max-width: 980px) {
  .floating-showcase__inner { grid-template-columns: 1fr; }
  .floating-showcase__visual { margin-top: 1rem; }
}

@media (max-width: 720px) {
  /* En móvil el mockup vuelve al flujo normal: las 3 etiquetas se apilan debajo, sin solapes */
  .floating-showcase__visual { flex-direction: column; align-items: center; gap: 0.9rem; }
  .status-badge,
  .floating-showcase__visual .float-card {
    position: static;
    margin: 0 auto;
    animation: none;
  }
  .phone-mock { width: min(100%, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  .status-badge { animation: none; }
}

/* ---------- Grids y tarjetas ---------- */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: rgba(174, 210, 255, 0.4); transform: translateY(-3px); }
.card h3 { margin-bottom: 0.7rem; }
.card p { font-size: 0.97rem; }

.card__num {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-accent-readable);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 1rem;
}

.card--feature { display: grid; grid-template-rows: auto auto 1fr; }
.card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background-color: rgba(61, 139, 255, 0.16);
  border: 1px solid rgba(61, 139, 255, 0.35);
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 24px; height: 24px; fill: var(--c-accent-readable); }

/* ---------- Servicios (ofertas) ---------- */
.pricing { align-items: stretch; }

.offer {
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  position: relative;
}

.offer--featured {
  border-color: rgba(61, 139, 255, 0.55);
  box-shadow: 0 0 48px var(--glow);
  background-color: rgba(61, 139, 255, 0.08);
}

.offer__badge {
  position: absolute;
  top: -0.85rem;
  left: 1.7rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  background-color: var(--c-accent);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

.offer__tag {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent-readable);
  margin-bottom: 0.7rem;
}

.offer h3 { margin-bottom: 0.9rem; font-size: 1.35rem; }
.offer__desc { font-size: 0.96rem; margin-bottom: 1.2rem; }

.offer__list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  font-size: 0.93rem;
}
.offer__list li {
  padding-left: 1.5rem;
  position: relative;
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85em;
  height: 0.45em;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}

.offer__for {
  font-size: 0.88rem;
  color: var(--c-body);
  border-top: 1px solid var(--card-border);
  padding-top: 1rem;
  margin-bottom: 1.4rem;
}

.offer__cta { margin-top: auto; text-align: center; }

/* ---------- Proceso · timeline interactiva ---------- */
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.timeline__step { padding-top: 0.2rem; }

.timeline__node {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.3rem;
}

.timeline__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--c-white);
  background-color: var(--c-surface);
  border: 2px solid var(--card-border);
  z-index: 1;
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

/* Conductor: línea entre este nodo y el siguiente. Gris por defecto, se ilumina con el hover del paso */
.timeline__connector {
  flex: 1;
  height: 2px;
  margin-left: -2px;
  background-color: var(--card-border);
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

/* Hover en un paso: ilumina su propio círculo + el conector hacia el siguiente,
   y "empuja" el resplandor al círculo de llegada para que la energía se sienta continua */
.timeline__step:hover .timeline__num,
.timeline__step:focus-within .timeline__num {
  color: var(--c-ink);
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 6px var(--glow), 0 0 28px var(--c-accent);
  transform: scale(1.06);
}
.timeline__step:hover .timeline__connector,
.timeline__step:focus-within .timeline__connector {
  background-color: var(--c-accent);
  box-shadow: 0 0 12px var(--c-accent);
}
.timeline__step:hover + .timeline__step .timeline__num,
.timeline__step:focus-within + .timeline__step .timeline__num {
  border-color: var(--c-accent-hover);
  box-shadow: 0 0 16px var(--glow);
}

.timeline__content h3 { margin-bottom: 0.6rem; }
.timeline__content p { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .timeline__num, .timeline__connector { transition: none; }
}

/* ---------- Testimonios ---------- */
.quote {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
}
.quote blockquote p {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--c-white);
}
.quote figcaption { margin-top: 1.2rem; display: grid; gap: 0.1rem; }
.quote__name { font-family: var(--font-head); font-weight: 700; color: var(--c-white); }
.quote__role { font-size: 0.85rem; color: var(--c-accent-readable); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.8rem; }

.faq__item {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}

.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-white);
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid var(--c-accent-readable);
  border-bottom: 2px solid var(--c-accent-readable);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__item p { padding: 0 1.3rem 1.2rem; font-size: 0.97rem; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 1.1rem; }

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
}

.form__field { display: grid; gap: 0.35rem; }

.form__field label {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--c-accent-readable);
}

.form__field input,
.form__field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-white);
  background-color: var(--c-surface);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__field input::placeholder,
.form__field textarea::placeholder { color: rgba(234, 242, 247, 0.45); }
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--glow);
}
.form__field input.is-invalid,
.form__field textarea.is-invalid { border-color: #FF8A8A; }

.form__submit { justify-self: start; }

.form__status { min-height: 1.4em; font-weight: 600; color: var(--c-accent-readable); }
.form__status.is-error { color: #FFB4B4; }

.form__privacy { font-size: 0.8rem; opacity: 0.75; }

/* ---------- CTA final ---------- */
.finale {
  padding: clamp(4rem, 12vh, 7rem) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 90% at 50% 110%, rgba(61, 139, 255, 0.18), transparent),
    var(--c-bg-alt);
}
.finale h2 { max-width: 21em; margin-inline: auto; }
.finale p { max-width: 38em; margin: 1.3rem auto 2.2rem; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--card-border);
  padding: 2.8rem 0 5.5rem; /* hueco extra para el sticky CTA móvil */
}
.footer__inner {
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  text-align: center;
}
.footer__tagline { font-size: 0.92rem; opacity: 0.85; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }
.footer__nav a {
  font-size: 0.9rem;
  color: var(--c-body);
  text-decoration: none;
}
.footer__nav a:hover { color: var(--c-accent-readable); }
.footer__legal { font-size: 0.8rem; opacity: 0.6; }

/* ---------- Sticky CTA móvil ---------- */
.sticky-cta {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: none;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  color: var(--c-ink);
  background-color: var(--c-accent);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  box-shadow: 0 6px 30px var(--glow);
  transform: translateY(120%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }

/* ---------- Animaciones de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .sticky-cta { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .console { max-width: 100%; margin-left: 0; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .offer--featured { order: -1; }
  /* Timeline vertical: nodo en columna fija a la izquierda, contenido a la derecha */
  .timeline {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 0;
  }
  .timeline__step {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 1rem;
  }
  .timeline__node {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    align-self: stretch;
  }
  .timeline__connector {
    flex: 1;
    width: 2px;
    height: auto;
    min-height: 2.2rem;
    margin: 0;
  }
  .timeline__content { padding-bottom: 1.6rem; }
  .timeline__step:last-child .timeline__content { padding-bottom: 0; }
}

@media (max-width: 720px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--c-bg-alt);
    border-bottom: 1px solid var(--card-border);
    padding: 0.6rem 1.25rem 1.2rem;
    transform: translateY(-130%);
    transition: transform 0.25s ease;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 0.85rem 0.25rem; font-size: 1.05rem; }
  .nav__cta { margin-top: 0.6rem; text-align: center; }

  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; text-align: center; }
  .form__submit { justify-self: stretch; text-align: center; }
  .sticky-cta { display: block; }

  /* Hero en móvil: altura libre según contenido (texto + consola apilada no caben en 100vh
     fijo sin recortarse) — el degradado cubre toda la imagen para garantizar legibilidad */
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: calc(var(--header-h) + 2.5rem) 0 2.5rem;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(11, 12, 14, 0.9) 0%,
      rgba(11, 12, 14, 0.86) 60%,
      rgba(11, 12, 14, 0.94) 100%);
  }
  .hero__inner { grid-template-columns: 1fr; }
  .console { grid-template-columns: 1fr; max-width: 100%; margin-top: 2rem; }
}