/* ═══════════════════════════════════════════════════════════
   Contratik — landing comercial (identidad oscura premium)
   Paleta según referencia visual aprobada
   ═══════════════════════════════════════════════════════════ */

/* Inter auto-hospedada (variable 400–800, subconjunto latin).
   Evita la petición a Google Fonts —que enviaría la IP del visitante
   antes del consentimiento de cookies— y mejora el LCP. Licencia OFL. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #030B1F;
  --bg-2: #07162F;
  --card: #0B1833;
  --card-2: #0F1F3D;
  --blue: #1E66FF;
  --blue-hover: #2D7BFF;
  --cyan: #20D4FF;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;

  --text: #FFFFFF;
  --muted: #B7C3D8;
  --soft: #7C8AA5;
  --line: rgba(255, 255, 255, .08);

  /* franja clara */
  --l-bg: #FFFFFF;
  --l-ink: #0F172A;
  --l-ink2: #5A6A85;
  --l-border: #E4E9F2;

  --grad-brand: linear-gradient(120deg, #0F3FBB, var(--blue));
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px rgba(2, 8, 24, .45);
  --shadow-deep: 0 30px 80px rgba(2, 8, 24, .65);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }

a { color: var(--cyan); }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}
.container-narrow { width: min(820px, 100% - 2.5rem); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 0;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* ── Enlace activo del navbar (scrollspy) ────────────────── */
.nav-links > a.nav-spy-active,
.nav-drop-btn.nav-spy-active { color: #fff; }
.nav-links > a.nav-spy-active::after { right: 0; }

/* ── Página actual: el enlace de la sección abierta ───────────
   Cada página interna ya marca su propio enlace con
   aria-current="page"; acá solo se le da el tratamiento visual.
   Se usa el cian de marca (el mismo de los acentos de sección) en
   vez de blanco, para que se distinga del hover y del scrollspy:
   hover y scrollspy ponen el texto blanco, la página actual queda
   cian con su subrayado fijo. */
.nav-links > a[aria-current="page"] {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(32, 212, 255, .45);
}
.nav-links > a[aria-current="page"]::after {
  right: 0;
  box-shadow: 0 0 10px rgba(32, 212, 255, .6);
}
/* El hover no debe apagar el acento de la página en la que ya estás. */
.nav-links > a[aria-current="page"]:hover { color: var(--cyan); }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: 600 .95rem/1 var(--font);
  padding: .8rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 18px rgba(30, 102, 255, .45);
}
.btn-primary::after {
  /* destello que barre el botón al pasar el mouse */
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-primary:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(30, 102, 255, .6);
}
.btn-primary:hover::after { left: 130%; }

.btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px);
}
.btn-outline:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.btn-ghost { color: #fff; background: transparent; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

.btn-white { background: #fff; color: #0A1F44; }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

.btn-wa {
  background: #25D366;
  color: #06281a;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
}
.btn-wa:hover {
  background: #2fe273;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, .5);
}

/* ── Navbar ──────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
  background: rgba(3, 11, 31, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(2, 8, 24, .45);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.nav-logo img { width: 42px; height: 42px; }
.wordmark {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 0 18px rgba(32, 212, 255, .35);
}

/* brillo sutil y pulsante para los logos de marca */
.nav-logo img,
.stats-logo,
.footer-logo img,
.chatbot-head img {
  animation: logo-glow 5s ease-in-out infinite;
}
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(32, 212, 255, .35)) drop-shadow(0 0 14px rgba(30, 102, 255, .25)); }
  50% { filter: drop-shadow(0 0 9px rgba(32, 212, 255, .65)) drop-shadow(0 0 24px rgba(30, 102, 255, .45)); }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-inline: auto;
}
.nav-links > a,
.nav-drop-btn {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font: 500 .92rem var(--font);
  position: relative;
  padding: .3rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.nav-links > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--cyan);
  transition: right .22s ease;
}
.nav-links > a:hover { color: #fff; }
.nav-links > a:hover::after { right: 0; }
.nav-drop-btn:hover { color: #fff; }
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform .2s ease; }

.nav-item { position: relative; }
.nav-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: -1rem;
  min-width: 250px;
  background: rgba(7, 22, 47, .97);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .5rem;
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.open .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-item:hover .nav-drop-btn svg,
.nav-item.open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop a {
  display: block;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: .9rem;
  padding: .6rem .8rem;
  border-radius: 9px;
  transition: background .15s ease, color .15s ease;
}
.nav-drop a:hover { background: rgba(30, 102, 255, .18); color: #fff; }

.nav-actions { display: flex; gap: .6rem; }
.nav-mobile-cta { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 6rem 0 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* el azul completa siempre la primera pantalla (hero + banda ≈ 100vh) */
  min-height: calc(100vh - 175px);
  min-height: calc(100svh - 175px);
}
/* el hero usa un contenedor más ancho: columnas hacia los extremos */
.hero .container { width: min(1560px, 100% - 2rem); }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1000px 560px at 85% 0%, rgba(30, 102, 255, .22), transparent 60%),
    radial-gradient(800px 500px at 100% 70%, rgba(32, 212, 255, .12), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(30, 102, 255, .18), transparent 65%),
    var(--bg);
}
/* circuitos tech de marca, sutiles */
.hero-tech {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  animation: tech-glow 7s ease-in-out infinite;
}
.hero-tech-r {
  width: 560px;
  right: -70px;
  top: -40px;
  opacity: .24;
  transform: rotate(8deg);
}
/* circuito izquierdo: vive junto a la tarjeta blanca, con pulso viajero */
.tech-left {
  position: absolute;
  left: -70px;
  bottom: -60px;
  width: 500px;
  z-index: -1;
  opacity: .42;
  pointer-events: none;
}
.tech-left img {
  width: 100%;
  transform: scaleX(-1) rotate(-6deg);
  mix-blend-mode: screen;
}
.tech-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9FF0FF;
  box-shadow: 0 0 12px 4px rgba(32, 212, 255, .85);
  opacity: 0;
  animation: dot-travel 4.6s ease-in-out infinite;
}
.td1 { left: 66%; top: 74%; --tx: -140px; --ty: -150px; }
.td2 { left: 74%; top: 80%; --tx: -205px; --ty: -215px; animation-delay: 2.3s; }
@keyframes dot-travel {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
  66% { transform: translate(var(--tx), var(--ty)) scale(2.4); opacity: 0; }
  100% { transform: translate(var(--tx), var(--ty)) scale(2.4); opacity: 0; }
}
@keyframes tech-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}
.hero-bg::before,
.dark-bg::before {
  /* orbe de luz flotante */
  content: "";
  position: absolute;
  top: 4%;
  right: 2%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 212, 255, .18), transparent 70%);
  filter: blur(36px);
  animation: orb-float 12s ease-in-out infinite;
  pointer-events: none;
}
.dark-bg::before {
  top: auto;
  bottom: 4%;
  right: auto;
  left: 2%;
  background: radial-gradient(circle, rgba(30, 102, 255, .3), transparent 70%);
  animation-duration: 15s;
  animation-direction: reverse;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-36px, 28px) scale(1.07); }
}

/* barras decorativas que suben al fondo derecho */
.hero-bars {
  /* vive en .light-band-stats: la base coincide con la base de la tarjeta blanca */
  position: absolute;
  right: 1%;
  bottom: 2rem;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: -1;
  opacity: .45;
}
.hero-bars i {
  width: 21px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, rgba(30, 102, 255, .1), var(--blue) 70%, var(--cyan));
  transform-origin: bottom;
  animation: bar-breathe 4s ease-in-out infinite;
}
.hero-bars i:nth-child(1) { height: 100px; animation-delay: 0s; }
.hero-bars i:nth-child(2) { height: 180px; animation-delay: .3s; }
.hero-bars i:nth-child(3) { height: 135px; animation-delay: .6s; }
.hero-bars i:nth-child(4) { height: 240px; animation-delay: .9s; }
.hero-bars i:nth-child(5) { height: 175px; animation-delay: 1.2s; }
.hero-bars i:nth-child(6) { height: 300px; animation-delay: 1.5s; }
@keyframes bar-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.88); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: 3rem;
  align-items: center;
}
/* titular más grande y extendido hacia el centro */
.hero-copy h1 {
  font-size: clamp(2.6rem, 4.7vw, 4.5rem);
  max-width: 15ch;
}
.hero-grid > *, .copiloto-grid > *, .feature-row > * { min-width: 0; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FDCFF;
  background: rgba(32, 212, 255, .08);
  border: 1px solid rgba(32, 212, 255, .25);
  border-radius: 999px;
  padding: .45rem 1rem;
  backdrop-filter: blur(6px);
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(32, 212, 255, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(32, 212, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(32, 212, 255, 0); }
}

.grad-text {
  background: linear-gradient(92deg, #5EB9FF 0%, var(--cyan) 45%, #5EB9FF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-shift 6s linear infinite;
}
@keyframes grad-shift {
  to { background-position: 200% center; }
}

/* ── Título del hero: efecto máquina de escribir (Typewriter) ── */
#hero-title { position: relative; }
/* "fantasma" invisible que reserva el espacio exacto (mismo texto, misma
   fuente y ancho) para que el contenido de abajo no salte al escribir, y
   el texto se corte solo en los espacios (nunca a mitad de palabra) */
.ht-ghost { visibility: hidden; }
.ht-live { position: absolute; inset: 0; }
.ht-cursor {
  color: var(--cyan);
  font-weight: 400;
  margin-left: .02em;
  animation: ht-blink 1s infinite;
}
@keyframes ht-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .12; }
}

.hero-sub {
  font-size: 1.18rem;
  color: var(--muted);
  max-width: 36rem;
  margin-bottom: 1.8rem;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-note { font-size: .85rem; color: var(--soft); margin-top: 1rem; }

/* línea de confianza bajo los CTAs (microproof, sin caja) */
.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin: 1.7rem 0 0;
  padding: 0;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.hero-proof svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--cyan);
  background: rgba(32, 212, 255, .12);
  border-radius: 50%;
  padding: 3.5px;
}

/* ── Laptop con dashboard ─────────────────────────────────── */
.hero-visual { position: relative; }
.hero-glow {
  position: absolute;
  inset: auto 6% -7% 6%;
  height: 70px;
  background: radial-gradient(ellipse at center, rgba(32, 212, 255, .5), rgba(30, 102, 255, .28) 55%, transparent 75%);
  filter: blur(30px);
  z-index: -1;
}
/* ── MacBook fotorrealista con dashboard proyectado ──────── */
.macbook-sizer {
  position: relative;
  /* ensancho el lienzo y lo deslizo a la izquierda: el portátil invade
     el espacio muerto central (su lado izquierdo es transparente) */
  width: 118%;
  margin-left: -14%;
  aspect-ratio: 1536 / 1024;
  animation: float 10s ease-in-out infinite;
  container-type: inline-size;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.macbook {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  height: 506.67px;
  transform-origin: 0 0;
  transform: scale(var(--mac-s, 1));
}
/* Respaldo sin JS: escalera aproximada por ancho de pantalla */
@media (max-width: 1560px) { .macbook { --mac-s: .92; } }
@media (max-width: 1440px) { .macbook { --mac-s: .87; } }
@media (max-width: 1330px) { .macbook { --mac-s: .79; } }
@media (max-width: 1200px) { .macbook { --mac-s: .70; } }
@media (max-width: 1100px) { .macbook { --mac-s: .63; } }
@media (max-width: 1024px) { .macbook { --mac-s: .84; } } /* 1 columna: visual max 640px */
@media (max-width: 760px)  { .macbook { --mac-s: .56; } }
@media (max-width: 560px)  { .macbook { --mac-s: .46; } }
@media (max-width: 430px)  { .macbook { --mac-s: .40; } }
/* Navegadores modernos: escala exacta y fluida sin JS (container query units) */
@supports (width: 1cqw) and (scale: calc(1px / 1px)) {
  .macbook { --mac-s: calc(100cqw / 760px) !important; }
}
.macbook-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 46px rgba(2, 8, 24, .6));
}
/* dashboard dentro del laptop (queda para otros mockups de la página) */
.dash2-title { margin: 0; font-size: .72rem; font-weight: 700; color: #fff; }

.panel2 {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .65rem;
  min-width: 0;
}
.panel2 > small { display: block; color: var(--soft); font-size: .56rem; margin-bottom: .45rem; font-weight: 600; }

.dash2-charts { display: grid; grid-template-columns: 1.15fr 1fr; gap: .45rem; }

.hbar { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: .4rem; margin-bottom: .32rem; }
.hbar span { color: var(--soft); font-size: .54rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar div { background: rgba(255, 255, 255, .06); border-radius: 4px; height: 7px; overflow: hidden; }
.hbar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.hero-visual.in-view .hbar i { animation: grow-bar 1s cubic-bezier(.22, .61, .36, 1) backwards; }
.hero-visual.in-view .hbar:nth-child(2) i { animation-delay: .5s; }
.hero-visual.in-view .hbar:nth-child(3) i { animation-delay: .62s; }
.hero-visual.in-view .hbar:nth-child(4) i { animation-delay: .74s; }
.hero-visual.in-view .hbar:nth-child(5) i { animation-delay: .86s; }
.hero-visual.in-view .hbar:nth-child(6) i { animation-delay: .98s; }

.donut-wrap { display: flex; align-items: center; gap: .6rem; }
.donut {
  position: relative;
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) 0 51%, var(--cyan) 51% 77%, var(--amber) 77% 93%, var(--green) 93% 100%);
  display: grid;
  place-items: center;
  animation: donut-spin 1.2s cubic-bezier(.22, .61, .36, 1) backwards;
}
@keyframes donut-spin {
  from { transform: rotate(-120deg) scale(.6); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}
.donut::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--card);
}
.donut b, .donut em { position: relative; z-index: 1; }
.donut b { color: #fff; font-size: .7rem; }
.donut em { display: none; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; min-width: 0; }
.donut-legend li {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .52rem;
  color: var(--soft);
  white-space: nowrap;
}
.donut-legend b { color: var(--muted); font-weight: 600; }
.donut-legend i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.donut-legend .d1 { background: var(--blue); }
.donut-legend .d2 { background: var(--cyan); }
.donut-legend .d3 { background: var(--amber); }
.donut-legend .d4 { background: var(--green); }

.table2 .trow {
  display: grid;
  grid-template-columns: 2.4fr 1fr .9fr 1fr .7fr;
  gap: .4rem;
  align-items: center;
  font-size: .54rem;
  padding: .3rem 0;
}
.table2 .trow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table2 .thead { color: var(--soft); border-bottom: 1px solid var(--line); font-weight: 600; }
.table2 .trow:not(.thead) { color: var(--muted); }
.table2 .trow:not(.thead) span:first-child { color: #fff; font-weight: 600; }
.tprep { color: var(--green) !important; font-weight: 700; }

/* etiquetas de urgencia (se reutilizan en los mockups) */
.tag {
  font-size: .58rem;
  font-weight: 700;
  padding: .22rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-red   { color: #FFB4B4; background: rgba(239, 68, 68, .16);  border: 1px solid rgba(239, 68, 68, .4); animation: tag-pulse 2.2s ease-in-out infinite; }
.tag-amber { color: #FFE3A8; background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4); }
.tag-green { color: #9BF0D2; background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .4); }
@keyframes tag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.dash-chip {
  font-size: .62rem;
  font-weight: 600;
  color: #7DE8FF;
  background: rgba(32, 212, 255, .12);
  border: 1px solid rgba(32, 212, 255, .35);
  padding: .2rem .55rem;
  border-radius: 999px;
}
.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .7rem;
}
.dash-row > div { min-width: 0; }
.dash-row b { color: #fff; display: block; font-size: .74rem; }
.dash-row small { color: var(--soft); font-size: .64rem; }

/* ── Banda de métricas superpuesta al hero ───────────────── */
.light-band-stats {
  /* continúa el fondo azul del hero: la tarjeta blanca flota encima.
     Sin gradientes propios — antes tenía los suyos (a partir de 0% 0%) y se
     notaba una costura justo en el borde con .hero, porque el degradado de
     arriba se cortaba ahí y este arrancaba uno nuevo. Con solo el color
     plano, el fondo de .hero-bg se ve continuo en toda la sección. */
  position: relative;
  isolation: isolate; /* las barras (z -1) quedan sobre el hero pero bajo la tarjeta */
  background: var(--bg);
  padding-bottom: 4.75rem;
}

/* ── Franja clara: la plataforma en acción ───────────────── */
.light-band {
  position: relative;
  overflow: hidden;
  background: var(--l-bg);
  color: var(--l-ink);
  padding: 3.5rem 0 4.5rem;
}
.lb-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 400px at 12% 30%, rgba(30, 102, 255, .07), transparent 65%),
    radial-gradient(620px 420px at 88% 72%, rgba(32, 212, 255, .06), transparent 65%);
}
.lb-bg::after {
  /* líneas verticales muy sutiles */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(15, 23, 42, .04) 1px, transparent 1px);
  background-size: 110px 100%;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000, transparent 82%);
}
.lb-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
}

/* encabezado */
.lb-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.lb-head h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--l-ink); margin-bottom: .6rem; }
.lb-grad {
  background: linear-gradient(92deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-head p { color: var(--l-ink2); font-size: 1.12rem; margin: 0; }

/* 3 · composición asimétrica */
.lb-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* dashboard protagonista */
.lb-dash { position: relative; min-width: 0; }
.lb-dash-glow {
  position: absolute;
  inset: auto 8% -5% 8%;
  height: 46px;
  background: radial-gradient(ellipse at center, rgba(30, 102, 255, .4), transparent 70%);
  filter: blur(26px);
  z-index: -1;
}
.ld {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0D1D3F, var(--card) 55%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(10, 30, 74, .28);
  color: var(--muted);
  font-size: .68rem;
  animation: float 9s ease-in-out infinite;
}
.ld-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 11, 31, .5);
}
.ld-crumb { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.ld-crumb b { color: #fff; font-size: .72rem; white-space: nowrap; }
.ld-crumb em {
  font-style: normal;
  color: var(--soft);
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-ai {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .62rem;
  font-weight: 600;
  color: #7DE8FF;
  background: rgba(32, 212, 255, .1);
  border: 1px solid rgba(32, 212, 255, .3);
  border-radius: 999px;
  padding: .3rem .7rem;
  white-space: nowrap;
}
.ld-ai i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  animation: bounce 1.2s infinite;
}
.ld-ai i:nth-child(2) { animation-delay: .15s; }
.ld-ai i:nth-child(3) { animation-delay: .3s; }

.ld-body { display: grid; grid-template-columns: 118px 1fr; flex: 1; }
.ld-side {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem .6rem;
  border-right: 1px solid var(--line);
  background: rgba(3, 11, 31, .4);
}
.ld-side span { padding: .38rem .55rem; border-radius: 7px; color: var(--soft); }
.ld-side .active { background: rgba(30, 102, 255, .25); color: #fff; font-weight: 600; }

.ld-main { padding: .9rem 1rem 1rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.ld-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ld-kpi {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .7rem;
  min-width: 0;
}
.ld-kpi small { display: block; color: var(--soft); font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-kpi b { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -.02em; }
.ld-hint { display: block; font-style: normal; color: var(--soft); font-size: .54rem; margin-top: .15rem; }
.ld-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-top: .4rem;
}
.ld-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.lb-dash.in-view .ld-bar span { animation: grow-bar 1.1s cubic-bezier(.22, .61, .36, 1) .4s backwards; }
.lb-dash.in-view .hbar i { animation: grow-bar 1s cubic-bezier(.22, .61, .36, 1) backwards; }
.lb-dash.in-view .hbar:nth-child(2) i { animation-delay: .5s; }
.lb-dash.in-view .hbar:nth-child(3) i { animation-delay: .62s; }
.lb-dash.in-view .hbar:nth-child(4) i { animation-delay: .74s; }

.ld-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ld-panel {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .8rem;
  min-width: 0;
}
.ld-panel > small {
  display: block;
  color: var(--soft);
  font-weight: 600;
  font-size: .58rem;
  margin-bottom: .55rem;
}

.ld-ind { display: grid; grid-template-columns: 84px 1fr; gap: .5rem; align-items: center; margin-bottom: .55rem; }
.ld-ind:last-child { margin-bottom: 0; }
.ld-ind > span { color: var(--muted); font-size: .62rem; }
.ld-ind-bars { display: grid; gap: .3rem; min-width: 0; }
.ld-ind-bar { display: flex; align-items: center; gap: .45rem; }
.ld-ind-bar i { display: block; height: 6px; border-radius: 4px; background: #55637F; }
.ld-ind-bar.ok i { background: linear-gradient(90deg, var(--green), #34D9A8); }
.ld-ind-bar em { font-style: normal; font-size: .56rem; color: var(--soft); white-space: nowrap; }
.ld-ind-bar.ok em { color: #9BF0D2; }

.ld-alert {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .38rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
}
.ld-alert:last-child { border-bottom: 0; padding-bottom: 0; }
.ld-alert i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .3rem; }
.a-red { background: var(--red); box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); animation: pulse 2s infinite; }
.a-amber { background: var(--amber); }
.a-green { background: var(--green); }
.ld-alert b { display: block; color: #E9F0FB; font-size: .63rem; font-weight: 600; }
.ld-alert em { font-style: normal; color: var(--soft); font-size: .57rem; }

.ld-steps { display: flex; align-items: center; gap: 4px; margin: .2rem 0 .5rem; }
.ld-steps i { height: 6px; flex: 1; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.ld-steps i.done { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.ld-steps i.now { background: var(--cyan); animation: pulse-bar 1.6s ease-in-out infinite; }
@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.ld-step-label { margin: 0; font-size: .6rem; color: var(--muted); }

/* tarjetas laterales (glass ligero) */
.lb-cards { display: grid; grid-template-rows: repeat(4, 1fr); gap: 1rem; min-width: 0; }
.lb-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 18px;
  padding: 1.25rem 1.3rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lb-card:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 102, 255, .35);
  box-shadow: 0 18px 40px rgba(30, 102, 255, .14);
}
.lb-card h3 { font-size: .98rem; color: var(--l-ink); margin: 0 0 .25rem; }
.lb-card p { font-size: .84rem; color: var(--l-ink2); margin: 0 0 .5rem; line-height: 1.45; }
.lb-card a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.lb-card a span { transition: transform .2s ease; }
.lb-card a:hover span { transform: translateX(4px); }
.lb-ill {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30, 102, 255, .08), rgba(32, 212, 255, .12));
  border: 1px solid rgba(30, 102, 255, .16);
}
.lb-ill svg { width: 36px; height: 36px; }

/* micro-animaciones de las ilustraciones */
.ill-spark {
  animation: spark 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes spark {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.12); }
}
.ill-scan { animation: scan 3s ease-in-out infinite; }
@keyframes scan {
  0%, 100% { transform: translateY(-7px); opacity: .4; }
  50% { transform: translateY(9px); opacity: 1; }
}
.ill-bell, .ill-wave, .ill-bars { transform-box: fill-box; transform-origin: center; }
.lb-card:hover .ill-bell { animation: bell-ring .7s ease; }
@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-11deg); }
  60% { transform: rotate(8deg); }
}
.lb-card:hover .ill-bars { animation: bars-jump .6s ease; }
@keyframes bars-jump {
  0%, 100% { transform: scaleY(1); }
  40% { transform: scaleY(.82); }
  70% { transform: scaleY(1.06); }
}

/* banda de métricas */
.stats-band {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.2rem;
  /* menos negativo que antes (-88px): dejaba tan poco espacio que la
     tarjeta tapaba el renglón de checks (Datos en vivo/Pliegos/Decisiones)
     al final del hero. */
  margin-top: -56px;
  background:
    radial-gradient(500px 220px at 92% 0%, rgba(32, 212, 255, .08), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F5F9FF);
  border: 1px solid #E4E9F2;
  border-radius: var(--radius-lg);
  /* menos alto arriba/abajo (antes 2.2rem parejo) — se veía con demasiado
     aire vertical comparado con el contenido real de la tarjeta. */
  padding: 1.5rem 2.6rem;
  color: var(--l-ink);
  box-shadow: 0 34px 70px rgba(2, 8, 24, .4), 0 4px 16px rgba(15, 23, 42, .08);
}
.stats-logo { width: 78px; height: 78px; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat { border-left: 1px solid rgba(15, 23, 42, .1); padding-left: 1.3rem; }
.stat b {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(92deg, var(--blue), #0FB4E8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat small { color: var(--l-ink2); font-size: .86rem; line-height: 1.4; display: block; }
.stats-cta { max-width: 250px; }
.stats-cta p { font-size: .95rem; font-weight: 700; color: var(--l-ink); margin-bottom: 1rem; }

/* ── Secciones ───────────────────────────────────────────── */
.section { padding: 4.5rem 0; position: relative; }
.section-alt { background: var(--bg-2); }

/* .lb-card está pensada para fondo claro (cristal blanco); esta variante
   la deja legible sobre .section-alt / fondo oscuro. */
.section-alt .lb-card {
  background: var(--card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
.section-alt .lb-card h3 { color: #fff; }
.section-alt .lb-card p { color: var(--muted); }

/* variante clara: fondo blanco con tarjetas oscuras encima */
.section-light { background: #fff; color: var(--l-ink); }
.section-light h2 { color: var(--l-ink); }
.section-light .section-sub { color: var(--l-ink2); }
.section-light .eyebrow { color: var(--blue); }
.section-light .note-center { color: var(--l-ink2); }

/* Zonas claras continuas: dos secciones blancas contiguas fluyen como
   un solo bloque, con un respiro medido en vez de un doble vacío */
.light-band + .section-light,
.section-light + .section-light { padding-top: 1.5rem; }

/* ── El mercado (números SECOP) — fondo blanco, tarjetas navy ─ */
.stat-secop { position: relative; overflow: hidden; }
.section-head.secop-head { max-width: none; }   /* título en una sola línea */
.section-head-center { max-width: 48rem; margin-inline: auto; text-align: center; }
.secop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.secop-stat {
  padding: 1.8rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.secop-stat:hover {
  transform: translateY(-5px);
  border-color: rgba(32, 212, 255, .4);
  box-shadow: 0 22px 48px rgba(2, 8, 24, .6);
}
.secop-stat b {
  display: block;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(96deg, #6FA8FF, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.secop-stat b i { font-style: normal; font-size: .5em; font-weight: 700; }
.secop-stat > span {
  display: block;
  margin-top: .7rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}
.secop-note {
  margin: 2.2rem 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--l-ink2);
}

/* ── ¿Es para tu empresa? (auto-calificador, oscuro) ─────── */
.quien-band { position: relative; overflow: hidden; color: #fff; }
.quien-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.quien-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.quien-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(2, 8, 24, .6);
  border-color: rgba(32, 212, 255, .35);
}
.quien-card h3 { color: #fff; font-size: 1.02rem; margin: 0 0 .35rem; }
.quien-card p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.5; }
.quien-card .card-icon { margin-bottom: 1rem; }

/* ── Comparativa a mano vs. asesor vs. Contratik ─────────── */
.compare { overflow-x: auto; }
.compare-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.15fr;
  min-width: 720px;
  align-items: stretch;
}
.c-cell {
  padding: 1rem 1.1rem;
  font-size: .92rem;
  color: var(--l-ink2);
  border-bottom: 1px solid var(--l-border);
  display: flex;
  align-items: center;
}
.c-dim { font-weight: 700; color: var(--l-ink); }
.c-opt {
  font-weight: 700;
  color: var(--l-ink);
  font-size: 1rem;
  justify-content: center;
  border-bottom: 2px solid var(--l-border);
}
/* columnas "negativas" (alternativas): valores atenuados con un guion */
.c-neg { position: relative; padding-left: 2rem; }
.c-neg::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: #C2CBDA;
}
/* columna ganadora: Contratik, resaltada */
.c-win {
  background: linear-gradient(180deg, rgba(30, 102, 255, .06), rgba(30, 102, 255, .03));
  border-left: 1px solid rgba(30, 102, 255, .2);
  border-right: 1px solid rgba(30, 102, 255, .2);
}
.compare-grid > .c-opt.c-win {
  background: linear-gradient(180deg, #1B4FD8, #1E66FF);
  color: #fff;
  border-bottom: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -2px 20px rgba(30, 102, 255, .3);
}
.compare-grid > .c-win:last-child {
  border-bottom: 1px solid rgba(30, 102, 255, .2);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.c-pos { position: relative; padding-left: 2.1rem; color: var(--l-ink); font-weight: 600; }
.c-pos::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  width: 1.1em; height: 1.1em;
  border-radius: 50%;
  background: rgba(16, 185, 129, .16) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2310B981" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/62% no-repeat;
}
.compare-cta { text-align: center; margin: 2.4rem 0 0; }

.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: .6rem;
}
.eyebrow-light { color: #7DE8FF; }
.section-sub { font-size: 1.1rem; color: var(--muted); }
.section-sub-light { font-size: 1.1rem; color: var(--muted); max-width: 32rem; }
/* Dentro de un section-head centrado, el max-width de arriba deja la caja
   pegada a la izquierda aunque el texto esté centrado dentro de ella —
   hay que centrar también la caja. En contextos no centrados (ej. la copy
   del Copiloto, a la izquierda de su propio grid) no debe tocarse. */
.section-head-center .section-sub-light { margin-inline: auto; }

/* Cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(2, 8, 24, .6);
  border-color: rgba(32, 212, 255, .35);
}
.card h3 { margin-top: 0; font-size: 1.1rem; color: #fff; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }
.card-sm { padding: 1.5rem; }

.card-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(30, 102, 255, .14);
  border: 1px solid rgba(30, 102, 255, .3);
  color: var(--cyan);
  margin-bottom: 1.1rem;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}
.card-icon svg { width: 24px; height: 24px; }
.card:hover .card-icon {
  transform: scale(1.12) rotate(-6deg);
  background: rgba(30, 102, 255, .25);
}

.note-center {
  text-align: center;
  color: var(--muted);
  margin: 2.5rem auto 0;
  max-width: 40rem;
}

/* ── Bento (sección de módulos) ──────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.bento-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bento-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(2, 8, 24, .6);
  border-color: rgba(32, 212, 255, .35);
}
.bento-tile h3 { color: #fff; font-size: 1.06rem; margin: 0 0 .35rem; }
.bento-tile p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.5; }
.bento-tile .card-icon { margin-bottom: 1rem; }

.bento-feat {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  align-items: center;
}
.bento-feat .bento-copy h3 { font-size: 1.18rem; }
.bento-feat .bento-copy p { font-size: .92rem; }

/* panel visual dentro de los tiles destacados */
.bento-visual {
  align-self: stretch;
  min-height: 156px;
  background: rgba(3, 11, 31, .5);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Mercado en vivo */
.bv-market { padding: .9rem 1rem; display: grid; gap: .7rem; align-content: center; }
.bv-top { display: flex; justify-content: space-between; align-items: center; }
.bv-live {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700; color: #9BF0D2;
}
.bv-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: pulse 2s infinite;
}
.bv-top b { color: #fff; font-size: .74rem; }
.bv-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.bv-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgba(30, 102, 255, .35), var(--cyan));
  transform-origin: bottom;
}
.bento-feat.in-view .bv-bars i { animation: bar-grow .85s cubic-bezier(.22, .61, .36, 1) backwards; }
.bento-feat.in-view .bv-bars i:nth-child(1) { animation-delay: .30s; }
.bento-feat.in-view .bv-bars i:nth-child(2) { animation-delay: .38s; }
.bento-feat.in-view .bv-bars i:nth-child(3) { animation-delay: .46s; }
.bento-feat.in-view .bv-bars i:nth-child(4) { animation-delay: .54s; }
.bento-feat.in-view .bv-bars i:nth-child(5) { animation-delay: .62s; }
.bento-feat.in-view .bv-bars i:nth-child(6) { animation-delay: .70s; }
.bento-feat.in-view .bv-bars i:nth-child(7) { animation-delay: .78s; }
.bv-list { display: grid; gap: .32rem; }
.bv-list div {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: .32rem;
}
.bv-list b { color: #fff; }

/* Escaneo de documento */
.bv-doc { display: grid; place-items: center; padding: .9rem 1rem; }
.bv-doc-card {
  position: relative;
  width: 100%;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .9rem;
  display: grid;
  gap: .5rem;
  overflow: hidden;
}
.bv-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
  animation: doc-scan 2.8s ease-in-out infinite;
}
@keyframes doc-scan {
  0%, 100% { transform: translateY(4px); opacity: .45; }
  50% { transform: translateY(96px); opacity: 1; }
}
.bv-doc-title { display: flex; align-items: center; gap: .45rem; color: #fff; font-size: .72rem; font-weight: 600; }
.bv-doc-title i { width: 13px; height: 16px; border-radius: 2px; background: linear-gradient(160deg, #3b5bdb, #1E66FF); flex: none; }
.bv-field { display: flex; justify-content: space-between; gap: .8rem; font-size: .68rem; color: var(--soft); }
.bv-field span { white-space: nowrap; }
.bv-field b { color: #CFE0FF; font-weight: 600; white-space: nowrap; }
.bv-warn b { color: #FFD79A; }

/* Pasos */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  counter-reset: step;
  position: relative;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(2, 8, 24, .6);
  border-color: rgba(32, 212, 255, .35);
}
/* Entrada en cascada: paso 2 y 3 esperan su turno en vez de aparecer junto al 1 */
.steps .step:nth-child(2) { transition-delay: .15s; }
.steps .step:nth-child(3) { transition-delay: .3s; }

.step::after {
  /* conector entre pasos: se "dibuja" hacia el siguiente y luego lleva
     una chispa en bucle — la misma luz que "salta" entre los números */
  content: "";
  position: absolute;
  top: 3.1rem;
  right: -1.4rem;
  width: 1.4rem;
  height: 2px;
  z-index: 1;
  background-image:
    radial-gradient(circle 3px, #fff, rgba(255, 255, 255, .85) 55%, transparent 75%),
    linear-gradient(90deg, var(--blue), var(--cyan));
  background-size: 34% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -34% 0, 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1) .55s;
}
.step.in-view::after {
  transform: scaleX(1);
  animation: connector-spark 2.4s linear 2.15s infinite;
}
.step:nth-child(2)::after { transition-delay: .85s; }
.step:nth-child(2).in-view::after { animation-delay: 2.95s; }
.step:last-child::after { display: none; }
@keyframes connector-spark {
  0%      { background-position: -34% 0, 0 0; }
  85%, 100% { background-position: 134% 0, 0 0; }
}
.step-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%),
    var(--grad-brand);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(30, 102, 255, .45), 0 0 0 4px rgba(32, 212, 255, .1);
}
.step-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.step.in-view .step-num {
  animation:
    pop-in .55s cubic-bezier(.34, 1.56, .64, 1) .3s both,
    num-pulse 2.4s ease-in-out .95s infinite;
}
.step:nth-child(2).in-view .step-num { animation-delay: .45s, 1.75s; }
.step:nth-child(3).in-view .step-num { animation-delay: .6s, 2.55s; }
@keyframes pop-in {
  from { transform: scale(.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* Destello que "viaja" de número en número, en bucle constante */
@keyframes num-pulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(30, 102, 255, .45), 0 0 0 4px rgba(32, 212, 255, .1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 4px 20px rgba(30, 102, 255, .6), 0 0 0 9px rgba(32, 212, 255, .3), 0 0 26px 4px rgba(32, 212, 255, .55);
    transform: scale(1.07);
  }
}
.step h3 { font-size: 1.12rem; color: #fff; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .93rem; margin: 0; line-height: 1.5; }

/* mini-visual dentro de cada paso */
.step-visual {
  margin-top: 1.3rem;
  background: rgba(3, 11, 31, .5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem .9rem;
  display: grid;
  gap: .55rem;
  font-size: .72rem;
}
.step-visual .sv-top { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 600; }
.sv-pill {
  font-size: .62rem; font-weight: 700; color: #9FDCFF;
  background: rgba(30, 102, 255, .16); border: 1px solid rgba(30, 102, 255, .4);
  border-radius: 999px; padding: .15rem .5rem;
}
.sv-pct { color: var(--green); font-weight: 800; font-size: .92rem; }
.sv-prog { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sv-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.step.in-view .sv-prog i { animation: grow-bar 1s cubic-bezier(.22, .61, .36, 1) .35s backwards; }
.sv-caption { font-size: .62rem; color: var(--soft); }
.step-visual .chip-row { margin: .05rem 0 0; gap: .3rem; }
.step-visual .chip { font-size: .6rem; padding: .18rem .5rem; }
.sv-row {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
  padding: .42rem .55rem;
}
.sv-row > div { min-width: 0; }
.sv-row b { display: block; color: #fff; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-row small { color: var(--soft); font-size: .58rem; }
.step-visual .tag { font-size: .52rem; padding: .18rem .42rem; }
.sv-check {
  position: relative; padding: .28rem .3rem .28rem 1.6rem;
  font-size: .66rem; color: var(--muted);
}
.sv-check::before {
  content: ""; position: absolute; left: .2rem; top: 50%; translate: 0 -50%;
  width: 1em; height: 1em; border-radius: 50%;
}
.sv-check.ok { color: #E7EEFA; }
.sv-check.ok::before {
  background: rgba(16, 185, 129, .2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2310B981" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/62% no-repeat;
}
.sv-check.pend { color: var(--soft); }
.sv-check.pend::before { border: 2px dashed var(--soft); }

/* El contenido de cada mini-visual entra en cascada, no todo de golpe */
.step .sv-row,
.step .sv-check,
.step .chip-row .chip {
  opacity: 0;
}
.step.in-view .sv-row,
.step.in-view .sv-check,
.step.in-view .chip-row .chip {
  animation: step-item-in .45s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes step-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step .sv-top + .sv-row               { animation-delay: .5s; }
.step .sv-top + .sv-row + .sv-row     { animation-delay: .62s; }
.step .sv-prog + .sv-check                       { animation-delay: .65s; }
.step .sv-prog + .sv-check + .sv-check           { animation-delay: .75s; }
.step .sv-prog + .sv-check + .sv-check + .sv-check { animation-delay: .85s; }
.step .chip-row .chip:nth-child(1) { animation-delay: .8s; }
.step .chip-row .chip:nth-child(2) { animation-delay: .92s; }
.step .chip-row .chip:nth-child(3) { animation-delay: 1.04s; }

/* Feature rows */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 2.4rem 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row-flip .feature-copy { order: 2; }
.feature-row-flip .feature-visual { order: 1; }

.feature-copy h3 { font-size: 1.6rem; color: #fff; }
.feature-lead { font-size: 1.08rem; color: var(--muted); }

.checklist {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--muted);
  font-size: .97rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: rgba(16, 185, 129, .16) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2310B981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/60% no-repeat;
}

/* Mockups de features (oscuros) */
.feature-visual { display: grid; justify-items: center; }
.mock {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-deep);
  font-size: .8rem;
  transition: transform .25s ease, border-color .25s ease;
}
.feature-visual:hover .mock { transform: translateY(-6px) rotate(-.4deg); border-color: rgba(32, 212, 255, .3); }
.mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
  font-size: .9rem;
  color: #fff;
}
.mock-pct { color: var(--green); font-weight: 800; font-size: 1.1rem; }
.mock-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-bottom: 1rem;
}
.mock-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}
.mock-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mock-checklist li {
  position: relative;
  padding: .5rem .6rem .5rem 2.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--card-2);
}
.mock-checklist li::before {
  content: "";
  position: absolute;
  left: .6rem;
  top: 50%;
  translate: 0 -50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.mock-checklist li.ok { color: #E7EEFA; }
.mock-checklist li.ok::before {
  background: rgba(16,185,129,.2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2310B981" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/62% no-repeat;
}
.mock-checklist li.pend { color: var(--soft); }
.mock-checklist li.pend::before { border: 2px dashed var(--soft); }

.mock-feed { display: grid; gap: .45rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chip {
  font-size: .72rem;
  font-weight: 600;
  color: #9FDCFF;
  background: rgba(30, 102, 255, .14);
  border: 1px solid rgba(30, 102, 255, .4);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.notif {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .7rem .8rem;
  background: var(--card-2);
}
.notif b { display: block; font-size: .8rem; color: #fff; }
.notif small { color: var(--soft); }
.notif-dot {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(32, 212, 255, .5);
  animation: pulse 2s infinite;
}

/* ── Animaciones internas de los mockups (al entrar en vista) ── */
.feature-row .mock-feed .dash-row,
.feature-row .mock-checklist li,
.feature-row .chip,
.feature-row .notif { opacity: 0; }
.feature-row.in-view .mock-feed .dash-row,
.feature-row.in-view .mock-checklist li,
.feature-row.in-view .notif { animation: fade-up .5s ease both; }
.feature-row.in-view .chip { animation: chip-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.feature-row.in-view .mock-feed .dash-row:nth-child(2),
.feature-row.in-view .mock-checklist li:nth-child(1),
.feature-row.in-view .chip:nth-child(1) { animation-delay: .35s; }
.feature-row.in-view .mock-feed .dash-row:nth-child(3),
.feature-row.in-view .mock-checklist li:nth-child(2),
.feature-row.in-view .chip:nth-child(2) { animation-delay: .48s; }
.feature-row.in-view .mock-feed .dash-row:nth-child(4),
.feature-row.in-view .mock-checklist li:nth-child(3),
.feature-row.in-view .chip:nth-child(3) { animation-delay: .61s; }
.feature-row.in-view .mock-feed .dash-row:nth-child(5),
.feature-row.in-view .mock-checklist li:nth-child(4),
.feature-row.in-view .chip:nth-child(4) { animation-delay: .74s; }
.feature-row.in-view .mock-checklist li:nth-child(5),
.feature-row.in-view .chip:nth-child(5) { animation-delay: .87s; }
.feature-row.in-view .chip:nth-child(6) { animation-delay: 1s; }
.feature-row.in-view .notif { animation-delay: 1.15s; }
@keyframes chip-pop {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* la barra de preparación crece al entrar en vista */
.feature-row.in-view .mock-progress span { animation: grow-bar 1.1s cubic-bezier(.22, .61, .36, 1) .3s backwards; }
@keyframes grow-bar { from { width: 0; } }

/* conversación real del Copiloto: los mensajes aparecen en secuencia (JS) */
.chat .bubble.c-hidden { display: none; }
.chat .bubble.c-show { animation: bubble-in .42s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* indicador "escribiendo…" con avatar del iconotipo */
.chat-typing-row {
  justify-self: start;
  display: inline-flex;
  align-items: flex-end;
  gap: .5rem;
  animation: bubble-in .3s ease both;
}
.chat-avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0F3FBB, var(--blue));
  box-shadow: 0 3px 10px rgba(30, 102, 255, .45);
}
.chat-avatar img { width: 18px; height: 18px; }
.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.chat-typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  animation: bounce 1.2s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }

/* ── Sección oscura: Copiloto ────────────────────────────── */
.section-dark {
  position: relative;
  color: #fff;
  overflow: hidden;
}
.dark-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(800px 420px at 85% 20%, rgba(32, 212, 255, .12), transparent 60%),
    radial-gradient(900px 600px at 5% 90%, rgba(30, 102, 255, .28), transparent 65%),
    linear-gradient(150deg, #041030, var(--bg-2));
}
.copiloto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.tagline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #7DE8FF;
  margin-top: 1.6rem;
}

/* ── Copiloto en fondo blanco (brillos azules del hero) ──── */
.copiloto-section { position: relative; overflow: hidden; }
.copiloto-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 90% 10%, rgba(30, 102, 255, .09), transparent 62%),
    radial-gradient(640px 440px at 4% 94%, rgba(32, 212, 255, .08), transparent 62%),
    #fff;
}
.copiloto-section .container { position: relative; z-index: 1; }
.copiloto-section .section-sub-light { color: var(--l-ink2); }
.copiloto-section .tagline { color: var(--blue); }
.copiloto-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
  margin-top: 1.7rem;
}
.copiloto-cta-note { font-size: .85rem; font-weight: 500; color: var(--l-ink2); }

.chat {
  width: min(440px, 100%);
  margin-inline: auto;
  background: rgba(11, 24, 51, .85);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  display: grid;
  gap: .8rem;
  align-content: start;
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  color: #fff;
}
.bubble {
  max-width: 88%;
  padding: .75rem 1rem;
  border-radius: 16px;
  font-size: .88rem;
  line-height: 1.5;
}
.bubble-user {
  justify-self: end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble-ai {
  justify-self: start;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: rgba(255, 255, 255, .92);
  border-bottom-left-radius: 4px;
}
.bubble-ai b { color: #7DE8FF; }

/* ── Planes ──────────────────────────────────────────────── */
.billing-toggle {
  display: inline-flex;
  gap: .3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem;
  margin-bottom: 2.5rem;
}
.toggle-opt {
  border: 0;
  background: transparent;
  font: 600 .92rem var(--font);
  color: var(--muted);
  padding: .6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.toggle-opt.is-active {
  background: #fff;
  color: #0A1F44;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.toggle-save {
  font-size: .7rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(16, 185, 129, .14);
  border-radius: 999px;
  padding: .15rem .55rem;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 370px));
  gap: 1.4rem;
  justify-content: center;
  align-items: start;
}
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: #fff;
}
.plan:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(2, 8, 24, .6); border-color: rgba(32, 212, 255, .3); }
.plan h3 { font-size: 1.35rem; margin-bottom: .2rem; color: #fff; }
.plan-for { color: var(--muted); font-size: .92rem; min-height: 2.8em; }
.plan-price { margin: .8rem 0 .2rem; }
.plan-price .price { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.plan-price .per { color: var(--muted); font-weight: 500; }
.plan-billing-note { color: var(--soft); font-size: .82rem; margin-bottom: 1.4rem; min-height: 1.4em; }
.plan-includes { font-weight: 600; font-size: .9rem; margin: 1.4rem 0 .4rem; }
.plan-quota {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .92rem;
  color: #D6E2F5;
  margin: 1.2rem 0 .2rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  background: rgba(32, 212, 255, .08);
  border: 1px solid rgba(32, 212, 255, .22);
}
.plan-quota b { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.plan-featured .plan-quota { background: rgba(32, 212, 255, .16); border-color: rgba(32, 212, 255, .4); }
.plan-list { margin-top: 1.2rem; gap: .55rem; }
.plan-list li { font-size: .92rem; }

.plan-featured {
  position: relative;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(32, 212, 255, .14), transparent 60%),
    linear-gradient(160deg, #10306E, var(--card) 70%);
  border-color: rgba(32, 212, 255, .35);
  box-shadow: 0 24px 60px rgba(10, 30, 74, .55);
}
.plan-featured .checklist li { color: #D6E2F5; }
.plan-flag {
  position: absolute;
  top: -0.85rem;
  right: 1.6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #06323d;
  background: linear-gradient(90deg, #35D3EA, #7DE8FF);
  border-radius: 999px;
  padding: .35rem .8rem;
  box-shadow: 0 6px 18px rgba(32, 212, 255, .45);
  animation: plan-flag-pulse 2.6s ease-in-out infinite;
}
@keyframes plan-flag-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(32, 212, 255, .45); transform: scale(1); }
  50% { box-shadow: 0 6px 26px rgba(32, 212, 255, .75); transform: scale(1.04); }
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display: grid; gap: .8rem; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.4rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { border-color: rgba(32, 212, 255, .35); box-shadow: var(--shadow-card); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #fff;
  padding: 1.1rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: var(--cyan);
  border-radius: 2px;
  transition: transform .22s ease;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); }
.faq-item p { color: var(--muted); padding-bottom: 1.2rem; margin: 0; }
.faq-item[open] p { animation: fade-up .4s ease; }
.faq-item:hover:not([open]) { border-color: rgba(32, 212, 255, .22); transform: translateY(-2px); }
.faq-category {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cyan);
  margin: 1.8rem 0 .2rem;
}
.faq-category:first-child { margin-top: 0; }

/* ── CTA final ───────────────────────────────────────────── */
.cta-final {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 5rem 0;
}
.cta-final h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.cta-final p { color: var(--muted); font-size: 1.15rem; margin-bottom: 2rem; }
.cta-final .hero-note { margin-top: 1.2rem; margin-bottom: 0; }
/* variante clara (fondo blanco con brillos azules del hero) */
.cta-light { color: var(--l-ink); }
.cta-light h2 { color: var(--l-ink); }
.cta-light p { color: var(--l-ink2); }
.cta-light .hero-note { color: var(--soft); }
.cta-light .container { position: relative; z-index: 1; }
.cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

/* ── Formulario de captura de leads (CTA final, fondo claro) ── */
.cta-final .lead-wrap {
  max-width: 34rem;
  margin: 3rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(10, 30, 74, .12);
  text-align: left;
}
.cta-final .lead-intro {
  font-size: .98rem;
  color: var(--l-ink2);
  text-align: center;
  margin-bottom: 1.2rem;
}
.lead-form { display: grid; gap: 1rem; }
.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.lead-field { display: grid; gap: .35rem; }
.lead-field-full { grid-column: 1 / -1; }
.lead-field > span { font-size: .82rem; font-weight: 600; color: var(--l-ink); }
.lead-field > span em { font-weight: 400; font-style: normal; color: var(--soft); }
.lead-field input, .lead-field textarea {
  font: inherit;
  font-size: .95rem;
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(10, 30, 74, .18);
  background: #fff;
  color: var(--l-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lead-field textarea { resize: vertical; min-height: 5.2rem; }
.lead-field input::placeholder, .lead-field textarea::placeholder { color: #9AA9C2; }
.lead-field input:focus, .lead-field textarea:focus {
  outline: none;
  border-color: #1E66FF;
  box-shadow: 0 0 0 3px rgba(30, 102, 255, .18);
}
/* trampa antispam: fuera de pantalla, invisible para personas */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--l-ink2);
  cursor: pointer;
}
.lead-consent input {
  flex: none;
  width: 16px; height: 16px;
  margin-top: .16rem;
  accent-color: #1E66FF;
  cursor: pointer;
}
.lead-consent a { color: #1E66FF; text-decoration: underline; }
.lead-submit { justify-content: center; width: 100%; }
.cta-final .lead-msg {
  min-height: 1.2em;
  font-size: .9rem;
  text-align: center;
  margin: 0;
}
.cta-final .lead-msg.ok { color: #12784F; }
.cta-final .lead-msg.err { color: #C62A2F; }
.cta-final .lead-msg a { color: inherit; text-decoration: underline; }

@media (max-width: 560px) {
  .lead-fields { grid-template-columns: 1fr; }
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: #020817;
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 3.5rem 0 1.8rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
.footer-logo { margin: 0 0 1rem; }
.footer-logo img { width: 38px; height: 38px; }
.footer-logo .wordmark { font-size: 1.3rem; }
.footer-brand p { font-size: .92rem; max-width: 22rem; }
.footer-col h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  padding: .3rem 0;
  transition: color .2s ease, transform .2s ease;
}
.footer-col a:hover { color: #7DE8FF; transform: translateX(4px); }
.footer-loc { font-size: .92rem; color: var(--soft); margin: .3rem 0 0; }
.footer-social { display: flex; gap: .8rem; margin-top: .8rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  color: var(--muted);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a:hover { color: #7DE8FF; border-color: #7DE8FF; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { padding-top: 1.6rem; font-size: .85rem; color: var(--soft); }
.footer-bottom p { margin: 0; }

/* ── Botones flotantes ───────────────────────────────────── */
.fab-stack {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.fab {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab svg { width: 28px; height: 28px; }
.fab-wa {
  background: #25D366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
}
.fab-bot {
  background: linear-gradient(135deg, #0F3FBB, var(--blue));
  box-shadow: 0 8px 24px rgba(30, 102, 255, .55);
}
.fab-bot .ico-close { display: none; }
.fab-bot .ico-chat { animation: fab-nudge 7s ease-in-out infinite; }
@keyframes fab-nudge {
  0%, 88%, 100% { transform: rotate(0); }
  91% { transform: rotate(-12deg) scale(1.1); }
  94% { transform: rotate(9deg); }
  97% { transform: rotate(-4deg); }
}
.fab-bot[aria-expanded="true"] .ico-chat { display: none; }
.fab-bot[aria-expanded="true"] .ico-close { display: block; }

/* ── Chatbot ─────────────────────────────────────────────── */
.chatbot {
  position: fixed;
  right: 1.2rem;
  bottom: 8.6rem;
  z-index: 210;
  width: min(370px, calc(100vw - 2rem));
  max-height: min(560px, calc(100dvh - 10rem));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.chatbot[hidden] { display: none; }

.chatbot-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  background: linear-gradient(120deg, #0F3FBB, var(--blue));
  color: #fff;
}
.chatbot-head strong { display: block; font-size: .95rem; line-height: 1.2; }
.chatbot-head small { color: rgba(255, 255, 255, .7); font-size: .74rem; }
.chatbot-close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
.chatbot-close:hover { background: rgba(255, 255, 255, .25); }
.chatbot-close svg { width: 16px; height: 16px; }

.chatbot-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--bg-2);
  min-height: 220px;
}
.chatbot-log .msg {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.chatbot-log .msg-user {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chatbot-log .msg-bot {
  align-self: flex-start;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: #E6ECF7;
  border-bottom-left-radius: 4px;
}
.chatbot-log .msg-bot a { color: var(--cyan); font-weight: 600; }
.chatbot-log .typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: .75rem .9rem;
}
.chatbot-log .typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soft);
  animation: bounce 1.2s infinite;
}
.chatbot-log .typing i:nth-child(2) { animation-delay: .15s; }
.chatbot-log .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

.chatbot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.chatbot-chips:empty { display: none; }
.chatbot-chips button {
  font: 600 .74rem var(--font);
  color: #9FDCFF;
  background: rgba(30, 102, 255, .14);
  border: 1px solid rgba(30, 102, 255, .4);
  border-radius: 999px;
  padding: .35rem .75rem;
  cursor: pointer;
  transition: background .15s ease;
}
.chatbot-chips button:hover { background: rgba(30, 102, 255, .28); }

.chatbot-form {
  display: flex;
  gap: .5rem;
  padding: .7rem;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.chatbot-form input {
  flex: 1;
  font: 400 .9rem var(--font);
  color: #fff;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .6rem 1rem;
  outline-offset: 0;
}
.chatbot-form input::placeholder { color: var(--soft); }
.chatbot-form input:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.chatbot-send {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.chatbot-send:hover { background: var(--blue-hover); transform: scale(1.06); }
.chatbot-send svg { width: 18px; height: 18px; }

/* ── Animaciones de aparición ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(7px);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1),
    filter .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal.in-view { opacity: 1; transform: none; filter: blur(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .laptop { animation: none; }
  .pulse-dot, .notif-dot { animation: none; }
  .step.in-view .step-num, .step.in-view::after { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Puntos indicadores de los carruseles (solo móvil) ───── */
.carousel-dots { display: none; }
@media (max-width: 768px) {
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
  }
  .carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
  }
  .carousel-dots button.is-active { width: 24px; background: var(--cyan); }
  .light-band .carousel-dots { padding-bottom: .4rem; }
  .light-band .carousel-dots button,
  .section-light .carousel-dots button { background: #C9D4E8; }
  .light-band .carousel-dots button.is-active,
  .section-light .carousel-dots button.is-active { background: var(--blue); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 4rem; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-visual { max-width: 640px; margin-inline: auto; width: 100%; }
  /* en 1 columna el portátil vuelve a su lienzo normal, sin desbordar */
  .macbook-sizer { width: 100%; margin-left: 0; }
  .hero-bars { display: none; }
  .copiloto-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-feat { grid-column: span 2; }
  .secop-grid { grid-template-columns: repeat(2, 1fr); }
  .quien-grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .plan { padding: 1.6rem 1.2rem; }
  /* con 3 columnas en tablet el precio grande se recorta: se reduce para que quepa "/mes" */
  .plan-price .price { font-size: 1.8rem; }

  /* orden móvil/tablet */
  .lb-grid { grid-template-columns: 1fr; }
  .lb-cards { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .ld { font-size: .62rem; }

  .stats-band { grid-template-columns: 1fr; text-align: center; gap: 1.6rem; padding: 2rem 1.6rem; margin-top: -52px; }
  .stats-logo { margin-inline: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; text-align: left; }
  .stats-cta { max-width: none; }
  .feature-row { gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 3.2rem 0; }

  .bento-feat { grid-column: span 1; grid-template-columns: 1fr; }
  .bento-visual { min-height: 120px; }

  /* comparativa: en móvil se muestra "A mano vs. Contratik" (se oculta el asesor) */
  .compare-grid { min-width: 0; grid-template-columns: 1.15fr 1fr 1.1fr; }
  .c-mid { display: none; }
  .c-cell { padding: .8rem .7rem; font-size: .82rem; }
  .c-opt { font-size: .9rem; }
  .c-neg { padding-left: 1.6rem; }
  .c-neg::before { left: .7rem; }
  .c-pos { padding-left: 1.9rem; }
  .c-pos::before { left: .7rem; }

  .nav-actions { display: none; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
    background: rgba(3, 11, 31, .97);
    backdrop-filter: blur(16px);
    padding: 1.2rem 1.5rem 1.8rem;
    border-bottom: 1px solid var(--line);
    transform: translateY(-130%);
    transition: transform .3s ease;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: none; }
  .nav-links > a { padding: .8rem 0; font-size: 1.05rem; }
  .nav-drop-btn { padding: .8rem 0; font-size: 1.05rem; width: 100%; justify-content: space-between; }
  .nav-drop {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 .4rem .8rem;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-item.open .nav-drop { display: block; }
  .nav-item:hover .nav-drop { display: none; }
  .nav-item.open:hover .nav-drop { display: block; }
  .nav-mobile-cta { display: grid; gap: .6rem; margin-top: 1rem; }

  .hero { padding-top: 7.5rem; }
  .hero-proof { gap: .5rem 1.1rem; }
  .hero-proof li { font-size: .8rem; }

  .dash2-charts { grid-template-columns: 1fr; }

  /* Carruseles horizontales: las tarjetas se deslizan en vez de apilarse */
  .cards-3, .cards-4, .steps, .plans, .lb-cards, .bento, .secop-grid, .quien-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: .9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    padding-block: 1rem 1.4rem;
    scroll-padding-inline: 1.25rem;
    justify-content: start;
    align-items: stretch;
  }
  .cards-3::-webkit-scrollbar,
  .cards-4::-webkit-scrollbar,
  .steps::-webkit-scrollbar,
  .plans::-webkit-scrollbar,
  .lb-cards::-webkit-scrollbar,
  .bento::-webkit-scrollbar,
  .secop-grid::-webkit-scrollbar,
  .quien-grid::-webkit-scrollbar { display: none; }
  .cards-3 > *, .cards-4 > *, .steps > *, .plans > *, .lb-cards > *,
  .bento > *, .secop-grid > *, .quien-grid > * { scroll-snap-align: center; }
  .plans { grid-auto-columns: 88%; padding-top: 1.4rem; }
  .plan-price .price { font-size: 2.4rem; }
  /* en el carrusel todos los tiles del bento son uniformes: se oculta el visual
     decorativo de los destacados para que las tarjetas tengan la misma altura */
  .bento { grid-auto-columns: 74%; }
  .bento-feat { grid-column: auto; }
  .bento-feat .bento-visual { display: none; }
  .secop-grid { grid-auto-columns: 66%; }
  .quien-grid { grid-auto-columns: 74%; }

  /* dashboard grande compacto en móvil */
  .ld { font-size: .56rem; }
  .ld-body { grid-template-columns: 1fr; }
  .ld-side { display: none; }
  .ld-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-cols { grid-template-columns: 1fr; }
  .ld-crumb em { display: none; }

  .step::after { display: none; }
  .feature-row, .feature-row-flip { grid-template-columns: 1fr; padding: 2.4rem 0; }
  .feature-row-flip .feature-copy { order: 1; }
  .feature-row-flip .feature-visual { order: 2; }
  .plan-for { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-tech-r { width: 320px; right: -60px; opacity: .25; }
  .tech-left { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; padding-left: 0; }
}

/* ── Consentimiento de cookies ─────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 260;
  max-width: 30rem;
  background: rgba(11, 24, 51, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(32, 212, 255, .22);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2, 8, 24, .55);
  padding: 1.1rem 1.2rem;
  color: #E7EEF9;
  animation: cookie-in .4s cubic-bezier(.22, .61, .36, 1) both;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookie-inner { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: start; }
.cookie-icon { font-size: 1.4rem; line-height: 1; grid-row: span 2; }
.cookie-text { font-size: .86rem; line-height: 1.5; margin: 0; color: #C4D2E8; }
.cookie-text a { color: #57C8FF; text-decoration: underline; }
.cookie-actions { grid-column: 2; display: flex; gap: .6rem; justify-content: flex-end; margin-top: .5rem; }
.cookie-btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  border-radius: 999px; padding: .5rem 1.1rem; border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-reject { background: transparent; color: #B7C6DE; border-color: rgba(157, 178, 212, .35); }
.cookie-reject:hover { border-color: rgba(157, 178, 212, .6); color: #E7EEF9; }
.cookie-accept { background: linear-gradient(90deg, #1E66FF, #20D4FF); color: #041022; }
.cookie-accept:hover { box-shadow: 0 8px 20px rgba(32, 212, 255, .4); }

@media (max-width: 560px) {
  .cookie-banner { left: .8rem; right: .8rem; bottom: .8rem; max-width: none; }
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; }
  /* mientras se decide el consentimiento, se ocultan los flotantes para no taparlos */
  body.cookie-open .fab-stack { display: none; }

  /* Mismo motivo, arriba del todo: con el hero en pantalla los flotantes
     caían encima de los chips de confianza ("Decisiones rápidas" quedaba
     detrás del botón de WhatsApp). Se ocultan mientras no se ha bajado. El
     hero no tiene alto fijo, así que no se arregla con padding: los chips
     quedan donde los deja el flujo del contenido.
     `at-top` la pone app.js — si el script no carga, la clase no existe y
     los botones se ven, que es el fallo seguro. */
  .fab-stack {
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  body.at-top .fab-stack {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-stack { transition: none; }
}

/* ── Página Nosotros: sin hero oscuro arriba del header, así que el
   header no puede depender del scroll para tener fondo (queda invisible
   sobre la primera sección clara). Fondo sólido siempre + espacio para
   no tapar el contenido bajo el header fijo. ── */
body.no-hero .site-header {
  background: rgba(3, 11, 31, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(2, 8, 24, .45);
}
body.no-hero main > section:first-child { padding-top: calc(72px + 3rem); }

/* ── Página Nosotros: eyebrow centrado ─────────────────────── */
.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cyan);
  text-align: center;
  margin: 0 0 .7rem;
}

/* ── Página Nosotros: tarjetas del equipo (foto vertical) ──── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 52rem;
  margin: 0 auto 1.75rem;
}
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-card);
}

/* Iconos sociales "sujetos" al borde derecho de la tarjeta, centrados verticalmente */
.team-social {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.team-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 8px 18px rgba(2, 8, 24, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team-social-btn svg { width: 18px; height: 18px; }
.team-social-btn:hover { transform: scale(1.08); }

/* Colores reales de cada app, como en sus íconos de celular */
.team-social-ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.team-social-ig:hover { box-shadow: 0 10px 22px rgba(214, 36, 159, .4); }
.team-social-li { background: #0a66c2; }
.team-social-li:hover { box-shadow: 0 10px 22px rgba(10, 102, 194, .45); }
@media (max-width: 640px) {
  .team-social { right: -10px; gap: .5rem; }
  .team-social-btn { width: 32px; height: 32px; border-radius: 8px; }
  .team-social-btn svg { width: 16px; height: 16px; }
}
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.4rem;
  background: var(--card-2);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-badge {
  display: inline-block;
  background: rgba(30, 102, 255, .15);
  color: var(--cyan);
  border: 1px solid rgba(30, 102, 255, .3);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .7rem;
}
.team-info h3 { color: #fff; font-size: 1.25rem; margin: 0 0 .3rem; }
.team-tagline {
  color: var(--cyan);
  font-size: .92rem;
  font-style: italic;
  margin: 0 0 .7rem;
}
.team-info p { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* ── Equipo (fila secundaria) ──────────────────────────────────
   Tarjetas más pequeñas para el resto del equipo: mismo lenguaje
   visual que .team-card pero en 3 columnas y sin foto — todavía no
   hay retratos de estas personas, y un avatar de iniciales se lee
   como decisión de diseño, no como imagen rota. Cuando lleguen las
   fotos, se reemplaza .team-avatar por el mismo .team-photo de arriba.
   ────────────────────────────────────────────────────────────── */
.team-subhead {
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2.6rem 0 1.4rem;
}
.team-grid-sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 58rem;
  margin: 0 auto 1.75rem;
}
.team-card-sm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.15rem;
  box-shadow: var(--shadow-card);
}
.team-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: .95rem;
  background: linear-gradient(135deg, #0F3FBB, var(--blue));
  color: #fff;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(30, 102, 255, .35);
}
.team-card-sm .team-badge { margin-bottom: .55rem; }
.team-card-sm h3 {
  color: #fff;
  font-size: 1.02rem;
  margin: 0 0 .25rem;
  line-height: 1.3;
}
.team-card-sm .team-tagline { font-size: .85rem; margin: 0 0 .6rem; }
.team-card-sm p { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: 0; }

.team-more { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.team-more summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  font-weight: 700;
  color: var(--cyan);
}
.team-more summary::-webkit-details-marker { display: none; }
.team-more-icon {
  flex: none;
  position: relative;
  width: 14px; height: 14px;
}
.team-more-icon::before, .team-more-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: var(--cyan);
  border-radius: 2px;
  transition: transform .22s ease;
}
.team-more-icon::before { width: 10px; height: 2px; }
.team-more-icon::after { width: 2px; height: 10px; }
.team-more[open] .team-more-icon::after { transform: rotate(90deg); }
.team-more[open] summary { margin-bottom: .6rem; }
.team-more p { animation: fade-up .4s ease; }
.team-more-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--soft);
  margin-bottom: .3rem;
}

/* ── Página Nosotros: barra de misión/visión/valores ───────── */
/* El panel se despegaba muy poco del fondo de la sección: mismo tono casi
   exacto (--card #0B1833 sobre --bg #030B1F), borde al 8% y sin sombra, así
   que se leía como texto suelto en vez de una tarjeta. Se levanta el fondo,
   se refuerza el borde y se le da la misma sombra que el resto de tarjetas
   del sitio. */
.principles-bar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1.5rem;
  max-width: 70rem;
  margin: 0 auto;
  background: linear-gradient(160deg, #12244A 0%, #0C1A38 60%, #0A1730 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
/* Cada bloque con su propia superficie: sin esto los tres se leían como
   columnas de texto flotando, sin límite entre uno y otro. */
.principle-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  padding: 1.25rem 1.15rem;
}
.principle-item .card-icon { margin-bottom: .8rem; }
.principle-item p { margin: 0; font-size: .88rem; color: #D3DCEC; line-height: 1.55; }
/* El primer ítem ("Creemos en...") es la afirmación ancla: icono + texto en
   fila, como en la referencia, para diferenciarlo visualmente de los otros
   3 (Misión/Visión/Valores) que son bloques verticales compactos. */
.principle-item.lead {
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  /* La afirmación ancla se distingue por jerarquía, no por caja: fondo
     transparente y sin borde, para que las cajas de Misión/Visión/Valores
     no compitan con ella. El divisor reemplaza al borde derecho, que al 8%
     no se veía. */
  background: none;
  border: 0;
  padding: 0 1.7rem 0 0;
  position: relative;
}
.principle-item.lead::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.principle-item.lead .card-icon { margin-bottom: 0; }
.principle-item.lead p { color: #fff; font-size: 1.02rem; line-height: 1.5; }
.p-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan);
  margin: 0 0 .3rem;
}

@media (max-width: 980px) {
  .principles-bar { grid-template-columns: 1fr; gap: 1.1rem; }
  /* Apilado: el divisor pasa de vertical (derecha) a horizontal (abajo). */
  .principle-item.lead { padding: 0 0 1.5rem; }
  .principle-item.lead::after {
    top: auto; bottom: 0; left: 8%; right: 8%;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  }
}
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr; max-width: 28rem; }
  .team-grid-sm { grid-template-columns: 1fr; max-width: 28rem; }
}
@media (max-width: 560px) {
  .principle-item.lead { flex-direction: column; align-items: flex-start; gap: .8rem; }
}
@media (max-width: 560px) {
  .principles-bar { grid-template-columns: 1fr; padding: 1.6rem; }
}

/* ── Página Nosotros: conecta con nosotros ─────────────────── */
.connect-panel {
  max-width: 40rem;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(15, 31, 61, .85), rgba(7, 22, 47, .92));
  border: 1px solid rgba(32, 212, 255, .22);
  box-shadow: 0 0 50px rgba(30, 102, 255, .3), 0 20px 60px rgba(2, 8, 24, .5);
  padding: 3rem 2rem;
}
.connect-icons { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.connect-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}
.connect-icon-circle {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.connect-icon-circle svg { width: 30px; height: 30px; }
.connect-icon span:last-child { color: var(--muted); font-weight: 600; font-size: .85rem; transition: color .3s ease; }
.connect-icon:hover .connect-icon-circle { transform: translateY(-8px) scale(1.08); }
.connect-icon:hover span:last-child { color: #fff; }

/* Colores reales de cada red, visibles por defecto (no solo al pasar el mouse) */
.connect-icon.facebook .connect-icon-circle { background: #1877F2; border-color: transparent; box-shadow: 0 6px 20px rgba(24, 119, 242, .35); }
.connect-icon.instagram .connect-icon-circle { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: transparent; box-shadow: 0 6px 20px rgba(214, 36, 159, .35); }
.connect-icon.whatsapp .connect-icon-circle { background: #25D366; border-color: transparent; box-shadow: 0 6px 20px rgba(37, 211, 102, .35); }
.connect-icon.facebook:hover .connect-icon-circle { box-shadow: 0 0 26px rgba(24, 119, 242, .6); }
.connect-icon.instagram:hover .connect-icon-circle { box-shadow: 0 0 26px rgba(214, 36, 159, .6); }
.connect-icon.whatsapp:hover .connect-icon-circle { box-shadow: 0 0 26px rgba(37, 211, 102, .6); }

@media (max-width: 560px) {
  .connect-panel { padding: 2.2rem 1.4rem; }
  .connect-icons { gap: 1.8rem; }
  .connect-icon-circle { width: 66px; height: 66px; }
}

/* ── Página Precios: tarjeta de decisión (slider + comparativa) ──
   Todo dentro de un panel de cristal elevado, con el mismo lenguaje
   visual (halos cian, gradiente de marca) que el resto del sitio. */
.plan-decision-card {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem) clamp(2rem, 4vw, 2.8rem);
  border-radius: 22px;
  background:
    radial-gradient(560px 240px at 12% -12%, rgba(32, 212, 255, .12), transparent 62%),
    linear-gradient(165deg, rgba(17, 34, 66, .7), rgba(7, 22, 47, .5));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px rgba(2, 8, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── selector de plan según necesidad ── */
.plan-picker { max-width: 34rem; margin: 0 auto; text-align: center; }
.plan-picker label { display: block; color: #fff; font-weight: 600; margin-bottom: 1.1rem; }
.plan-picker label b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.plan-picker input[type="range"] {
  --pct: 33%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan) var(--pct), rgba(255, 255, 255, .12) var(--pct));
  outline: none;
  cursor: pointer;
}
.plan-picker input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, #1E66FF, #20D4FF);
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 0 0 6px rgba(32, 212, 255, .16), 0 4px 14px rgba(2, 8, 24, .55);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-picker input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 9px rgba(32, 212, 255, .22), 0 4px 14px rgba(2, 8, 24, .55);
}
.plan-picker input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  background: linear-gradient(135deg, #1E66FF, #20D4FF);
  box-shadow: 0 0 0 6px rgba(32, 212, 255, .16), 0 4px 14px rgba(2, 8, 24, .55);
  cursor: pointer;
}
.plan-picker-zones {
  display: flex;
  justify-content: space-between;
  margin-top: .65rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--soft);
}
.plan-picker-zones span { flex: 1; text-align: center; }
.plan-picker-zones span:first-child { text-align: left; }
.plan-picker-zones span:last-child { text-align: right; }
.plan-picker-zones i { display: block; font-style: normal; opacity: .55; font-weight: 500; margin-top: .1rem; }
.plan-picker-hint { color: var(--muted); font-size: .95rem; margin: 1.3rem 0 0; }
.plan-picker-hint b { color: #fff; }

/* ── tabla comparativa: columna recomendada animada ── */
.plans-compare-wrap { overflow-x: auto; margin-top: 2.6rem; }
.plans-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  min-width: 640px;
  max-width: 56rem;
  margin: 0 auto;
  align-items: stretch;
}
/* insignia flotante: se desliza a la columna recomendada (JS mueve `left`) */
.pc-flag {
  position: absolute;
  top: -.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #06323d;
  background: linear-gradient(90deg, #35D3EA, #7DE8FF);
  border-radius: 999px;
  padding: .32rem .75rem;
  box-shadow: 0 6px 18px rgba(32, 212, 255, .45);
  animation: plan-flag-pulse 2.6s ease-in-out infinite;
  transition: left .45s cubic-bezier(.65, 0, .35, 1);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.pc-cell {
  padding: 1rem 1.1rem;
  font-size: .92rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  transition: background .35s ease, border-color .35s ease;
}
.pc-label { font-weight: 700; color: #fff; }
.pc-head-label { border-bottom: 2px solid transparent; }
.pc-cell[data-plan] { justify-content: center; text-align: center; }
.plans-compare > .pc-cell:not(.pc-opt):not(.pc-last-row):hover { background: rgba(255, 255, 255, .025); }
.pc-opt {
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  justify-content: center;
  border-bottom: 2px solid var(--line);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.pc-yes, .pc-no { position: relative; }
.pc-yes::before {
  content: "";
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>') center/56% no-repeat,
    linear-gradient(135deg, #17D9A0, #0EA975);
  box-shadow: 0 2px 8px rgba(16, 185, 129, .35);
}
.pc-no::before {
  content: "";
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.pc-no::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .5em; height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%);
}
/* columna recomendada: se mueve con el slider */
.pc-cell[data-plan].is-recommended {
  background: linear-gradient(180deg, rgba(30, 102, 255, .18), rgba(30, 102, 255, .07));
  border-left: 1px solid rgba(32, 212, 255, .35);
  border-right: 1px solid rgba(32, 212, 255, .35);
}
.pc-opt.is-recommended {
  background: linear-gradient(180deg, #1B4FD8, #1E66FF);
  color: #fff;
  border-bottom-color: transparent;
  border-radius: 14px 14px 0 0;
}
.pc-last-row.is-recommended {
  border-radius: 0 0 14px 14px;
  border-bottom: 1px solid rgba(32, 212, 255, .35);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
/* destello breve cuando cambia la columna recomendada (clase que agrega/quita el JS) */
.pc-opt.pc-flash { animation: pc-flash-sweep .7s ease; }
@keyframes pc-flash-sweep {
  0%   { box-shadow: 0 0 0 0 rgba(125, 232, 255, .55); }
  60%  { box-shadow: 0 0 0 10px rgba(125, 232, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 232, 255, 0); }
}

/* ── CTA dinámico bajo la comparativa ── */
.pc-cta-row { text-align: center; margin-top: 2.4rem; }
.pc-cta-row .btn svg { width: 18px; height: 18px; }
.pc-cta-note { margin-top: .75rem; font-size: .82rem; color: var(--soft); }

@media (max-width: 560px) {
  .plan-decision-card { border-radius: 18px; }
  .plan-picker-zones i { display: none; }
}

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