/* ============================================================
   SLine IA — hoja de estilos
   Sistema de diseño: DESIGN.md ("Aurora glow over a midnight terminal")
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Colores */
  --color-void: #0b0c0e;
  --color-abyss: #0e111b;
  /* Base única de todo el sitio (body, secciones, CTA, footer y el final del
     hero): el azul marino del hero (#030636), más apagado. Cambiándola acá se
     mueve todo junto y no aparecen costuras. */
  --color-base: #070b27;
  --color-deep-sea: #0d172b;
  --color-cobalt-panel: #12244f;
  --color-frosted-lilac: #85a6e9;
  --color-signal-blue: #2862d7;
  --color-pulse-violet: #305fbd;
  --color-aurora-purple: #625fff;
  --color-plasma-pink: #ff7dda;
  --color-quartz: #ffffff;
  --color-ash: #abaebb;
  --color-mist: #c7c9d1;
  --color-slate: #3c3f44;
  --color-obsidian-edge: #172540;
  --color-inkline: #151e32;
  --color-sapphire-hairline: #24375a;

  /* Hero: navy + esmeralda, con terracota como único acento */
  --color-navy-deep: #070c18;
  --color-terracota: #e07d51;
  --color-terracota-oscuro: #c65f37;
  /* Verde esmeralda brillante (La solución: palabra destacada y números) */
  --color-emerald: #34d399;
  --color-arco-luz: #cfe6e1;
  --color-hero-top: #030636;
  /* Tono con el que termina el hero; .demo::before arranca con este mismo.
     Luz turquesa bajada ~45 % (antes #37646d) para que quede ambiental y oscura */
  --color-hero-bottom: #203a54;
  --color-code-comment: #8798c1;
  --color-code-string: #28b6ff;

  --gradient-aurora-purple: radial-gradient(79.43% 95.88% at 38.94% -53.46%, rgba(98, 95, 255, 0.38) 0px, rgba(0, 0, 0, 0));
  --gradient-plasma-pink: radial-gradient(27.99% 22.08% at 72.13% 103.46%, rgba(255, 125, 218, 0.33) 0px, rgba(0, 0, 0, 0));

  /* Tipografía */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 20px;
  --leading-subheading: 1.38;
  --tracking-subheading: -0.54px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.56px;
  --text-heading: 36px;
  --leading-heading: 1.13;
  --tracking-heading: -0.72px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -0.96px;
  --text-display: 64px;
  --leading-display: 1;
  --tracking-display: -1.28px;

  /* Espaciado y formas */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-36: 36px; --spacing-40: 40px; --spacing-64: 64px; --spacing-76: 76px;
  --spacing-80: 80px; --spacing-104: 104px; --spacing-160: 160px; --spacing-192: 192px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;

  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-md: rgba(0, 0, 0, 0.2) 0px 3px 16px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.5) 0px 4px 30px 0px;
  --shadow-xl-2: rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* El resto de la página repite el fondo del hero, más suave: el mismo azul
     marino (apagado) y la misma grilla de 96×80 px, casi transparente. La
     grilla arranca en el borde de la página igual que la del hero, así que sus
     líneas coinciden y se lee como una sola que sigue hacia abajo. */
  background-color: var(--color-base);
  background-image:
    linear-gradient(to right, rgba(150, 185, 205, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 185, 205, .035) 1px, transparent 1px);
  background-size: 96px 80px;
  color: var(--color-quartz);
  font-family: var(--font-inter);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-signal-blue);
  outline-offset: 3px;
  border-radius: var(--radius-lg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--spacing-8);
  z-index: 200;
  background: var(--color-quartz);
  color: #050606;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
}
.skip-link:focus { left: var(--spacing-16); }

/* ---------- Layout base ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}

.section { padding-block: var(--section-gap); position: relative; }

/* Atmósfera: sobre el fondo del body (azul marino + grilla), cada sección lleva
   una luz suave con los tonos de la luz del hero — verde azulado (#3f7078) a la
   izquierda en las impares, azul petróleo (#123049 / #2c5560) a la derecha en las
   pares. El elipse ocupa como mucho el 84 % del alto de la sección, así nunca
   toca el borde de arriba ni el de abajo y no quedan costuras entre secciones.
   Las luces fuertes quedan reservadas para el hero y el CTA final. */
.section {
  background: radial-gradient(ellipse 52% 42% at var(--glow-x, 6%) 50%,
              var(--glow, rgba(63, 112, 120, .20)), transparent);
}
.section:nth-of-type(even) {
  --glow-x: 94%;
  --glow: rgba(44, 85, 96, .24);
}
.section--tight { padding-block: 56px; }

/* Compensa la barra sticky al saltar por anclas */
section[id] { scroll-margin-top: 92px; }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ash);
  margin: 0 0 var(--spacing-16);
}

h1, h2, h3, h4 {
  font-family: var(--font-figtree);
  font-weight: 500;
  margin: 0;
}

.h-display {
  font-size: clamp(36px, 5.4vw, var(--text-display));
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}
.h-lg {
  font-size: clamp(30px, 4.4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.h-md {
  font-size: clamp(26px, 3.4vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.h-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.lead {
  font-family: var(--font-inter);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ash);
  margin: 0;
}

.section-head { max-width: 680px; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-quartz);
  color: #050606;
  border-color: #161618;
}
.btn--primary:hover { background: #e9eaee; }

.btn--ghost {
  background: transparent;
  border-color: #777a88;
  color: var(--color-quartz);
}
.btn--ghost:hover { border-color: var(--color-quartz); background: rgba(255,255,255,.04); }

.btn--accent {
  background: linear-gradient(90deg, #305fbd, #625fff);
  color: var(--color-quartz);
  font-size: 14px;
}
.btn--accent:hover { opacity: .9; }

/* Cápsula de cristal oscuro con borde en degradado violeta → azul.
   El fondo va por padding-box y el degradado por border-box: así el borde
   queda pintado con el degradado sin tapar el relleno. */
.btn--agenda {
  gap: 9px;
  color: var(--color-quartz);
  background:
    linear-gradient(rgba(6, 8, 14, .9), rgba(6, 8, 14, .9)) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 18px rgba(0, 102, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow .3s ease, transform .18s ease;
}
/* Al pasar el mouse sube el brillo del borde y crece el resplandor */
.btn--agenda:is(:hover, :focus-visible) {
  background:
    linear-gradient(rgba(6, 8, 14, .9), rgba(6, 8, 14, .9)) padding-box,
    linear-gradient(120deg, #9d68f5, #3d8bff) border-box;
  box-shadow: 0 0 30px rgba(0, 102, 255, .5), 0 0 10px rgba(124, 58, 237, .35);
}

.btn--sm { padding: 8px 16px; font-size: 14px; }
.btn--block { width: 100%; }

.btn .ico { width: 16px; height: 16px; flex: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  background: var(--color-deep-sea);
  border: 1px solid var(--color-obsidian-edge);
  color: var(--color-frosted-lilac);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 5px 13px;
  border-radius: var(--radius-full);
}
.badge--cobalt { background: var(--color-cobalt-panel); border-color: #1e2b48; }
.badge .dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-signal-blue);
  box-shadow: 0 0 0 3px rgba(40,98,215,.18);
  flex: none;
}

/* ---------- Navegación ---------- */
/* Fija y sin fondo: el hero corre por detrás y se ve el degradé.
   Va `fixed` en vez de `sticky` justamente para eso — si ocupara lugar en el
   flujo, detrás del navbar transparente se vería el fondo del body. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Recién al despegarse del hero aparece el fondo, para poder seguir navegando */
.nav.is-scrolled {
  background: rgba(7, 11, 39, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
}
/* Ocupa todo el ancho (no el de .wrap): el nombre queda pegado a la esquina
   superior izquierda y el botón a la derecha. Las tres columnas (1fr auto 1fr)
   dejan los links centrados de verdad, sin importar cuánto mida cada costado. */
.nav__inner {
  max-width: none;
  height: 72px;
  padding-inline: clamp(20px, 3.2vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-24);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
/* Arriba a la izquierda va sólo el nombre, sin monograma y más grande.
   El footer conserva el lockup completo (monograma + nombre). */
.nav .brand__name {
  font-size: clamp(21px, 2.1vw, 28px);
  letter-spacing: -0.045em;
}
/* "IA" con el mismo degradado violeta → azul del botón "Agendar Llamada": la
   barra abre y cierra con el mismo color */
.nav .brand__name span {
  background: linear-gradient(120deg, #a78bfa, #60a5fa);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 600;
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--font-figtree);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
  white-space: nowrap;
}
.brand__name span { color: var(--color-frosted-lilac); font-weight: 500; }

/* Links: Inter 500 con el tracking apenas cerrado, en un gris frío que pasa a
   blanco. El hover no enciende cada link por separado: una sola píldora
   (.nav__pill, la mueve main.js) se desliza de uno a otro siguiendo el cursor. */
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__links a {
  position: relative;
  z-index: 1;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.011em;
  color: rgba(214, 222, 240, .62);
  padding: 8px 15px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: color .25s ease;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--color-quartz); }
.nav__links a:focus-visible {
  color: var(--color-quartz);
  outline: 2px solid rgba(96, 165, 250, .7);
  outline-offset: 2px;
}
/* Sección en la que estás: una rayita neón debajo del link */
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 14px;
  height: 2px;
  margin-left: -7px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7C3AED, #0066FF);
  box-shadow: 0 0 8px rgba(0, 102, 255, .8);
}
.nav__pill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  pointer-events: none;
  transition:
    transform .38s cubic-bezier(.22, 1, .36, 1),
    width .38s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease;
}
.nav__pill.is-on { opacity: 1; }

.nav__cta { display: flex; align-items: center; gap: var(--spacing-8); justify-self: end; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-obsidian-edge);
  border-radius: var(--radius-lg);
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav__toggle svg { width: 18px; height: 18px; }

/* ---------- Aurora ---------- */
.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.aurora::before,
.aurora::after { content: ""; position: absolute; }

/* Resplandor violeta que sangra desde arriba (sólo se usa en el CTA final, el
   punto focal del cierre: por eso es bastante más intenso que la atmósfera de
   las secciones) */
.aurora::before {
  top: -35%; left: -15%; right: -15%; height: 125%;
  background: radial-gradient(58% 62% at 40% 40%, rgba(124, 58, 237, .30) 0%, rgba(124, 58, 237, 0) 72%);
}
/* Contrapunto azul desde abajo a la derecha */
.aurora::after {
  bottom: -30%; left: -15%; right: -15%; height: 95%;
  background: radial-gradient(46% 58% at 74% 68%, rgba(0, 102, 255, .24) 0%, rgba(0, 102, 255, 0) 70%);
}

/* ---------- Hero ---------- */
/* Estructura calcada de la referencia: grilla arriba, degradé vertical que se
   aclara hacia abajo y una cúpula gigante con el canto encendido. Los colores
   son los nuestros: navy y esmeralda, con terracota sólo en el botón. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: calc(100vh - 40px);
  padding: 160px var(--spacing-24) 0;
  text-align: center;
  /* Arriba, donde va la grilla, un azul marino oscuro parejo. Recién debajo
     del CTA arranca el degradé que se abre hacia la luz. La luz llega encendida
     hasta el borde inferior: el cierre hacia el azul de la página lo hace
     .demo::before, por debajo del pliegue, así las esquinas inferiores de la
     pantalla quedan iluminadas y no asoma la grilla del body. (Sin esquinas
     redondeadas abajo por lo mismo: dejarían ver la grilla en las puntas.) */
  background: linear-gradient(
    to bottom,
    var(--color-hero-top) 0%,
    var(--color-hero-top) 35%,
    #0b1d40 57%,
    #1a314d 73%,
    #24405a 84%,
    var(--color-hero-bottom) 100%
  );
}

/* Grilla: 600 px de alto, desvanecida con máscara elíptica desde arriba */
.hero__grid {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 600px;
  z-index: 0;
  opacity: .8;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(150, 185, 205, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 185, 205, .09) 1px, transparent 1px);
  background-size: 96px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
          mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

/* Linterna: copia más brillante de la grilla, recortada a un círculo que sigue
   al cursor. Las líneas caen justo sobre las de .hero__grid (mismo origen y
   mismo paso), así que no se ve una segunda grilla: se ve la misma encendida.
   Sólo aparece en equipos con puntero real; lo enciende main.js. */
.hero__luz {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  background-image:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .14), transparent 62%),
    linear-gradient(to right, rgba(165, 200, 255, .30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(165, 200, 255, .30) 1px, transparent 1px);
  background-size: auto, 96px 80px, 96px 80px;
  /* Dos máscaras que se cruzan (`intersect`): el círculo del cursor y un
     desvanecido vertical. El segundo apaga la luz antes de que el fondo se
     ponga claro — una luz no se ve sobre un fondo casi blanco. */
  -webkit-mask-image:
    radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .38) 48%, transparent 72%),
    linear-gradient(to bottom, #000 0%, #000 58%, transparent 80%);
          mask-image:
    radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .38) 48%, transparent 72%),
    linear-gradient(to bottom, #000 0%, #000 58%, transparent 80%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero.con-cursor .hero__luz { opacity: 1; }


.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Titular gigante, blanco que se apaga hacia gris */
.hero h1 {
  padding-block: var(--spacing-24);
  font-size: clamp(44px, 7.2vw, 96px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
  background: linear-gradient(to bottom right, #ffffff 30%, rgba(255, 255, 255, .4));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__sub {
  margin: 0 0 var(--spacing-40);
  max-width: 74ch;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-ash);
}
.hero__sub b { font-weight: 500; color: var(--color-mist); }

.hero__actions { margin-top: -20px; }

/* ---------- CTA del hero: borde con degradado giratorio ---------- */
@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  /* Relleno: degradado violeta → azul */
  --shiny-cta-bg-a: #7C3AED;
  --shiny-cta-bg-b: #0066FF;
  --shiny-cta-bg-subtle: #4b2fd4;
  --shiny-cta-fg: #ffffff;
  /* Highlight del borde giratorio y del brillo del hover, en la misma familia */
  --shiny-cta-highlight: #9BB8FF;
  --shiny-cta-highlight-subtle: #cddaff;
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1rem 2.2rem;
  /* Adaptado: acá es un <a>, no un <button>, así que necesita display propio */
  display: inline-block;
  text-align: center;
  font-family: var(--font-inter);
  font-size: 1.05rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--shiny-cta-fg);
  background: linear-gradient(135deg, var(--shiny-cta-bg-a), var(--shiny-cta-bg-b)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    0 0 30px rgba(0, 102, 255, .45);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}

.shiny-cta:active {
  translate: 0 1px;
}

/* Textura de puntos, revelada por una máscara que gira */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at var(--position) var(--position),
    white calc(var(--position) / 4),
    transparent 0
  ) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.25;
  z-index: -1;
}

/* Barrido de luz */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.4;
}

.shiny-cta span { z-index: 1; }

/* Brillo que respira detrás del texto, sólo visible al hover */
.shiny-cta span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
}

.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}

.shiny-cta:is(:hover, :focus-visible) span::before {
  opacity: 1;
}

/* Prueba de color (sólo el botón del hero): cuerpo oscuro casi negro que
   "brilla" en azul eléctrico / índigo: el borde giratorio y el barrido en
   azul eléctrico, y un halo índigo alrededor que crece al pasar el mouse.
   Si queda, se pasa a todos los .shiny-cta moviendo esto a la regla de arriba. */
.hero__actions .shiny-cta {
  --shiny-cta-bg-a: #0c0e22;
  --shiny-cta-bg-b: #05060e;
  --shiny-cta-bg-subtle: rgba(129, 140, 248, .3);
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: #3d4cff;
  --shiny-cta-highlight-subtle: #8b93ff;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    0 8px 40px rgba(129, 140, 248, .3);
}
.hero__actions .shiny-cta:is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle),
    0 0 44px 8px rgba(129, 140, 248, .38);
}
.hero__actions .shiny-cta::after { opacity: .55; }

@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
@keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

/* Agregado para el sitio: el borde y el brillo se quedan quietos si el
   visitante pidió menos movimiento. El botón se sigue viendo igual. */
@media (prefers-reduced-motion: reduce) {
  .shiny-cta,
  .shiny-cta::before,
  .shiny-cta::after,
  .shiny-cta span::before {
    animation: none;
  }
}

/* Espacio muerto del final, igual que en la referencia */
.hero__cola { height: 128px; }

/* Entrada escalonada del contenido */
@keyframes entrada {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; }
}
.hero__inner > *:not(.hero__cola) {
  opacity: 0;
  animation: entrada .85s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero__inner > *:nth-child(1) { animation-delay: .05s; }
.hero__inner > *:nth-child(2) { animation-delay: .17s; }
.hero__inner > *:nth-child(3) { animation-delay: .29s; }

/* ---------- Titular del hero: "Responde rápido. Decide despacio." ----------
   Una línea por color y por ritmo: arriba blanco, entra de golpe (0,4 s, con
   envión de costado); abajo el degradé violeta → azul de la marca, se revela
   despacio de izquierda a derecha mientras se enfoca (~1,9 s). */
.hero h1.hero__titulo {
  background: none;
  color: #ffffff;
}
.hero__linea { display: block; }
.hero__linea--rapida {
  animation: lineaRapida .4s cubic-bezier(.2, .9, .25, 1) .45s both;
}
@keyframes lineaRapida {
  from { opacity: 0; transform: translateX(-.35em) skewX(-12deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero__linea--lenta {
  width: fit-content;
  margin-inline: auto;
  /* aire para que el degradé cubra la cola de las letras y el punto final
     (el espaciado negativo los deja apenas afuera de la caja) */
  padding: 0 .12em .08em;
  margin-bottom: -.08em;
  background: linear-gradient(90deg, #a78bfa, #6366f1 50%, #3b82f6);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: lineaLenta 1.9s cubic-bezier(.45, 0, .2, 1) 1s both;
}
@keyframes lineaLenta {
  from { clip-path: inset(-10% 100% -10% -5%); filter: blur(5px); }
  to   { clip-path: inset(-10% -5% -10% -5%); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__linea--rapida,
  .hero__linea--lenta { animation: none; }
}

@media (min-width: 768px) {
  .hero__sub { font-size: 20px; }
}
@media (min-width: 1024px) {
}

/* El resplandor del CTA final se apaga antes del footer. Va como máscara sobre
   la aurora (y no como una capa del color de fondo encima) para que la grilla
   de la página siga visible por debajo, sin una franja lisa. */
.cta .aurora {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
}

/* ---------- Demo: simulador de tiempo y costo ---------- */
/* El panel se monta sobre el final del hero: su techo neón asoma antes de
   scrollear y funciona como pista visual para invitar a bajar. */
.demo {
  --solape: 40px;              /* cuánto se monta el panel sobre el hero (asomo ≈ 80 px) */
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--solape));
  /* En escritorio el panel sube hasta --subir-max px por encima de su lugar
     (main.js): este margen negativo cierra el hueco que eso deja abajo */
  margin-bottom: calc(-1 * var(--subir-max, 0px));
  padding-bottom: var(--section-gap);
  overflow-x: clip;   /* por las dudas: nada del escenario genera scroll horizontal */
}
/* Continuación de la luz del hero: arranca justo en el borde inferior del hero
   con su mismo color y se apaga hacia el azul de la página en 280 px. Va detrás
   del panel (z-index -1 dentro del contexto de .demo), así a los costados del
   asomo se ve luz y no la grilla del body; la grilla recién reaparece a medida
   que la luz se apaga. */
.demo::before {
  content: "";
  position: absolute;
  top: var(--solape);
  left: 0;
  right: 0;
  height: 280px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--color-hero-bottom), rgba(7, 11, 39, 0));
}
/* Contenedor del marco. En celular (y sin JS) el marco ocupa este ancho, con
   tope de 1200 px. En escritorio main.js le agrega a .demo la clase
   .demo--escena: el marco pasa a un ancho de diseño apaisado y se "aleja" con
   zoom lo justo para entrar completo en la pantalla (ver abajo). Va como
   .wrap.wrap--demo para que el padding de .wrap en celular no le coma 20 px
   por lado al marco. */
.wrap.wrap--demo {
  max-width: min(92vw, 1200px);
  padding-inline: 0;
}

/* ---------- Escena de escritorio: marco apaisado, alejado y que sube ---------- */
.demo--escena .wrap--demo {
  max-width: none;
  display: flex;
  justify-content: center;
  /* Subida: main.js la lleva de 0 a --subir-max a medida que scrolleás, y el
     panel se desliza hacia arriba por encima del final del hero */
  transform: translateY(calc(-1 * var(--subida, 0px)));
  will-change: transform;
}
/* Suaviza cada paso de la rueda del mouse. Se enciende después del primer
   cálculo (main.js) para que al cargar el panel no se anime desde otro lugar. */
.demo--escena.demo--viva .wrap--demo { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.demo--escena .demo__ventana {
  flex: none;
  width: 1600px;          /* ancho de diseño: forma apaisada */
  zoom: var(--zoom, 1);   /* main.js lo calcula para que entre completo en la pantalla */
}

/* ---------- Escena fija: la página se queda quieta y sólo sube el panel ----------
   main.js le pone .escena--fija a #escena (hero + simulador) en escritorio y le
   da un alto de varias pantallas. Mientras se recorre ese alto, .escena__fija
   queda pegada arriba (sticky) y lo único que se mueve es el panel. */
.escena--fija .escena__fija {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.escena--fija .hero { min-height: 100%; height: 100%; }
.escena--fija .demo {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 50px);   /* el asomo: igual a ASOMO en main.js */
  margin: 0;
  padding: 0;
}
/* Con el hero a pantalla completa, su luz ya llega hasta abajo */
.escena--fija .demo::before { display: none; }
/* El texto del hero se apaga (sin moverse) a medida que el panel lo tapa: el
   panel es más angosto que el titular y, si no, asomarían letras cortadas a los
   costados. --tapa va de 0 a 1 con la subida (main.js): a mitad de camino ya
   no se ve nada, así no queda ninguna letra suelta a los lados del panel. */
.escena--fija .hero__inner {
  opacity: max(0, calc(1 - 2.2 * var(--tapa, 0)));
  transition: opacity .3s ease-out;
}

/* Marco tipo ventana de escritorio. Estética limpia ("premium = sin saturar"):
   grafito neutro y liso, superficies apenas más claras, bordes finos y nada de
   degradés ni resplandores adentro. El color se reserva para lo importante:
   rojo = lo que se pierde, verde = lo que se gana (tokens --d-*). */
.demo__ventana {
  /* Fondo y superficies semitransparentes: el panel toma apenas el tono de la
     luz de atrás y queda integrado. Sin backdrop-filter a propósito: el panel
     se mueve con el scroll y el desenfoque lo haría ir a los saltos. */
  --d-fondo: rgba(12, 14, 19, .8);    /* grafito translúcido; la luz de lámpara la pone .demo__cuerpo::before */
  --d-superficie: rgba(255, 255, 255, .03); /* tarjetas, controles y franja anual */
  --d-borde: rgba(255, 255, 255, .07);
  --d-rojo: #ef5b5b;                  /* lo que se pierde */
  --d-verde: #17a673;                 /* lo que se gana (verde oscuro, sin tono menta) */
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--d-fondo);
  /* Sin sombra negra grande hacia abajo: con el hero fijo se recortaba en el
     borde de la pantalla y dejaba una franja oscura. Queda el resplandor azul
     de arriba y una sombra de contacto mínima. */
  box-shadow:
    0 -12px 50px rgba(0, 102, 255, .12),
    0 2px 10px rgba(0, 0, 0, .25);
}

/* Filo del techo: la pista visual que invita a bajar (con brillo contenido) */
.demo__ventana::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  z-index: 2;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #7C3AED 22%, #0066FF 78%, transparent);
  box-shadow: 0 0 14px 1px rgba(0, 102, 255, .35);
}

/* Barra de título limpia: sin botones ni íconos, sólo el nombre centrado.
   Es decorativa (aria-hidden). */
.demo__titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--spacing-20);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .018);
}
.demo__ruta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(171, 174, 187, .5);
}

/* Cuerpo del marco: sin alto fijo ni 16:9. El marco crece hacia abajo con el
   contenido y el padding vertical generoso (py-20) le da aire. */
.demo__cuerpo {
  position: relative;
  isolation: isolate;
  overflow: hidden;       /* recorta el difuminado de la luz en los bordes */
  padding: 52px 64px 44px;
}
/* Luz de lámpara: sale de arriba al centro (justo debajo de la barra) y cae
   hacia abajo como un cono que se abre, suave y difuminado. Se apaga antes de
   las tarjetas, así lo que queda iluminado es el encabezado y el texto
   principal gana protagonismo. Es sólo luz blanca a baja intensidad.
   - Más fuerte o más suave: los alfa (.075 / .12).
   - Más abierta o más cerrada: el cono va de 152deg a 208deg (±28° desde abajo).
   - Hasta dónde llega: el segundo valor de la máscara (92 %). */
.demo__cuerpo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 680px;
  z-index: -1;
  pointer-events: none;
  background:
    /* el foco de la lámpara, pegado al borde de arriba */
    radial-gradient(ellipse 20% 12% at 50% 0%, rgba(255, 255, 255, .12), transparent 70%),
    /* el haz: el vértice queda por encima del panel, así arriba ya tiene
       ancho de "boca de lámpara" y se abre hacia abajo */
    conic-gradient(from 152deg at 50% -60%,
      transparent 0deg,
      rgba(255, 255, 255, .02) 6deg,
      rgba(255, 255, 255, .06) 16deg,
      rgba(255, 255, 255, .075) 28deg,
      rgba(255, 255, 255, .06) 40deg,
      rgba(255, 255, 255, .02) 50deg,
      transparent 56deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 35%, transparent 92%);
  filter: blur(24px);
}

/* Encabezado narrativo, centrado */
.demo__head {
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
}
/* Etiqueta sobria: borde fino neutro, sin degradé ni brillo */
.demo__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #b9bdc8;
}
.demo__head h2 {
  margin-top: var(--spacing-16);
  text-wrap: balance;
}
.demo__head p {
  max-width: 56rem;          /* en 2 líneas en vez de 3: el panel entra completo en pantalla */
  margin: var(--spacing-12) auto 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: #94a3b8;            /* slate-400 */
}

/* ---------- Controles ---------- */
/* Centrados y acotados: a todo el ancho del marco el riel del slider quedaría
   desproporcionado. */
.demo__controles {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-24) var(--spacing-40);
  align-items: center;
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 22px var(--spacing-28);
  border: 1px solid var(--d-borde);
  border-radius: var(--radius-xl);
  background: var(--d-superficie);
}

/* Comparativa: dos tarjetas lado a lado, anchas y con aire */
.demo__comparativa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin-top: var(--spacing-24);
}

/* Pie: la franja anual, a todo el ancho (el botón de la demo se sacó) */
.demo__pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-20);
  align-items: stretch;
  margin-top: var(--spacing-20);
}
.demo__ctrl { min-width: 0; }
.demo__ctrl > label,
.demo__etiqueta {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--color-mist);
}

/* Selector [-] valor [+] */
.demo__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .03);
}
.demo__stepper button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .07);
  color: var(--color-quartz);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease;
}
.demo__stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.demo__stepper button:disabled { opacity: .32; cursor: not-allowed; }
.demo__stepper output {
  min-width: 42px;
  text-align: center;
  font-family: var(--font-figtree);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-quartz);
}

/* Slider: blanco y neutro, sin degradé ni resplandor */
.demo__slider-fila { display: flex; align-items: center; gap: var(--spacing-16); }
.demo__rango {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: var(--radius-full);
  background:
    linear-gradient(#e9ebf0, #e9ebf0) 0 / var(--relleno, 10%) 100% no-repeat,
    rgba(255, 255, 255, .1);
  cursor: pointer;
}
.demo__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.demo__rango::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.demo__valor {
  min-width: 74px;
  text-align: right;
  font-family: var(--font-figtree);
  font-size: 19px;
  font-weight: 600;
  color: var(--color-quartz);
  white-space: nowrap;
}

/* ---------- Comparativa ---------- */
/* Las dos tarjetas son la misma superficie neutra, sin degradés ni brillos. El
   color va sólo en lo importante: la plata, el porcentaje y la barra. */
.demo__col {
  position: relative;
  padding: 26px 30px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--d-borde);
  background: var(--d-superficie);
}
/* Filo de luz de 1 px en el borde superior de controles y franja anual:
   detalle de material, sin color */
.demo__controles,
.demo__anual { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); }

/* Contorno de cada tarjeta en su color: borde fino teñido y, arriba, un filo
   que se enciende al centro y se apaga hacia las puntas (como el techo del
   panel). Sin resplandor, para que siga limpio. */
.demo__col--sin { --d-acento: var(--d-rojo);  border-color: rgba(239, 91, 91, .3); }
.demo__col--con { --d-acento: var(--d-verde); border-color: rgba(23, 166, 115, .4); }
.demo__col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--d-acento), transparent);
  pointer-events: none;
}
/* Títulos con más cuerpo (Figtree semibold, antes Inter fino); el ícono lleva el color */
.demo__col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-figtree);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-quartz);
  margin-bottom: var(--spacing-16);
}
.demo__col h3 svg { flex: none; }
.demo__col--sin h3 svg { color: var(--d-rojo); }
.demo__col--con h3 svg { color: var(--d-verde); }

.demo__cifra {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-quartz);
}
.demo__cifra span { font-size: .5em; font-weight: 500; letter-spacing: -0.01em; color: #c9ccd6; }
/* El número de horas, en el color de su tarjeta (la unidad queda en blanco suave) */
.demo__col--sin .demo__cifra { color: var(--d-rojo); }
.demo__col--con .demo__cifra { color: var(--d-verde); }
/* La aclaración debajo de las horas: un poco más grande y con más cuerpo */
.demo__nota {
  margin: 10px 0 0;
  font-size: 14.5px;
  font-weight: 400;
  color: #b3b7c2;
}
/* Plata por mes: el monto resalta en el color de su tarjeta; el resto de la
   frase queda en gris */
.demo__costo {
  margin: var(--spacing-12) 0 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ash);
}
.demo__costo output,
.demo__costo b {
  font-family: var(--font-figtree);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.demo__col--sin .demo__costo output { color: var(--d-rojo); }
.demo__col--con .demo__costo b { color: var(--d-verde); }

/* Barra de carga operativa: cuánto de la jornada se va en chatear */
.demo__barra { margin-top: 18px; }
.demo__barra-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-12);
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--color-ash);
}
.demo__barra-cab output { font-size: 14px; font-weight: 600; color: var(--color-quartz); }
/* Las horas por persona van dentro de la etiqueta: mismo tamaño que el texto */
.demo__barra-cab span output { font-size: inherit; }
/* El porcentaje, en el color de su tarjeta */
.demo__col--sin .demo__barra-cab > output { color: var(--d-rojo); }
.demo__col--con .demo__barra-cab > output { color: var(--d-verde); }
/* Aparece sólo cuando la carga por persona pasa de una jornada completa */
.demo__barra-aviso {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--d-rojo);
}
.demo__barra-riel {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.demo__barra-relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
/* Relleno liso, sin degradé ni resplandor */
.demo__col--sin .demo__barra-relleno { background: var(--d-rojo); }
.demo__col--con .demo__barra-relleno { background: var(--d-verde); }

.demo__lista {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--d-borde);
}
.demo__lista li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-mist);
}
/* Íconos de las listas en el color de su tarjeta */
.demo__lista svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }
.demo__col--sin .demo__lista svg { color: var(--d-rojo); }
.demo__col--con .demo__lista svg { color: var(--d-verde); }

/* Franja de impacto anual: la misma superficie neutra, sin degradé; resalta
   sólo el monto, en rojo */
.demo__anual {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: 22px 28px;
  border: 1px solid var(--d-borde);
  border-radius: var(--radius-xl);
  background: var(--d-superficie);
}
.demo__anual svg { width: 24px; height: 24px; flex: none; color: var(--d-rojo); }
.demo__anual p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-mist);
}
.demo__anual b { font-weight: 600; color: var(--color-quartz); }
.demo__anual output {
  font-family: var(--font-figtree);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--d-rojo);
}

/* Los supuestos a la vista: el número es una proyección, no una promesa */
/* 15 px: en escritorio el panel se ve con zoom (~0,75), así que en pantalla
   queda en ~11 px, legible. En celular (sin zoom) baja a 13,5 px. */
.demo__supuestos {
  max-width: 64rem;
  margin: 16px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(171, 174, 187, .9);
}

/* ---------- CTA ---------- */
.demo__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  /* En el pie va al lado de la franja anual, no como bloque de ancho completo */
  min-width: 320px;
  padding: 17px var(--spacing-32);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #7C3AED, #0066FF);
  color: var(--color-quartz);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  /* Para que el reflejo (::after) quede por encima del degradé pero debajo del texto */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Es la acción principal: conserva el degradé de marca, con brillo contenido.
     El filo interior de 1 px arriba le da terminación de material. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 8px 24px rgba(0, 102, 255, .22);
  transition: box-shadow .3s ease, transform .18s ease;
}
/* Animación: un reflejo de luz cruza el botón cada ~5 s, suave, como sobre un
   vidrio. Se mueve sólo con transform (no fuerza repintados). Para que pase
   más seguido o más espaciado, cambiá la duración (5s); el reflejo ocupa el
   último 35 % de cada ciclo, el resto del tiempo el botón queda quieto. */
.demo__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: translateX(-130%) skewX(-18deg);
  animation: ctaReflejo 5s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes ctaReflejo {
  0%, 65% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(300%) skewX(-18deg); }
}
.demo__cta svg { flex: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.demo__cta:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 12px 32px rgba(0, 102, 255, .34);
  transform: translateY(-2px);
}
/* Al pasar el mouse, la flecha se corre: invita a hacer clic */
.demo__cta:is(:hover, :focus-visible) svg { transform: translateX(4px); }
.demo__cta:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
.demo__cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .demo__cta::after { animation: none; display: none; }
  .demo__cta svg { transition: none; }
}


@media (min-width: 901px) {
  /* Escritorio: py-16 px-12 */
}

@media (max-width: 900px) {
  .demo { --solape: 30px; }
  /* Móvil: py-12 px-8 */
  .demo__cuerpo { padding: 48px 22px 44px; }
  .demo__titlebar { height: 40px; padding-inline: var(--spacing-16); }
  .demo__ruta { display: none; }
  .demo__comparativa { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-28); }
  .demo__pie { grid-template-columns: minmax(0, 1fr); }
  .demo__anual { flex-direction: column; text-align: center; gap: var(--spacing-12); padding: var(--spacing-20); }
  .demo__controles { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-20); margin-top: var(--spacing-32); }
  .demo__cta { font-size: 16px; padding: 15px var(--spacing-16); width: 100%; }
  .demo__supuestos { font-size: 13.5px; }
}

/* ---------- Grillas de tarjetas ---------- */
.grid { display: grid; gap: var(--spacing-16); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--color-deep-sea);
  border: 1px solid var(--color-obsidian-edge);
  border-radius: var(--radius-full);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  border-color: var(--color-sapphire-hairline);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-abyss);
  border: 1px solid var(--color-inkline);
  color: var(--color-signal-blue);
  flex: none;
}
.card__icon svg { width: 20px; height: 20px; }
.card h3 {
  font-family: var(--font-inter);
  font-size: var(--text-subheading);
  font-weight: 500;
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-quartz);
}
.card p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-mist);
}
.card__head { display: flex; align-items: center; gap: var(--spacing-12); flex-wrap: wrap; }
.card__head .badge { margin-left: auto; }

.checklist { display: grid; gap: 7px; margin-top: auto; padding-top: var(--spacing-4); }
.checklist li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-mist);
}
.checklist svg { width: 16px; height: 16px; flex: none; color: var(--color-code-comment); margin-top: 2px; }

/* Tarjetas compactas de "dolores" */
.card--compact { gap: var(--spacing-8); }
.card--compact h3 { font-size: 16px; letter-spacing: -0.32px; }
.card--compact p { font-size: 14px; }

/* ---------- Cómo trabajamos: línea de tiempo ----------
   4 pasos en fila unidos por una línea fina en degradé violeta → azul, con una
   luz suave que la recorre. Cada paso: nodo circular con el número y, debajo,
   una tarjeta de cristal (fase en mono, título bold, descripción). Tablet:
   2 × 2 sin línea. Celular: línea de tiempo vertical. */
.proceso {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
/* La línea: une los centros del primer y el último nodo */
.proceso::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .6), rgba(0, 102, 255, .6));
  opacity: .55;
}

.proceso__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.proceso__nodo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0f22, #0b0f22) padding-box,
    linear-gradient(135deg, #7C3AED, #0066FF) border-box;
  /* el anillo del color de fondo "corta" la línea alrededor del nodo */
  box-shadow: 0 0 0 7px var(--color-base), 0 0 26px rgba(0, 102, 255, .25);
  font-family: var(--font-ibm-plex-mono);
  font-size: 16px;
  font-weight: 600;
  color: #e5e7eb;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.proceso__card {
  flex: 1;
  width: 100%;
  margin-top: 26px;
  padding: 26px 24px 28px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease, box-shadow .35s ease;
}
.proceso__fase {
  margin: 0 0 10px;
  font-family: var(--font-ibm-plex-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a5b4fc;
}
.proceso__card h3 {
  margin: 0 0 10px;
  font-family: var(--font-figtree);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
}
.proceso__card p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c7cbd6;
}
.proceso__paso:hover .proceso__card {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .35);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .35);
}
.proceso__paso:hover .proceso__nodo {
  transform: scale(1.07);
  box-shadow: 0 0 0 7px var(--color-base), 0 0 36px rgba(124, 58, 237, .55);
}

/* Modelo comercial: franja centrada */
.proceso__nota {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 880px;
  margin: 44px auto 0;
  padding: 18px 26px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  font-size: 15px;
  line-height: 1.55;
  color: #c7cbd6;
}
.proceso__nota svg { width: 22px; height: 22px; flex: none; color: #a5b4fc; }
.proceso__nota b { font-weight: 600; color: var(--color-quartz); }

/* Tablet: 2 × 2, sin la línea */
@media (max-width: 1000px) {
  .proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .proceso::before { display: none; }
}
/* Celular: línea de tiempo vertical, nodos a la izquierda */
@media (max-width: 700px) {
  .proceso { grid-template-columns: minmax(0, 1fr); row-gap: 20px; margin-top: 44px; }
  .proceso::before {
    display: block;
    top: 24px;
    bottom: 24px;
    left: 23px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(124, 58, 237, .6), rgba(0, 102, 255, .6));
  }
  .proceso__paso { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; }
  .proceso__nodo { width: 48px; height: 48px; font-size: 14px; }
  .proceso__card { margin-top: 0; padding: 20px 20px 22px; }
  .proceso__card h3 { font-size: 20px; }
  .proceso__nota { align-items: flex-start; padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .proceso__card,
  .proceso__nodo { transition: none; }
  .proceso__paso:hover .proceso__card,
  .proceso__paso:hover .proceso__nodo { transform: none; }
}

/* ---------- Panel destacado ---------- */
.spotlight {
  background: var(--color-cobalt-panel);
  border: 1px solid #1e2b48;
  border-radius: var(--radius-full);
  padding: var(--spacing-40);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: center;
}
.spotlight .lead { color: #c3ceea; }
.spotlight h2 { margin-bottom: var(--spacing-16); }
.spotlight .eyebrow { color: var(--color-frosted-lilac); }

.spotlight__list { display: grid; gap: var(--spacing-12); }
.spotlight__list li {
  background: rgba(11, 15, 30, .45);
  border: 1px solid rgba(133, 166, 233, .16);
  border-radius: var(--radius-lg);
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: #dbe2f2;
}
.spotlight__list b { font-weight: 500; color: var(--color-quartz); }

.note {

  display: flex;
  gap: var(--spacing-12);
  padding: var(--spacing-16);
  background: var(--color-deep-sea);
  border: 1px solid var(--color-obsidian-edge);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-mist);
}
.note svg { width: 18px; height: 18px; flex: none; color: var(--color-frosted-lilac); margin-top: 2px; }
.note b { font-weight: 500; color: var(--color-quartz); }

/* ---------- FAQ: encabezado fijo + acordeón ----------
   Izquierda: encabezado con botón "Hacer otra pregunta", fijo al bajar.
   Derecha: preguntas en lista separada por líneas finas; número en mono,
   pregunta en grande y un botón circular "+" que gira a "×" al abrir. La
   respuesta aparece con un fundido suave. Tablet/celular: una columna. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: start;
}
.faq-intro { max-width: none; }

.faq { margin: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid rgba(165, 180, 252, .7); outline-offset: 4px; border-radius: 8px; }
.faq__num {
  flex: none;
  width: 28px;
  font-family: var(--font-ibm-plex-mono);
  font-size: 14px;
  color: #a5b4fc;
}
.faq__q {
  flex: 1;
  font-family: var(--font-figtree);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #e5e7eb;
  transition: color .2s ease;
}
.faq summary:hover .faq__q,
.faq details[open] .faq__q { color: var(--color-quartz); }
/* Botón circular con "+" que gira a "×" */
.faq__icono {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, border-color .3s ease;
}
.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 2px;
  background: #e5e7eb;
}
.faq__icono::after { transform: rotate(90deg); }
.faq summary:hover .faq__icono { border-color: rgba(165, 180, 252, .6); }
.faq details[open] .faq__icono {
  transform: rotate(45deg);
  border-color: transparent;
  background: linear-gradient(135deg, #7C3AED, #0066FF);
}
.faq .faq__body {
  max-width: 64ch;
  padding: 0 54px 28px 46px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #c7cbd6;
}
.faq details[open] .faq__body { animation: faqAbre .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes faqAbre { from { opacity: 0; transform: translateY(-6px); } }
.faq .faq__body p { margin: 0; }
.faq .faq__body p + p { margin-top: var(--spacing-12); }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .faq summary { gap: 14px; padding: 20px 0; }
  .faq__q { font-size: 18px; }
  .faq__icono { width: 32px; height: 32px; }
  .faq .faq__body { padding: 0 0 22px 42px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__icono { transition: none; }
  .faq details[open] .faq__body { animation: none; }
}

/* ---------- CTA final ---------- */
/* Punto focal del cierre: mismo fondo que el resto del sitio (se ve la grilla
   del body), pero acá las luces suben de intensidad (aurora violeta + azul) y
   el techo lleva el mismo filo neón que el panel del simulador. */
.cta {
  position: relative;
  background: none;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, #7C3AED 25%, #0066FF 75%, transparent);
  box-shadow: 0 0 20px 2px rgba(0, 102, 255, .45), 0 0 50px 8px rgba(124, 58, 237, .22);
}
.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1100px;
  margin-inline: auto;
}
.cta__inner > * + * { margin-top: var(--spacing-24); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); justify-content: center; }
/* Cierre: titular gigante en dos líneas (la segunda con el degradé de marca)
   y un solo botón, el mismo "shiny" del hero. */
.cta__titulo {
  font-size: clamp(40px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: #ffffff;
}
/* Cierre de servicios: titular más contenido (frases más largas), bajada y
   una fila de tres datos con íconos */
.cta__titulo--compacto { font-size: clamp(32px, 4.8vw, 66px); }
.cta__bajada {
  max-width: 56ch;
  margin-inline: auto;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ash);
}
.cta--srv .cta__actions { margin-top: var(--spacing-32); align-items: center; }
.cta__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.cta__datos li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: #c7cbd6;
}
.cta__datos svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta__titulo span {
  background: linear-gradient(90deg, #c4b5fd, #93c5fd);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.cta__inner > .cta__actions { margin-top: var(--spacing-40); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-inkline);
  padding-block: var(--spacing-64) var(--spacing-32);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: var(--spacing-40);
}
.footer__about { max-width: 40ch; }
.footer__about p {
  margin: var(--spacing-16) 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-ash);
}
.footer h4 {
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ash);
  margin-bottom: var(--spacing-16);
}
.footer__col li + li { margin-top: 10px; }
.footer__col a {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-mist);
  transition: color .15s ease;
}
.footer__col a:hover { color: var(--color-quartz); }

.footer__bottom {
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-inkline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-ash);
}

/* ============================================================
   Tarjetas tipo ventana (bento): El problema, La solución,
   Antes y después, Misión/Visión, la página de servicios y el
   modal "Hablemos". Misma estética que el simulador: cristal
   oscuro #06080e, bordes sutiles y transparencias.
   ============================================================ */
.bento { display: grid; gap: var(--spacing-16); margin-top: 48px; }
/* Antes y después: la destacada ocupa dos filas a la izquierda y las cuatro
   chicas se acomodan 2 × 2 a la derecha */
.bento--ad { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.bento--ad .vcard--destacada { grid-row: span 2; }

.vcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .13);
  background: rgba(6, 8, 14, .72);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.vcard:hover {
  border-color: rgba(124, 58, 237, .38);
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32), 0 0 30px rgba(0, 102, 255, .12);
}
.vcard__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  flex: none;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  background: rgba(255, 255, 255, .02);
}
.vcard__dots { display: flex; gap: 6px; flex: none; }
.vcard__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.vcard__ruta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--font-ibm-plex-mono);
  font-size: 11.5px;
  color: rgba(171, 174, 187, .55);
}
/* Número de ventana (01, 02…): detalle compartido, a la derecha de la barra */
.vcard__num {
  margin-left: auto;
  flex: none;
  font-family: var(--font-ibm-plex-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(169, 184, 255, .55);
}
/* Espacio para una captura, un mockup de chat o un gráfico. Hoy lleva un
   mockup hecho en HTML; para usar una imagen, reemplazá su contenido por
   <img src="…" alt="…"> y se ajusta sola. */
.vcard__media {
  flex: 1;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid rgba(148, 163, 184, .08);
  /* Base común de toda imagen: luz azul desde arriba + trama de puntos sutil */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 102, 255, .08), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 14px 14px,
    rgba(255, 255, 255, .012);
}
.vcard__media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.vcard__body { display: grid; align-content: start; gap: 8px; padding: 20px 22px 24px; }
.vcard__body h3 {
  font-family: var(--font-inter);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: var(--color-quartz);
}
.vcard__body p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--color-mist); }

/* Mockups livianos (se reemplazan por capturas cuando las haya) */
.mock-chat { width: 100%; max-width: 400px; display: grid; gap: 10px; }
.mock-chat__msg {
  justify-self: start;
  max-width: 88%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .07);
  font-size: 13.5px;
  line-height: 1.4;
  color: #dbe2f2;
}
.mock-chat__msg time { margin-left: 8px; font-size: 11px; color: rgba(171, 174, 187, .6); }
.mock-chat__msg--salida {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  border-color: rgba(124, 58, 237, .3);
  background: linear-gradient(135deg, rgba(124, 58, 237, .32), rgba(0, 102, 255, .32));
}
.mock-chat__estado {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #f0a58f;
}
.mock-chat__estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mock-chat__estado--ok { color: #4fc99a; }

.mock-agenda { width: 100%; max-width: 340px; display: grid; gap: 8px; }
.mock-agenda__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .04);
  font-size: 13px;
  color: #dbe2f2;
}
.mock-agenda__fila time { font-family: var(--font-ibm-plex-mono); font-size: 12px; color: rgba(171, 174, 187, .75); }
.mock-agenda__fila--vacia { border-style: dashed; border-color: rgba(224, 138, 114, .35); background: transparent; color: #f0a58f; }
.mock-agenda__estado { margin-left: auto; padding: 2px 9px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: 500; }
.mock-agenda__estado--ok { color: #4fc99a; background: rgba(16, 185, 129, .12); }
.mock-agenda__estado--alerta { color: #f0a58f; background: rgba(224, 125, 81, .14); }

.mock-canales { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mock-canales span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  color: #dbe2f2;
}
.mock-canales b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-terracota-oscuro);
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
}

/* ---------- La solución: puente de 3 pasos ---------- */
.puente {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
/* Hilo de luz que une los tres pasos (se ve en los espacios entre tarjetas) */
.puente::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, .65), rgba(0, 102, 255, .65), transparent);
}
.puente__paso {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .13);
  background: rgba(6, 8, 14, .78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/* El paso de la IA lleva el borde en degradado, como los botones de la marca */
.puente__paso--ia {
  border-color: transparent;
  background:
    linear-gradient(rgba(6, 8, 14, .92), rgba(6, 8, 14, .92)) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
  box-shadow: 0 0 40px rgba(0, 102, 255, .18);
}
/* Tratamiento tipográfico: número mono en esmeralda brillante y con peso,
   título en bold más grande, texto en gris claro */
.puente__num {
  font-family: var(--font-ibm-plex-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-emerald);
  text-shadow: 0 0 18px rgba(52, 211, 153, .25);
}
.puente__paso h3 {
  margin-top: 8px;
  font-family: var(--font-figtree);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
}
.puente__paso p { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.55; color: #c7cbd6; }
/* Palabra destacada en verde esmeralda (títulos) */
.texto-esmeralda { color: var(--color-emerald); }
.puente__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: 16px;
  /* Recuadro en verde tenue, a juego con el botón */
  border: 1px solid rgba(52, 211, 153, .28);
  background:
    linear-gradient(100deg, rgba(16, 185, 129, .10), rgba(16, 185, 129, .03));
}
.puente__pie p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--color-mist); }
.puente__pie b { font-weight: 500; color: var(--color-quartz); }
/* Botón "Ver solución": fondo esmeralda sólido, borde más claro, letras
   blancas y resplandor verde suave */
.puente__pie .btn {
  border-color: #34d399;
  background: #059669;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 22px rgba(16, 185, 129, .28);
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .18s ease;
}
.puente__pie .btn:is(:hover, :focus-visible) {
  border-color: #6ee7b7;
  background: #10b981;
  box-shadow: 0 0 32px rgba(16, 185, 129, .45);
}
.puente__pie .btn .ico { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.puente__pie .btn:is(:hover, :focus-visible) .ico { transform: translateX(3px); }

/* ---------- Antes y después: tarjeta blanca a lo ancho ----------
   Máxima simplicidad: sólo blanco, negro y grises neutros. Las 5 situaciones
   van en una tarjeta blanca a todo el ancho del bloque, en 3 columnas que se
   llenan de izquierda a derecha: 1 2 3 / 4 5 (columna 1: 1 y 4, columna 2:
   2 y 5, columna 3: 3). Tablet: 2 columnas. Celular: 1. */
.ad-layout {
  --ad-ancho: min(88vw, 1560px);
  width: var(--ad-ancho);
  margin: 36px 0 0 calc((100% - var(--ad-ancho)) / 2);
}
/* La sección entera en blanco, de borde a borde (sin tarjeta): el encabezado
   y la nota pasan a colores oscuros para leerse sobre el blanco */
#antes-despues { background: #ffffff; color: #0f172a; padding-block: 56px; }
#antes-despues .section-head .h-lg { color: #0f172a; }
#antes-despues .section-head .lead { color: #475569; }
#antes-despues .kicker { border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
/* Título: grande, extrabold y apretado, en dos líneas; la segunda en el
   degradado violeta → azul de la marca */
#antes-despues .section-head { max-width: 1000px; }
.ad-titulo {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #0f172a;
  text-wrap: balance;
}
.ad-titulo span {
  background: linear-gradient(90deg, #7C3AED, #0066FF);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@media (max-width: 700px) {
  .ad-titulo br { display: none; }
}
/* Degradado compartido por los íconos: fuera de la vista, sin display:none
   (algunos navegadores dejan de pintar el degradado si el svg está oculto) */
.ad-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Tarjetas gris claro sobre el blanco, sin borde ni sombra: número arriba (en
   el lugar de un ícono), título y las dos filas "Antes" / "Con SLine IA" */
.ad-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #0f172a;
}
.ad-item {
  padding: 28px 30px 30px;
  border-radius: 18px;
  background: #f3f3f4;
}
.ad-item__titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 16px;
  font-family: var(--font-figtree);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1E3A8A;
}
/* Ícono de cada situación (en el lugar del número): trazo con el degradado
   #adIcoColor definido en el HTML */
.ad-item__ico { display: block; flex: none; width: 36px; height: 36px; }
.ad-item__ico svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: url(#adIcoColor);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Etiqueta grande en negro carbón arriba, descripción en gris abajo */
.ad-item__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #6b7280;
}
.ad-item__fila + .ad-item__fila { margin-top: 14px; }
.ad-item__fila span {
  font-family: var(--font-figtree);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0f172a;
}

/* Tablet: ancho normal de la página y 2 columnas */
@media (max-width: 1000px) {
  .ad-layout { width: auto; margin: 36px 0 0; }
  .ad-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Celular: 1 columna */
@media (max-width: 700px) {
  .ad-lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ad-item { padding: 22px 22px 24px; border-radius: 16px; }
  .ad-item__titulo { font-size: 22px; gap: 14px; }
  .ad-item__ico { width: 32px; height: 32px; }
  .ad-item__fila span { font-size: 15.5px; }
}

/* ---------- Antes y después ---------- */
.vcard--destacada .vcard__media { min-height: 240px; }
.ad-card .vcard__body { flex: 1; }

/* Selector "Antes / Con SLine IA" de la tarjeta destacada */
.ad-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  margin: 16px 20px 0;
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(255, 255, 255, .04);
}
.ad-toggle__btn {
  padding: 7px 16px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ash);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ad-toggle__btn:hover { color: var(--color-quartz); }
.ad-toggle__btn[aria-pressed="true"] { color: var(--color-quartz); background: rgba(255, 255, 255, .09); }
.ad-toggle__btn[data-ver="despues"][aria-pressed="true"] {
  background: linear-gradient(135deg, #7C3AED, #0066FF);
  box-shadow: 0 0 18px rgba(0, 102, 255, .4);
}
.ad-dest[data-estado="antes"] .ad-dest__despues,
.ad-dest[data-estado="despues"] .ad-dest__antes { display: none; }
.ad-dest__antes,
.ad-dest__despues { animation: adFundido .35s ease; }
@keyframes adFundido { from { opacity: 0; transform: translateY(6px); } }

/* Pares Antes / Después de las tarjetas chicas: mismos colores que el
   simulador (terracota = sin IA, esmeralda = con IA) */
.ad-par { display: grid; gap: 8px; margin: 6px 0 0; }
.ad-par > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);   /* entra "Con SLine IA" */
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 10px;
}
.ad-par dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ad-par dd { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.45; color: var(--color-mist); }
.ad-par__antes { border: 1px solid rgba(224, 138, 114, .14); background: rgba(180, 70, 55, .08); }
.ad-par__antes dt { color: #f0a58f; }
.ad-par__despues { border: 1px solid rgba(79, 201, 154, .18); background: rgba(16, 150, 110, .09); }
.ad-par__despues dt { color: #4fc99a; }
.ad-par__despues dd { color: #e2f3ec; }

/* ---------- Por qué nosotros ----------
   Misión y visión en un panel de cristal ancho, dividido por una línea en
   degradado, con la frase en grande y la idea clave resaltada. Debajo, los
   valores en una fila de 4 columnas separadas por líneas finas (sin tarjetas),
   con ícono en círculo, título y texto. Tablet: valores 2 × 2. Celular: todo
   en una columna. */
.futuro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 56px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(124, 58, 237, .16), transparent 70%),
    radial-gradient(60% 90% at 100% 100%, rgba(0, 102, 255, .14), transparent 70%),
    rgba(255, 255, 255, .025);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/* Filo de luz arriba */
.futuro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .8), rgba(96, 165, 250, .8), transparent);
}
.futuro__item { position: relative; padding: 48px 52px 52px; }
/* Línea divisoria vertical en degradado entre misión y visión */
.futuro__item + .futuro__item::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(167, 139, 250, .5), rgba(96, 165, 250, .5), transparent);
}
.futuro__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-ibm-plex-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a5b4fc;
}
.futuro__tag::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.futuro__texto {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
  text-wrap: pretty;
}
.futuro__resalte {
  background: linear-gradient(90deg, #c4b5fd, #93c5fd);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Valores */
.valores__titulo {
  margin: 64px 0 0;
  text-align: center;
  font-family: var(--font-ibm-plex-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a5b4fc;
}
.valores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
}
.valor {
  padding: 8px 32px 12px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.valor:first-child { border-left: 0; padding-left: 0; }
.valor:last-child { padding-right: 0; }
.valor__icono {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0f22, #0b0f22) padding-box,
    linear-gradient(135deg, #7C3AED, #0066FF) border-box;
  color: #c4b5fd;
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.valor__icono svg { width: 22px; height: 22px; }
.valor h3 {
  margin: 0 0 10px;
  font-family: var(--font-figtree);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
}
.valor p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #c7cbd6; }
.valor:hover .valor__icono { transform: translateY(-2px); box-shadow: 0 0 26px rgba(124, 58, 237, .45); }

@media (max-width: 1000px) {
  .futuro { grid-template-columns: minmax(0, 1fr); }
  .futuro__item + .futuro__item::before {
    top: 0; bottom: auto; left: 40px; right: 40px; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .5), rgba(96, 165, 250, .5), transparent);
  }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .valor, .valor:first-child, .valor:last-child { padding: 0 28px; border-left: 0; }
  .valor:nth-child(odd) { padding-left: 0; }
  .valor:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .08); padding-right: 0; }
}
@media (max-width: 700px) {
  .futuro { margin-top: 40px; border-radius: 20px; }
  .futuro__item { padding: 32px 24px 34px; }
  .valores { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .valor, .valor:nth-child(odd), .valor:nth-child(even) { padding: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .valor__icono { transition: none; }
  .valor:hover .valor__icono { transform: none; }
}

/* ---------- Página de servicios ---------- */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 168px 0 24px;
  text-align: center;
}
/* La luz del hero, más chica: azul marino arriba y el verde azulado abriéndose */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 560px;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(63, 112, 120, .32), transparent 70%),
    linear-gradient(to bottom, var(--color-hero-top), transparent);
}
.page-head h1 {
  text-wrap: balance;
  background: linear-gradient(to bottom right, #ffffff 30%, rgba(255, 255, 255, .45));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.page-head .lead { max-width: 60ch; margin: 20px auto 0; }
.section--pegada { padding-top: 48px; }

/* ---------- Servicios: catálogo por función ----------
   Filtros (.srv-filtro) · grupos (.srv-grupo) · tarjetas (.srv) · detalle en
   el panel #modalServicio (.srv-panel + .srvd), que se abre agrandando la
   tarjeta. Lo maneja main.js. */
.srv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Filtros: píldoras centradas, quietas (no acompañan el scroll) */
.srv-filtros {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
  padding: 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(7, 11, 39, .72);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.srv-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-figtree);
  font-size: 15px;
  font-weight: 600;
  color: #c7cbd6;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.srv-filtro span {
  font-family: var(--font-ibm-plex-mono);
  font-size: 12px;
  font-weight: 400;
  color: #8b93a7;
}
.srv-filtro:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.srv-filtro.is-activo {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(rgba(12, 16, 40, .9), rgba(12, 16, 40, .9)) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
  box-shadow: 0 0 18px rgba(0, 102, 255, .22);
}
.srv-filtro.is-activo span { color: #a9b8ff; }

/* Título del catálogo con efecto "shutter" (lo arma main.js al cargar y al
   filtrar). Cada letra entra desenfocada mientras tres franjas de la misma
   letra la cruzan: arriba y abajo hacia la derecha en el color de acento de la
   categoría (--shutter-acento), el medio hacia la izquierda en gris claro.
   Escalonado con --i (orden de la letra). */
.page-head h1.shutter {
  background: none;
  color: #ffffff;
}
.shutter__palabra { display: inline-block; white-space: nowrap; }
.shutter__letra {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-block: .1em;
  margin-block: -.1em;
  vertical-align: top;
}
.shutter__base {
  display: inline-block;
  animation: shutterBase .8s ease-out both;
  animation-delay: calc(var(--i, 0) * 18ms + 300ms);
}
.shutter__corte {
  position: absolute;
  inset: 0;
  padding-block: .1em;
  pointer-events: none;
  opacity: 0;
  animation: .7s ease-in-out both;
}
.shutter__corte--1 {
  color: var(--shutter-acento, #a78bfa);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation-name: shutterDerecha;
  animation-delay: calc(var(--i, 0) * 18ms);
}
.shutter__corte--2 {
  color: #e5e7eb;
  clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%);
  animation-name: shutterIzquierda;
  animation-delay: calc(var(--i, 0) * 18ms + 100ms);
}
.shutter__corte--3 {
  color: var(--shutter-acento, #a78bfa);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation-name: shutterDerecha;
  animation-delay: calc(var(--i, 0) * 18ms + 200ms);
}
@keyframes shutterBase {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes shutterDerecha {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes shutterIzquierda {
  0%   { transform: translateX(100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}
/* Subtítulo: se reemplaza con un fade & blur up corto */
#catSub.is-cambiando { animation: catSubEntra .6s cubic-bezier(.16, 1, .3, 1) .25s both; }
@keyframes catSubEntra {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
}
/* Tarjetas del grupo que aparece al filtrar: entran escalonadas.
   Usa translate (no transform) para no pisar la subida del hover. */
.srv-grupo.is-entrando .srv {
  animation: srvEntra .55s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}
@keyframes srvEntra {
  from { opacity: 0; translate: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .shutter__base, .shutter__corte, #catSub.is-cambiando, .srv-grupo.is-entrando .srv { animation: none; }
}

/* Grupo: título grande a la izquierda, descripción corta al lado */
/* Aclaración chica debajo de los filtros */
.srv-aviso {
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-ash);
}
.srv-grupo { margin-top: 72px; }
.srv-grupo[hidden] { display: none; }
.srv-grupo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.srv-grupo__titulo {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}

.srv-grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* Plan completo: una sola tarjeta, a lo ancho, con el visual apaisado y el
   borde en degradé para que se lea como el nivel de arriba */
.srv--plan {
  grid-column: 1 / -1;
  border-color: transparent;
  background:
    linear-gradient(rgba(10, 13, 30, .85), rgba(10, 13, 30, .85)) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
}
.srv--plan .srv__visual { aspect-ratio: 16 / 4.5; }
.srv--plan .srv__ico { width: 88px; height: 88px; }
.srv--plan .srv__titulo { font-size: 26px; }
.srv__tag--plan {
  border-color: transparent;
  background: linear-gradient(120deg, #7C3AED, #0066FF);
  color: #fff;
}
@media (max-width: 640px) {
  .srv--plan .srv__visual { aspect-ratio: 16 / 9; }
  .srv--plan .srv__titulo { font-size: 22px; }
}

/* Tarjeta: arriba un panel con el ícono grande (en lugar de foto), abajo el
   título, el dolor y "Saber más". Toda la tarjeta es clickeable (el ::after
   del botón la cubre). */
.srv {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(10, 13, 30, .72);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
.srv:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, .4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(0, 102, 255, .12);
}
.srv__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;   /* el visual ES la tarjeta: el título va encima */
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(0, 102, 255, .22), transparent 70%),
    radial-gradient(50% 70% at 30% 0%, rgba(124, 58, 237, .22), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    #080b1f;
}
.srv__ico {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: url(#srvIcoColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(124, 58, 237, .45));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.srv:hover .srv__ico { transform: scale(1.08); }
.srv__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(7, 11, 39, .7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #dbe2f2;
}
.srv__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-ibm-plex-mono);
  font-size: 13px;
  color: rgba(199, 203, 214, .55);
}
/* Encima del visual, abajo: título a la izquierda y "+" a la derecha */
.srv__cuerpo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 18px 22px;
}
.srv__titulo {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}
/* Botón redondo "+" (abre el panel). Su ::after cubre toda la tarjeta, así
   se puede tocar en cualquier parte. Al pasar el mouse gira a "×" a medias. */
.srv__mas {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(7, 11, 39, .6);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #dbe2f2;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .3s ease, box-shadow .3s ease;
}
.srv__mas svg { width: 20px; height: 20px; }
.srv__mas::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.srv:hover .srv__mas {
  transform: rotate(90deg);
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(#0b0f24, #0b0f24) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
  box-shadow: 0 0 18px rgba(0, 102, 255, .3);
}
.srv__mas:focus-visible { outline: none; }
.srv:has(.srv__mas:focus-visible) { outline: 2px solid #a9b8ff; outline-offset: 3px; }
/* Foto del servicio (cuando la agregues): <img> dentro de .srv__visual, tapa el
   panel y oculta el ícono */
.srv__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.srv__visual:has(img) .srv__ico,
.srv__visual:has(img) .srv__tag,
.srv__visual:has(img) .srv__num { display: none; }
.srv__visual .srv__tag,
.srv__visual .srv__num { z-index: 1; }
/* En el plan completo la etiqueta "Incluye los 4 servicios" se queda aunque haya foto */
.srv__visual:has(img) .srv__tag--plan { display: block; }
/* ...pero no dentro del panel grande: ahí quedaría fuera de cuadro al animar */
.srv-panel .srv-panel__visual span.srv__tag { display: none; }
/* En el panel la foto tiene la misma proporción que en la tarjeta (16:10):
   así al abrir y cerrar no cambia el recorte ni "salta" la imagen */
.srv-panel__visual:has(img) { aspect-ratio: 16 / 10; }

/* Sin <dialog> (navegadores viejos): el detalle se despliega dentro de la tarjeta */
.srv__detalle { padding: 0 24px 24px; }

/* ---------- Panel del servicio (la tarjeta agrandada) ----------
   <dialog> a pantalla completa y transparente: el fondo oscuro es
   .srv-panel__fondo y la tarjeta grande es .srv-panel__caja. La animación
   (de la tarjeta al panel y vuelta) la hace main.js con Web Animations. */
.srv-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--color-quartz);
}
.srv-panel::backdrop { background: transparent; }
/* Sin scroll detrás del panel, reservando el lugar de la barra para que la
   página no se corra de costado al abrir */
html:has(.srv-panel[open]) { overflow: hidden; scrollbar-gutter: stable; }
.srv-panel__fondo {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 16, .62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.srv-panel__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  margin: 80px auto 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0a0d1e;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  transform-origin: 0 0;
}
/* Cruz redonda: queda fija arriba a la derecha aunque se scrollee el panel */
.srv-panel__cerrar {
  position: sticky;
  top: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 16px 16px -60px 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 11, 39, .75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .3s ease;
}
.srv-panel__cerrar:hover { background: rgba(124, 58, 237, .45); transform: rotate(90deg); }
.srv-panel__cerrar svg { width: 20px; height: 20px; }
.srv-panel__visual {
  flex: none;
  aspect-ratio: 16 / 6.5;
  border-radius: 0;
  transform-origin: 0 0;
}
.srv-panel__visual .srv__ico { width: 130px; height: 130px; stroke-width: 1.2; }
.srv-panel__visual .srv__num { display: none; }
.srv-panel__cuerpo { padding: 30px 40px 40px; }
.srv-panel__titulo {
  margin: 0;
  font-family: var(--font-figtree);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  transform-origin: 0 0;
}
.srv-panel__detalle { margin-top: 24px; transform-origin: 50% 0; }
.srv-panel .srvd__tag,
.srv-panel .srvd__titulo { display: none; }
.srvd__tag {
  margin: 0 0 10px;
  font-family: var(--font-ibm-plex-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #a9b8ff;
}
.srvd__titulo {
  margin: 0 0 22px;
  font-family: var(--font-figtree);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}
.srvd__etiqueta {
  margin: 24px 0 10px;
  font-family: var(--font-figtree);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b93a7;
}
.srvd__titulo + .srvd__etiqueta { margin-top: 0; }
.srvd__dolor {
  margin: 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid #7C3AED;
  font-size: 18px;
  line-height: 1.5;
  color: #e5e7eb;
}
.srvd__pasos {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.srvd__pasos li {
  position: relative;
  padding-left: 46px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #c7cbd6;
  counter-increment: paso;
}
.srvd__pasos li::before {
  content: counter(paso);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0f24, #0b0f24) padding-box,
    linear-gradient(120deg, #7C3AED, #0066FF) border-box;
  font-family: var(--font-ibm-plex-mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
/* Frase que presenta la lista y frase de cierre debajo */
.srvd__intro { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: #c7cbd6; }
.srvd__cierre { margin: 18px 0 0; font-size: 15.5px; line-height: 1.55; color: #e5e7eb; }
.srvd__pasos b { font-weight: 700; color: #fff; }
/* "Qué no es": lista con guiones, dentro del recuadro */
.srvd__no {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.srvd__no li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: #c7cbd6;
}
.srvd__no li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 0;
  width: 9px;
  height: 1px;
  background: #8b93a7;
}
.srvd__alcance {
  margin-top: 24px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}
.srvd__alcance .srvd__etiqueta { margin-top: 0; }
.srvd__alcance p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: #c7cbd6; }
.srvd__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Tablet: 2 columnas · celular: 1 columna y filtros deslizables */
@media (max-width: 1000px) {
  .srv-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .srv-grilla { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .srv__visual { aspect-ratio: 4 / 3; }   /* en celular, menos chatas */
  .srv-grupo { margin-top: 56px; }
  .srv-filtros {
    top: 72px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 16px;
  }
  .srv-filtros::-webkit-scrollbar { display: none; }
  .srv-filtro { flex: none; padding: 8px 14px; font-size: 14px; }
  .srv-panel__caja { width: calc(100vw - 24px); margin-top: 64px; max-height: calc(100dvh - 80px); }
  .srv-panel__cuerpo { padding: 24px 20px 28px; }
  .srv-panel__visual .srv__ico { width: 96px; height: 96px; }
  .srvd__acciones .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .srv, .srv__ico, .srv__mas .ico { transition: none; }
  .srv:hover { transform: none; }
  .srv:hover .srv__ico { transform: none; }
}

/* ---------- Modal "Hablemos" ---------- */
.modal {
  width: 100%;
  max-width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-quartz);
}
.modal::backdrop {
  background: rgba(3, 5, 16, .72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
body:has(.modal[open]) { overflow: hidden; }
.modal[open] .modal__caja { animation: modalEntra .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal__caja {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(#06080e, #06080e) padding-box,
    linear-gradient(140deg, rgba(124, 58, 237, .7), rgba(0, 102, 255, .7)) border-box;
  box-shadow: 0 0 50px rgba(0, 102, 255, .22), 0 30px 80px rgba(0, 0, 0, .6);
}
.modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  background: rgba(255, 255, 255, .02);
}
.modal__cerrar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ash);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.modal__cerrar:hover { background: rgba(255, 255, 255, .07); color: var(--color-quartz); }
.modal__cerrar svg { width: 16px; height: 16px; }
.modal__cuerpo { padding: 26px 26px 28px; }
.modal__cuerpo .eyebrow { margin-bottom: 10px; color: #a9b8ff; }
.modal__titulo { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.modal__sub { margin: 8px 0 0; font-size: 14.5px; font-weight: 300; color: var(--color-ash); }
.modal__opciones { display: grid; gap: 10px; margin-top: 22px; }
.modal__opcion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.modal__opcion:is(:hover, :focus-visible) {
  border-color: rgba(124, 58, 237, .5);
  background: rgba(124, 58, 237, .08);
  transform: translateY(-1px);
}
.modal__txt { min-width: 0; }
.modal__txt b { display: block; font-size: 15px; font-weight: 500; color: var(--color-quartz); }
.modal__txt small { display: block; margin-top: 2px; font-size: 13px; font-weight: 300; color: var(--color-ash); }
.modal__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(0, 102, 255, .3));
  color: #cfd8ff;
}
.modal__ico svg { width: 20px; height: 20px; }
.modal__ico--wa { background: rgba(37, 211, 102, .14); color: #4fd88a; }
.modal__flecha { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--color-ash); transition: transform .2s ease, color .2s ease; }
.modal__opcion:hover .modal__flecha { transform: translateX(3px); color: var(--color-quartz); }

@media (max-width: 1000px) {
  .bento--ad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--ad .vcard--destacada { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px) {
  .bento--ad,
  .puente { grid-template-columns: minmax(0, 1fr); }
  .puente::before { display: none; }
  .puente__pie { flex-direction: column; align-items: flex-start; }
  .page-head { padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .vcard, .vcard:hover { transition: none; transform: none; }
  .ad-dest__antes, .ad-dest__despues,
  .modal[open] .modal__caja { animation: none; }
}

/* ============================================================
   El problema: tarjetas con foto, dispersas
   ============================================================ */
#problema { overflow-x: clip; padding-bottom: 160px; }
#problema > .wrap,
.problemas { position: relative; z-index: 1; }


/* Escritorio: tarjetas dispersas (posición absoluta dentro de .problemas) */
/* Las 4 tarjetas tienen que verse juntas, de un golpe de vista: el alto de
   cada una sale del alto de la pantalla, así el bloque completo (2 filas +
   separación + escalonado) entra debajo de la navbar sin scrollear.
   --ph alto de tarjeta · --gy aire entre filas · --escalon desfase de 03 y 04 */
.problemas {
  --ph: clamp(220px, calc((100vh - 120px) * .42), 360px);
  --gy: 90px;
  --escalon: 40px;
  width: min(95vw, 1800px);
  height: calc(var(--ph) * 2 + var(--gy) + var(--escalon));
  margin: 80px auto 0;
}
.pcard {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: #0B0F19;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}
/* 01 arriba a la izquierda · 02 más abajo, a su derecha · 03 arriba hacia la
   derecha · 04 abajo a la derecha. Para moverlas: left / top / width / height.
   --foco: qué parte de la foto queda a la vista (y hacia dónde hace el zoom).
   Las cuatro miden lo mismo (28 % × 440 px); lo que cambia es dónde están:
   las de arriba contra los bordes (01 izquierda, 03 derecha) y las de abajo
   también hacia los costados pero más centradas (02 izquierda, 04 derecha). */
.pcard { width: 28%; height: var(--ph); }
.pcard--1 { left: 0;   top: 0;     --foco: 46% 40%; }
.pcard--2 { left: 5%;  top: calc(var(--ph) + var(--gy)); --foco: 66% 45%; }
.pcard--3 { left: 72%; top: var(--escalon);  --foco: 52% 30%; }
/* 03: la foto crece 12 % y se ancla arriba, así las personas quedan despejadas
   arriba y la burbuja del chat queda justo por encima del texto */
.pcard--3 .pcard__foto { height: 112%; bottom: auto; }
.pcard--4 { left: 57%; top: calc(var(--ph) + var(--gy) + var(--escalon)); --foco: 38% 40%; }

.pcard:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .5);
}

/* Foto de fondo con un zoom lento y continuo (efecto Ken Burns) */
.pcard__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  transform-origin: var(--foco, 50% 50%);
  animation: fotoRespira 18s ease-in-out infinite alternate;
  transition: filter .4s ease;
}
@keyframes fotoRespira {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}
.pcard:hover .pcard__foto { filter: brightness(1.1); }

/* Sin foto todavía: el mockup ocupa la parte de arriba */
.pcard__fondo {
  position: absolute;
  inset: 0 0 38% 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 24px 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 102, 255, .10), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 14px 14px;
}
.pcard .mock-chat,
.pcard .mock-agenda { max-width: 100%; }

/* Degradé oscuro abajo para que el texto se lea sobre cualquier foto */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(6, 8, 14, .96) 0%,
    rgba(6, 8, 14, .82) 30%,
    rgba(6, 8, 14, .25) 58%,
    transparent 75%);
}
.pcard__num {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(6, 8, 14, .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-ibm-plex-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #e5e7eb;
}
.pcard__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 18px 22px 20px;
}
.pcard__texto h3 {
  font-family: var(--font-figtree);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-quartz);
}
.pcard__texto p { margin: 0; font-size: 14px; line-height: 1.45; color: #D1D5DB; }

/* Variante con el texto arriba: para fotos cuyo motivo está abajo (la 03, el
   celular sobre la mesa). El degradé cae desde arriba y el número va abajo. */
/* Degradé corto: oscurece sólo la franja del texto y deja ver casi toda la
   foto; la sombra en las letras mantiene la lectura */
.pcard--texto-arriba::after {
  background: linear-gradient(to bottom,
    rgba(6, 8, 14, .9) 0%,
    rgba(6, 8, 14, .55) 22%,
    transparent 42%);
}
.pcard--texto-arriba .pcard__texto h3,
.pcard--texto-arriba .pcard__texto p { text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }
.pcard--texto-arriba .pcard__texto { top: 0; bottom: auto; padding: 26px 26px 24px; }
.pcard--texto-arriba .pcard__num { top: auto; bottom: 16px; left: auto; right: 18px; }
.pcard--texto-arriba .pcard__fondo { inset: 38% 0 0 0; padding: 0 24px 44px; }

/* Entrada de las tarjetas (una sola vez, la maneja main.js):
   .problemas--agrupadas  las tarjetas esperan juntas y en abanico
                          (--agrupa-x / --agrupa-y / --agrupa-giro)
   .problemas--palabra    aparece "NO VUELVE" encima del grupo
   .problemas--abiertas   la palabra se desvanece y las tarjetas vuelven a su lugar
   Al terminar, main.js saca las clases y las tarjetas quedan como siempre
   (con su hover). Sin JS la palabra no se muestra. */
.problemas__palabra { display: none; }
.problemas--agrupadas .pcard {
  transform: translate(var(--agrupa-x, 0px), var(--agrupa-y, 0px)) rotate(var(--agrupa-giro, 0deg)) scale(var(--agrupa-escala, 1));
  transition: none;
}
.problemas--agrupadas.problemas--abiertas .pcard {
  transform: none;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.problemas--agrupadas .problemas__palabra {
  display: block;
  position: absolute;
  left: 50%;
  top: var(--palabra-y, 50%);
  z-index: 5;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-figtree);
  font-size: clamp(48px, 11vw, 190px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #FFFFFF;
  text-shadow: 0 8px 50px rgba(0, 0, 0, .6);
  pointer-events: none;
  opacity: 0;
  transition: opacity .75s ease-out;
}
.problemas--agrupadas.problemas--palabra .problemas__palabra { opacity: 1; }
.problemas--agrupadas.problemas--abiertas .problemas__palabra { transition-duration: 1s; }

/* Ya en su lugar, cada tarjeta flota apenas, a su ritmo. Usa la propiedad
   translate (no transform), así se suma a la subida del hover sin pisarla. */
.problemas--flotando .pcard { animation: pcardFlota 6s ease-in-out infinite; }
.problemas--flotando .pcard--2 { animation-duration: 7s;   animation-delay: -2s; }
.problemas--flotando .pcard--3 { animation-duration: 6.5s; animation-delay: -4s; }
.problemas--flotando .pcard--4 { animation-duration: 7.5s; animation-delay: -1s; }
@keyframes pcardFlota {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}
@media (max-width: 700px) {
  .problemas--agrupadas .problemas__palabra { font-size: 13vw; }
}

/* Tablet: dos columnas en zigzag (la derecha más abajo) */
@media (max-width: 1100px) {
  #problema { padding-bottom: 120px; }
  .problemas {
    width: min(92vw, 960px);
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 40px;
    padding-bottom: 64px;
  }
  .pcard { position: relative; left: auto; top: auto; width: auto; height: 400px; }
  .pcard--2,
  .pcard--4 { margin-top: 64px; }
}
/* Celular: una columna */
@media (max-width: 700px) {
  #problema { padding-bottom: 96px; }
  .problemas {
    width: min(92vw, 480px);
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 56px;
    padding-bottom: 0;
  }
  .pcard { height: 360px; }
  .pcard--2,
  .pcard--4 { margin-top: 0; }
  .pcard__texto h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard__foto { animation: none; }
  .pcard:hover { transform: none; }
}

/* ---------- Puente entre el hero y el resto de la página ----------
   Con la escena fija (escritorio), el hero termina en su verde azulado
   (--color-hero-bottom) y "El problema" arrancaba en el azul marino liso: se
   veía una línea de corte. Esto funde un color en el otro a lo largo de
   ~420 px (con paradas intermedias para que no haya bandas) y suma dos luces
   muy tenues que se desplazan despacio, como aviso de que empieza la parte
   explicativa. Sólo en modo fijo: en celular la luz de la demo ya hace el pase. */
.escena--fija + #problema::before,
.escena--fija + #problema::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  z-index: 0;
  pointer-events: none;
}
.escena--fija + #problema::before {
  background: linear-gradient(to bottom,
    var(--color-hero-bottom) 0%,
    rgba(32, 58, 84, .78) 14%,
    rgba(26, 49, 77, .52) 32%,
    rgba(11, 29, 64, .28) 55%,
    rgba(10, 21, 50, .1) 78%,
    rgba(7, 11, 39, 0) 100%);
}
.escena--fija + #problema::after {
  background:
    radial-gradient(38% 60% at 30% 0%, rgba(79, 170, 175, .09), transparent 70%),
    radial-gradient(34% 55% at 72% 10%, rgba(61, 139, 255, .07), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent);
          mask-image: linear-gradient(to bottom, #000 20%, transparent);
  animation: puenteLuz 18s ease-in-out infinite alternate;
}
@keyframes puenteLuz {
  from { transform: translateX(-4%); opacity: .7; }
  to   { transform: translateX(4%);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .escena--fija + #problema::after { animation: none; }
}

/* ---------- El problema: encabezado ---------- */
/* Etiqueta del tema: un botón centrado y grande que marca el corte con la demo.
   Píldora con borde y fondo rojos translúcidos, resplandor suave y un punto
   rojo con anillo que late. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  /* Fondo sólido (en prueba): así la etiqueta no depende del degradado de
     atrás. Para probar otra combinación, cambiá --kicker-fondo y el color. */
  --kicker-fondo: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .9);
  background: var(--kicker-fondo);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, .3),
    0 0 36px rgba(139, 92, 246, .22);
  font-family: var(--font-figtree);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #1E3A8A;
}
.kicker__dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255, 255, 255, .7);
}
/* Anillo que se expande y se apaga */
.kicker__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9);
  animation: kickerPulso 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes kickerPulso {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (max-width: 700px) {
  .kicker { font-size: 14px; padding: 10px 18px; gap: 10px; margin-bottom: 22px; }
}

/* Título: 30 px → 48 px, extrabold, apretado */
.ptitulo__h2 {
  font-family: var(--font-figtree);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-quartz);
  text-wrap: balance;
}
@media (min-width: 768px) { .ptitulo__h2 { font-size: 48px; } }

/* "antes.": en el violeta → celeste de la marca, con un subrayado que se dibuja
   de izquierda a derecha cuando termina de entrar el título */
.ptitulo__enfasis {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #c4b5fd, #93c5fd);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ptitulo__enfasis::after {
  content: "";
  position: absolute;
  left: 0;
  right: .12em;
  bottom: -.04em;
  height: .09em;
  border-radius: 99px;
  background: linear-gradient(90deg, #7C3AED, #0066FF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1) .75s;
}
.is-visible .ptitulo__enfasis::after { transform: scaleX(1); }

/* Descripción: la parte clave en blanco */
.ptitulo__lead { max-width: 640px; margin: 20px auto 0; }
.ptitulo__lead strong { font-weight: 500; color: #e5e7eb; }

/* Entrada "fade & blur up", escalonada con --delay en cada elemento. La activa
   el mismo IntersectionObserver de .reveal (main.js). */
.reveal.reveal--blur {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(4px);
  transition:
    opacity .6s cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms),
    transform .6s cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms),
    filter .6s cubic-bezier(.16, 1, .3, 1) var(--delay, 0ms);
}
.reveal.reveal--blur.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Misma entrada, pero para un bloque entero: el contenedor lleva
   .reveal.reveal--escalonado y sus hijos (etiqueta, título, texto, botones)
   entran uno detrás del otro cada 150 ms. Se usa en los encabezados de las
   demás secciones. */
.reveal.reveal--escalonado { opacity: 1; transform: none; transition: none; }
.reveal--escalonado > * {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(4px);
  transition:
    opacity .6s cubic-bezier(.16, 1, .3, 1),
    transform .6s cubic-bezier(.16, 1, .3, 1),
    filter .6s cubic-bezier(.16, 1, .3, 1);
}
.reveal--escalonado > :nth-child(2) { transition-delay: 150ms; }
.reveal--escalonado > :nth-child(3) { transition-delay: 300ms; }
.reveal--escalonado > :nth-child(4) { transition-delay: 450ms; }
.reveal--escalonado > :nth-child(n+5) { transition-delay: 600ms; }
.reveal--escalonado.is-visible > * { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal--escalonado > * { opacity: 1; transform: none; filter: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kicker__dot::after { animation: none; }
  .ptitulo__enfasis::after { transform: scaleX(1); transition: none; }
  .reveal.reveal--blur { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- Aparición al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__inner > * { opacity: 1; animation: none; }
  .nav__pill { transition: opacity .2s ease; }   /* aparece, no se desliza */
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spotlight { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-28); padding: var(--spacing-28); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --section-gap: 64px; }
  .hero { padding-top: 112px; }
  .hero__sub { max-width: 60ch; }
  .hero__grid,
  .hero__luz { background-size: 64px 56px; }
  body { background-size: 64px 56px; }   /* mismo paso que la grilla del hero */
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* La barra de navegación pasa a menú hamburguesa antes que el resto */
@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  /* Los links pasan a desplegable (absolute, fuera de la grilla): quedan dos columnas */
  .nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__links {
    position: absolute;
    top: 72px;
    left: var(--spacing-16);
    right: var(--spacing-16);
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
    background: var(--color-abyss);
    border: 1px solid var(--color-obsidian-edge);
    border-radius: var(--radius-xl);
    padding: var(--spacing-12);
    box-shadow: var(--shadow-xl);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 11px 14px; font-size: 15px; border-radius: var(--radius-lg); }
  .nav__links a:hover { background: rgba(255, 255, 255, .05); }
  .nav__links a.is-active::after,
  .nav__pill { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding-inline: var(--spacing-20); }
  /* El corte forzado del titular es para escritorio: en móvil que fluya */
  .hero h1 br { display: none; }
  .hero .h-display { font-size: clamp(36px, 9.5vw, 52px); }
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 96px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .nav__cta .btn { font-size: 14px; padding: 8px 14px; }
}