/* =========================================================
   ContaPyme® — Landing Módulo de Nómina
   Estructura: HTML semántico + CSS + JS separados
   ========================================================= */

:root {
  --blue:        #00AAF8;
  --blue-bright: #00BFFF;
  --blue-pale:   #BCDDFF;
  --blue-500:    #007BFF;
  --blue-600:    #004EA6;
  --blue-700:    #003787;

  --navy:     #1B1E35;
  --gray-700: #4F505C;
  --gray-500: #939397;
  --gray-300: #C9D2E0;
  --gray-200: #E4E8F2;
  --gray-100: #EEF2F7;
  --gray-50:  #F9FAFC;
  --white:    #FFFFFF;

  --success:      #5CBA35;
  --success-deep: #008C42;
  --danger:       #D64545;
  --warn:         #E8A33D;

  --font-display: 'Open Sans', system-ui, sans-serif;
  --font-body:    'Open Sans', system-ui, sans-serif;

  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(27,30,53,.06), 0 1px 3px rgba(27,30,53,.08);
  --shadow-md: 0 4px 12px rgba(27,30,53,.08), 0 2px 4px rgba(27,30,53,.06);
  --shadow-lg: 0 12px 32px rgba(27,30,53,.12);
  --shadow-blue: 0 10px 28px rgba(0,123,255,.30);

  --gradient-brand: linear-gradient(135deg,#00BFFF 0%,#00AAF8 45%,#007BFF 100%);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; font-family: var(--font-body); color: var(--gray-700);
  background: var(--white); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { color: var(--blue-500); text-decoration: none; }
a:hover { color: var(--blue-600); }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
[id] { scroll-margin-top: 96px; }

/* ---------- Iconos (SVG mask inline, trazo geométrico) ---------- */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; }
.ic-check   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ic-check-c { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.ic-shield  { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ic-clock   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.ic-play    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.ic-eye     { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E"); }
.ic-arrow   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-chev    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ic-loop    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
.ic-refresh { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
.ic-alert   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 9v5M12 17.5v.5'/%3E%3C/svg%3E"); }
.ic-hand    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v7M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 0 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v7M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 0 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8v-1'/%3E%3C/svg%3E"); }
.ic-copy    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M15 5H5a2 2 0 0 0-2 2v10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M15 5H5a2 2 0 0 0-2 2v10'/%3E%3C/svg%3E"); }
.ic-scale   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M6 8l-3 6h6L6 8zM18 8l-3 6h6l-3-6zM6 8l6-2 6 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M6 8l-3 6h6L6 8zM18 8l-3 6h6l-3-6zM6 8l6-2 6 2'/%3E%3C/svg%3E"); }
.ic-search  { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.ic-bolt    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 2 5 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 2 5 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E"); }
.ic-book    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4V4z'/%3E%3Cpath d='M20 4h-4a3 3 0 0 0-2 1v15a2.5 2.5 0 0 1 2.5-2.5H20V4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4V4z'/%3E%3Cpath d='M20 4h-4a3 3 0 0 0-2 1v15a2.5 2.5 0 0 1 2.5-2.5H20V4z'/%3E%3C/svg%3E"); }
.ic-doc     { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.ic-bank    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v9M19 10v9M3 20h18M9 20v-6h6v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10 12 4l9 6M5 10v9M19 10v9M3 20h18M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.ic-pie     { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-9V3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9h-9V3z'/%3E%3C/svg%3E"); }
.ic-chart   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.ic-users   { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M17 5.5a3.5 3.5 0 0 1 0 7M18 20a6.6 6.6 0 0 0-2-4.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M17 5.5a3.5 3.5 0 0 1 0 7M18 20a6.6 6.6 0 0 0-2-4.7'/%3E%3C/svg%3E"); }
.ic-cal     { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-sun     { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19'/%3E%3C/svg%3E"); }
.ic-link    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }
.ic-bulb    { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 3.5 10.9c-.4.3-.5.7-.5 1.1v1H9v-1c0-.4-.1-.8-.5-1.1A6 6 0 0 1 12 3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 1 3.5 10.9c-.4.3-.5.7-.5 1.1v1H9v-1c0-.4-.1-.8-.5-1.1A6 6 0 0 1 12 3z'/%3E%3C/svg%3E"); }
.ic-briefcase { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E"); }

/* ---------- Layout ---------- */
.container { max-width: 1400px; width: 90%; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 1400px; width: 90%;}
.container--slim { max-width: 1400px; width: 90%; }
.section { padding: 84px 0; }
.section--white { background: #fff; }
.section--gray { background: var(--gray-50); }
.section__head { text-align: center; max-width: 90%; margin: 0 auto 48px; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .09em; text-transform: uppercase; color: var(--blue-500); }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.14; color: var(--navy); margin-top: 12px; letter-spacing: -.01em; }
.lead { font-size: 17px; line-height: 1.6; color: var(--gray-700); margin-top: 14px; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 14px 24px;
  border-radius: var(--radius-pill); border: none; cursor: pointer; text-align: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn--primary { background: var(--blue-500); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--blue-600); box-shadow: 0 10px 28px rgba(0,0,0,.25); font-size: 16.5px; padding: 15px 26px; }
.btn--white:hover { color: var(--blue-600); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn--sm { font-size: 15px; padding: 11px 22px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #1bbcfb; }
.header-inner { padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 48px; width: auto; }
.brand__badge { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; background: var(--gradient-brand); padding: 4px 11px; border-radius: var(--radius-pill); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; }
.nav a:hover { color: var(--blue-500); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px; padding: 0; background: transparent; border: none;
  cursor: pointer; z-index: 60; outline: none;
}
.nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.nav-toggle span {
  display: block; width: 100%; height: 3px; background: #fff; border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 54;
}
.nav-overlay.is-open { display: block; }


/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: #2CA3F1; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; }
.hero__grid { position: relative; padding: 58px 0 66px; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-areas: "lead media" "foot media"; gap: 30px 44px; align-items: start; }
.hero__lead { grid-area: lead; align-self: center; min-width: 0; }
.hero__media { grid-area: media; align-self: center; min-width: 0; }
.hero__foot { grid-area: foot; align-self: end; }
.badge-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: .07em; color: var(--blue-500);
  background: #fff; padding: 7px 14px; border-radius: var(--radius-pill); }
.badge-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(92,186,53,.3); }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: 37px; line-height: 1.05; letter-spacing: -.015em; color: #fff; margin-top: 18px; }
.hero__accent { color: var(--blue-700); }
.hero__desc { font-size: 18px; line-height: 1.55; color: #fff; margin-top: 16px; max-width: 480px; }
.hero__ctas { display: grid; grid-template-columns: minmax(0, max-content); gap: 13px; margin-top: 26px; }
.hero__ctas .btn { width: 100%; padding: 15px 26px; font-size: 15px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 0; }
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; }
.hero__trust .ic { width: 16px; height: 16px; color: #fff; }
.hero__media { position: relative; }
.hero__glow { position: absolute; inset: -14px -14px auto auto; width: 60%; height: 50%; background: var(--gradient-brand); border-radius: var(--radius-xl); opacity: .22; filter: blur(6px); }
.cpwin-scale { margin: 0 auto; }
#demo-win { zoom: .72; }

/* ---------- Ventana ContaPyme (demo hero) ---------- */
.cpwin { position: relative; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); border: 1px solid #C7CFDA; }
.cpwin__bar { display: flex; align-items: center; gap: 7px; padding: 7px 11px; background: linear-gradient(90deg,#2B7DE0,#1A5FB4); color: #fff; }
.cpwin__bar img { width: 15px; height: 15px; object-fit: contain; background: #fff; border-radius: 3px; padding: 1px; }
.cpwin__bar span:nth-child(2) { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpwin__ctl { margin-left: auto; display: flex; align-items: center; gap: 11px; font-size: 11px; opacity: .9; }
.cpwin__ctl i { width: 9px; height: 2px; background: #fff; display: block; }
.cpwin__ctl b { width: 9px; height: 9px; border: 1.5px solid #fff; border-radius: 1px; display: block; }
.cpwin__ribbon { display: flex; align-items: center; gap: 13px; padding: 5px 11px; background: #EEF3FA; border-bottom: 1px solid #DCE3EE; font-size: 10px; color: #66707f; white-space: nowrap; overflow: hidden; }
.cpwin__ribbon .on { color: #1A5FB4; font-weight: 700; border-bottom: 2px solid #1A5FB4; padding-bottom: 4px; }
.cpwin__toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #FBFCFE; border-bottom: 1px solid #E7ECF3; }
.cpwin__period { font-size: 11px; color: var(--gray-500); }
.cpwin__btn { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; color: #fff;
  background: var(--blue-500); padding: 6px 14px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,123,255,.35); position: relative; }
.cpwin__btn.is-pressed { background: var(--blue-600); transform: translateY(1px); }
.cpwin__btn.is-hint::after { content: ""; position: absolute; inset: -4px; border-radius: 9px; border: 2px solid rgba(0,191,255,.7); animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.95); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }

.pgrid { font-size: 10.5px; }
.pgrid__head, .pgrid__row, .pgrid__total { display: grid; grid-template-columns: .34fr 1.45fr .44fr 1fr .9fr 1fr; }
.pgrid__head { background: #2F6FC0; color: #fff; font-weight: 700; font-size: 9.5px; }
.pgrid__head span { padding: 5px 7px; text-align: right; }
.pgrid__head span:first-child, .pgrid__head span:nth-child(2) { text-align: left; }
.pgrid__row { border-bottom: 1px solid #F0F2F5; }
.pgrid__row:nth-child(even) { background: #FAFBFC; }
.pgrid__row span { padding: 5px 7px; text-align: right; color: var(--navy); }
.pgrid__row span:first-child, .pgrid__row span:nth-child(2) { text-align: left; }
.pgrid__row .v { opacity: 0; transition: opacity .25s ease; }
.pgrid__row.is-on { background: #EAF3EC !important; }
.pgrid__row.is-on .v { opacity: 1; }
.pgrid__row .neg { color: var(--danger); }
.pgrid__total { background: #EAF1FB; border-top: 2px solid #C7D8F0; font-weight: 700; color: var(--blue-700); }
.pgrid__total span { padding: 7px 9px; text-align: right; }
.pgrid__total span:nth-child(2) { text-align: left; }

.autos { padding: 11px 12px 13px; background: #F7FAFF; border-top: 1px solid #E7ECF3; }
.autos__t { font-size: 10.5px; color: var(--gray-500); margin-bottom: 8px; }
.autos__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.auto { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--navy);
  opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.auto.is-on { opacity: 1; transform: none; }
.auto .ic { width: 14px; height: 14px; color: var(--success-deep); background: currentColor; }

/* ---------- Banda ---------- */
.band { background: var(--navy); }
.band__slider { position: relative; }
.band__grid { padding: 24px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.band__item { display: flex; align-items: center; gap: 13px; justify-content: center; }
.band__item .ic { width: 28px; height: 28px; color: var(--blue); }
.band__item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; line-height: 1.1; }
.band__item span { font-size: 13px; color: rgba(255,255,255,.65); }
.band__nav { display: none; }

@media (max-width: 1024px) {
  .band__grid {
    display: flex; grid-template-columns: none; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none; padding: 22px 0;
  }
  .band__grid::-webkit-scrollbar { display: none; }
  .band__item { flex: 0 0 100%; scroll-snap-align: center; justify-content: center; text-align: left;
    padding: 0 44px; box-sizing: border-box; }
  .band__nav {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%; flex: none; z-index: 2;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
    cursor: pointer; padding: 0; transition: background .18s ease; outline: none;
  }
  .band__nav:hover { background: rgba(255,255,255,.22); }
  .band__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .band__nav .ic { width: 16px; height: 16px; color: #fff; }
  .band__nav--prev { left: 0; }
  .band__nav--prev .ic { transform: rotate(180deg); }
  .band__nav--next { right: 0; }
}

/* ---------- Dolores ---------- */
.pains { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.pain { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px 22px; transition: transform .2s, box-shadow .2s; }
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pain .ic { width: 26px; height: 26px; color: var(--blue-500); margin-bottom: 12px; }
.pain h3 { font-family: var(--font-display); font-weight: 700; font-size: 17.5px; color: var(--navy); margin-bottom: 7px; }
.pain p { font-size: 14px; line-height: 1.55; }
.sol__was { display: block; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--gray-200);
  font-size: 12.5px; line-height: 1.4; color: var(--gray-700); font-style: italic; }
.pains__close { text-align: center; font-size: 16px; color: var(--gray-500); margin-top: 34px; }
.pains__close strong { color: var(--navy); }

/* ---------- Flujo ---------- */
.flow { max-width: 1000px; margin: 0 auto; }
.flow__hub { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.flow__circle { position: relative; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px;
  border-radius: 50%; background: var(--gradient-brand); box-shadow: var(--shadow-blue); animation: hubPulse 2.4s ease-in-out infinite; }
.flow__circle .ic { width: 34px; height: 34px; color: #fff; }
@keyframes hubPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.flow__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(0,170,248,.5); animation: ringOut 2.4s ease-out infinite; }
@keyframes ringOut { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.flow__pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--gradient-brand); padding: 8px 20px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-blue); }
.flow__svg { width: 100%; height: 108px; display: block; margin-top: 2px; }
.flow__base { stroke: var(--blue-pale); stroke-width: 2; fill: none; }
.flow__dash { stroke: var(--blue-500); stroke-width: 2; fill: none; stroke-dasharray: 2 10; animation: dashMove 1.4s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -48; } }
.flow__dot { fill: var(--blue-500); }
.flow__cards { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.fcard { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 16px 13px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fcard .ic { width: 24px; height: 24px; color: var(--blue-600); margin-bottom: 9px; }
.fcard h4 { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--navy); margin-bottom: 5px; line-height: 1.2; }
.fcard p { font-size: 11.5px; line-height: 1.45; color: var(--gray-700); }

.note-box { max-width: 90%; margin: 34px auto 0; display: flex; align-items: flex-start; gap: 13px;
  background: var(--blue-pale); border: 1px solid #A9D3FF; border-radius: var(--radius-lg); padding: 17px 22px; }
.note-box__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; flex: none; box-shadow: var(--shadow-sm); }
.note-box__ico .ic { width: 19px; height: 19px; color: var(--blue-600); }
.note-box p { font-size: 15px; line-height: 1.6; color: var(--gray-700); }
.note-box strong { color: var(--navy); }

/* ---------- Pasos / producto ---------- */
.steps__tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 28px; max-width: 780px; margin-left: auto; margin-right: auto; }
.stab { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--gray-200);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; text-align: left; transition: border-color .18s, background .18s, box-shadow .18s; }
.stab b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.stab span { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--navy); }
.stab:hover { border-color: var(--blue-pale); }
.stab.is-active { border-color: var(--blue-500); background: var(--blue-pale); box-shadow: var(--shadow-sm); }
.stab.is-active b { background: var(--blue-500); color: #fff; }
.stab.is-active span { color: var(--blue-600); }
.steps__tabswrap { display: contents; }
.steps__navbtn { display: none; }

.spanel { display: none; grid-template-columns: .8fr 1.2fr; gap: 38px; align-items: center; }
.spanel.is-active { display: grid; animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.spanel__txt h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.18; color: var(--navy); margin-bottom: 11px; }
.spanel__txt p { font-size: 15px; line-height: 1.62; margin-bottom: 16px; }
.tick { display: flex; flex-direction: column; gap: 9px; }
.tick li { position: relative; padding-left: 27px; font-size: 14.5px; line-height: 1.5; color: var(--navy); }
.tick li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(92,186,53,.15) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008C42' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.tick--sm li { font-size: 13.5px; }
.tick--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.new { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--gradient-brand); padding: 2px 8px; border-radius: var(--radius-pill); margin-right: 6px; vertical-align: 1px; }

/* mockups de producto */
.mock { background: #fff; border: 1px solid #D7DEE8; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); font-size: 12px; }
.mock__bar { padding: 9px 13px; background: linear-gradient(90deg,#2B7DE0,#1A5FB4); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.mock__row { display: grid; grid-template-columns: 1.5fr .8fr 1fr; border-bottom: 1px solid #F0F2F5; }
.mock__row span { padding: 8px 12px; color: var(--navy); }
.mock__row--h { background: #EAF3EC; font-weight: 700; }
.mock__row--h span { color: #155724; font-size: 11px; padding: 7px 12px; }
.mock__row:nth-child(even) { background: #FAFBFC; }
.mock__row--tot { background: #EAF1FB !important; font-weight: 700; }
.mock__row--tot span { color: var(--blue-700); }
.mock__row .num { text-align: right; font-family: var(--font-display); font-weight: 700; }
.mock__row .num--r { color: var(--danger); }
.mock__row .num--b { color: var(--blue-600); }
.tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.tag--g { background: rgba(92,186,53,.15); color: var(--success-deep); }
.tag--r { background: rgba(214,69,69,.12); color: var(--danger); }
.tag--b { background: rgba(0,123,255,.12); color: var(--blue-600); }
.dotlab { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.dotlab i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dotlab--g i { background: var(--success); }
.dotlab--y i { background: var(--warn); }
.dotlab--r i { background: var(--danger); }
.dotlab--r { color: var(--danger); }
.mock__foot { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--gray-50); border-top: 1px solid var(--gray-100); font-size: 11.5px; color: var(--gray-500); }
.mock__foot .ic { width: 14px; height: 14px; color: var(--blue-500); }
.mock__foot--g { background: #EAF3EC; color: var(--success-deep); font-weight: 600; }
.mock__foot--g .ic { color: var(--success-deep); }
.mock__done { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid #F0F2F5; }
.mock__done .ic { width: 20px; height: 20px; color: var(--success-deep); flex: none; }
.mock__done b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--navy); }
.mock__done span { font-size: 11.5px; color: var(--gray-500); }
.mock__split { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gray-100); border-bottom: 1px solid #F0F2F5; }
.mock__split > div { background: #fff; padding: 11px 12px; text-align: center; }
.mock__split span { display: block; font-size: 10.5px; color: var(--gray-500); margin-bottom: 3px; }
.mock__split b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy); }
.mock__split b.up { color: var(--success-deep); }
.steps__cta { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- Novedades ---------- */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.news__card { background: #fff; border: 1.5px solid var(--blue-pale); border-radius: var(--radius-xl); padding: 28px 26px; box-shadow: var(--shadow-sm); }
.news__navwrap { display: contents; }
.news__navbtn { display: none; }
.ntab { display: none; }
.news__tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; background: var(--gradient-brand); padding: 5px 12px; border-radius: var(--radius-pill); }
.news__card h3 { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--navy); margin: 13px 0 9px; }
.news__card > p { font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.news__foot { font-size: 12px; color: var(--gray-500); margin-top: 14px; }
.vac { margin-top: 18px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 15px 16px; }
.vac__row { display: grid; grid-template-columns: 1fr 1.1fr auto; align-items: center; gap: 12px; padding: 7px 0; }
.vac__row span:first-child { font-size: 13px; color: var(--navy); font-weight: 600; }
.vac__bar { height: 8px; border-radius: 4px; background: var(--gray-200); overflow: hidden; }
.vac__bar i { display: block; height: 100%; border-radius: 4px; }
.vac__row b { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--navy); }
.vac__note { font-size: 12px; color: var(--gray-500); margin-top: 8px; border-top: 1px solid var(--gray-200); padding-top: 9px; }
.ages { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px; }
.age { border-radius: var(--radius-md); padding: 13px 12px; text-align: center; border: 1px solid; }
.age b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.age span { font-size: 11.5px; }
.age--g { background: rgba(92,186,53,.1); border-color: rgba(92,186,53,.35); color: var(--success-deep); }
.age--y { background: rgba(232,163,61,.12); border-color: rgba(232,163,61,.4); color: #9A6510; }
.age--r { background: rgba(214,69,69,.09); border-color: rgba(214,69,69,.32); color: var(--danger); }

/* ---------- Acordeón ---------- */
.acc { display: flex; flex-direction: column; gap: 11px; }
.acc__item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.acc__h { width: 100%; display: flex; align-items: center; gap: 13px; padding: 17px 20px; background: none; border: none;
  cursor: pointer; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--navy); }
.acc__h > span { flex: 1; }
.acc__h .ic:first-child { width: 22px; height: 22px; color: var(--blue-500); }
.acc__h .ic-chev { width: 18px; height: 18px; color: var(--gray-500); transition: transform .25s ease; }
.acc__item.is-open .acc__h { color: var(--blue-600); }
.acc__item.is-open .acc__h .ic-chev { transform: rotate(180deg); }
.acc__b { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.acc__item.is-open .acc__b { max-height: 460px; }
.acc__b > ul, .acc__b > p { padding: 0 20px 20px; }
.acc__b > p { font-size: 15px; line-height: 1.62; }
.acc__note { padding: 0 20px 18px; font-size: 12.5px; color: var(--gray-500); }

/* ---------- Explorador de funcionalidades (maestro-detalle) ---------- */
.feat { display: grid; grid-template-columns: 296px 1fr; gap: 22px; align-items: stretch; }
.feat__nav { display: flex; flex-direction: column; gap: 6px; }
.ftab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--navy);
  transition: background .18s, border-color .18s, box-shadow .18s; }
.ftab:hover { border-color: var(--blue-pale); background: var(--gray-50); }
.ftab > span { flex: 1; line-height: 1.2; }
.ftab .ic { width: 20px; height: 20px; color: var(--blue-600); flex: none; }
.ftab b { flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--gray-100); color: var(--gray-700); font-size: 11.5px;
  display: inline-flex; align-items: center; justify-content: center; }
.ftab.is-active { background: var(--blue-pale); border-color: var(--blue-500); box-shadow: var(--shadow-sm); color: var(--blue-600); }
.ftab.is-active b { background: var(--blue-500); color: #fff; }
.feat__panels { position: relative; background: var(--gray-50); height: 290px; margin: auto 0; border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl); padding: 28px 30px; overflow: hidden; }
.fpanel { display: none; }
.fpanel.is-active { display: block; animation: fadeUp .34s ease both; }
.fpanel h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--navy); margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.fpanel h3 .ic { width: 24px; height: 24px; color: var(--blue-500); }
.fpanel__note { margin-top: 18px; font-size: 12.5px; color: var(--gray-700); }

.feat__navwrap { display: contents; }
.feat__navbtn { display: none; }

@media (max-width: 1024px) {
  .feat { grid-template-columns: 1fr; gap: 14px; }

  .feat__navwrap { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; column-gap: 6px; }
  .feat__navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; outline: none;
    background: var(--gray-100); border: 1px solid var(--gray-200); transition: background .18s ease;
  }
  .feat__navbtn:hover { background: var(--gray-200); }
  .feat__navbtn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
  .feat__navbtn .ic { width: 15px; height: 15px; color: var(--blue-600); }
  .feat__navbtn--prev .ic { transform: rotate(180deg); }

  .feat__nav { grid-column: 2; flex-direction: row; }
  .ftab { display: none; }
  .ftab.is-active { display: flex; width: auto; flex: 1 1 auto; justify-content: center; font-size: 14px; padding: 12px 14px; }

  .feat__panels { padding: 22px 20px; height: auto; overflow: visible; }
}

@media (max-width: 1024px) {
  .news__navwrap { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; column-gap: 6px; margin-bottom: 16px; }
  .news__navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; outline: none;
    background: var(--gray-100); border: 1px solid var(--gray-200); transition: background .18s ease;
  }
  .news__navbtn:hover { background: var(--gray-200); }
  .news__navbtn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
  .news__navbtn .ic { width: 15px; height: 15px; color: var(--blue-600); }
  .news__navbtn--prev .ic { transform: rotate(180deg); }

  .news__tabs { grid-column: 2; display: flex; }
  .ntab { display: none; }
  .ntab.is-active {
    display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto;
    background: var(--blue-pale); border: 1.5px solid var(--blue-500); border-radius: 12px;
    padding: 12px 14px; cursor: pointer; text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--blue-600);
  }

  .news { grid-template-columns: 1fr; }
  .news__card { display: none; }
  .news__card.is-active { display: block; }
}

/* ---------- Roles ---------- */
.roles { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.role { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); }
.role .ic { width: 26px; height: 26px; color: var(--blue-600); margin-bottom: 11px; }
.role h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy); margin-bottom: 7px; }
.role p { font-size: 14px; line-height: 1.5; color: var(--gray-700); font-style: italic; }

/* ---------- Planes ---------- */
.plans { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: start; }
.ptable { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.ptable__row { display: grid; grid-template-columns: 2fr .7fr .8fr; border-bottom: 1px solid var(--gray-100); }
.ptable__row span { padding: 12px 16px; font-size: 14px; color: var(--navy); text-align: center; }
.ptable__row span:first-child { text-align: left; }
.ptable__row--h { background: var(--navy); }
.ptable__row--h span { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.ptable__row:nth-child(even) { background: var(--gray-50); }
.ptable .yes { color: var(--success-deep); font-weight: 700; }
.ptable .no { color: var(--gray-300); }
.ptable .hi { color: var(--blue-600); font-weight: 700; }
.pside { background: linear-gradient(170deg,#EEF7FF,#fff); border: 1.5px solid var(--blue-pale); border-radius: var(--radius-xl); padding: 26px 24px; }
.pside h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy); margin-bottom: 9px; }
.pside p { font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.pside .btn { width: 100%; }
.pside__note { display: block; text-align: center; font-size: 12px; color: var(--gray-500); margin-top: 10px; }

/* ---------- Sección formulario ---------- */
.container-90 { width:90%; max-width:1400px; margin:0 auto }
.form-section-dark { padding:80px 0 100px; background:#0A2540; color:#fff; position:relative; overflow:hidden }
.form-section-dark::after { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; background:rgba(0,170,248,.10); border-radius:50%; pointer-events:none }
.form-flex-container { display:flex; align-items:center; gap:80px; position:relative; z-index:1 }
.form-content-left { flex:1.2 }
.form-pre-title { display:block; font-size:16px; font-weight:700; color:rgba(255,255,255,.5); margin-bottom:20px; letter-spacing:2px; text-transform:uppercase }
.form-main-title { font-family:var(--font-display); font-size:40px; font-weight:800; line-height:1.1; margin-bottom:25px; color:#fff }
.form-main-title .highlight-blue { color:var(--blue) }
.form-description { font-size:17px; color:rgba(255,255,255,.7); margin-bottom:40px; line-height:1.6 }
.form-benefits-list { list-style:none; padding:0; margin:0 }
.form-benefits-list li { display:flex; align-items:center; gap:14px; font-size:17px; font-weight:600; margin-bottom:18px; color:rgba(255,255,255,.9) }
.form-check-icon { width:20px; height:20px; color:var(--blue); flex-shrink:0 }
.form-card-right { flex:1; display:flex; justify-content:flex-end }
.countdown__form { width:560px; background:#fff; border-radius:24px; padding:36px 40px; box-shadow:0 30px 60px rgba(0,0,0,.3); color:var(--navy) }
.title_form { display:block; font-family:var(--font-display); font-size:24px; font-weight:700; margin-bottom:20px; color:var(--blue); text-align:center }
/* Pestañas "Ya soy cliente" / "Aún no lo tengo" arriba del formulario */
.form-tabs { display: flex; justify-content: center; gap: 4px; background: var(--gray-100); border-radius: var(--radius-pill); padding: 4px; margin: 0 auto 20px; width: fit-content; }
.form-tab { border: none; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: var(--radius-pill); color: var(--gray-700); transition: background .18s ease, color .18s ease; white-space: nowrap; }
.form-tab:hover { color: var(--navy); }
.form-tab.is-active { background: var(--navy); color: #fff; }
/* El iframe (IFrameFormulario2020) es de otro origen y trae su propio
   bloque de título en blanco arriba de los campos; recortamos apenas
   ese espacio subiendo el iframe un poco. */
.iframe-crop { position: relative; overflow-y: auto; overflow-x: hidden; height: 485px; border-radius: inherit; }
.iframe-crop::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; z-index: 1;
  background: linear-gradient(#fff, rgba(255,255,255,0)); pointer-events: none;
}
.iframe-crop iframe { width: 100%; height: 600px; margin-top: -115px; border: none; display: block; }

/* ---------- Modal formulario flotante ---------- */
.form-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.form-modal.is-open { display: flex; }
.form-modal__overlay { position: absolute; inset: 0; background: rgba(10,14,30,.65); backdrop-filter: blur(2px); }
.form-modal__dialog { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: var(--radius-xl); padding: 36px 32px 28px; box-shadow: 0 30px 60px rgba(0,0,0,.35); color: var(--navy); }
.form-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--gray-100); color: var(--navy); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.form-modal__close:hover { background: var(--gray-200); }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .form-modal { padding: 12px; }
  .form-modal__dialog { padding: 30px 20px 20px; border-radius: var(--radius-lg); }
}
@media (max-width: 900px) {
  .form-flex-container { flex-direction:column; gap:40px; }
  .form-card-right { justify-content:center; width:100%; }
  .countdown__form { width:100%; max-width:480px; }
  .form-main-title { font-size:30px; }
}
@media (max-width: 480px) {
  .form-tabs { flex-wrap: wrap; }
  .form-tab { font-size: 12.5px; padding: 8px 14px; }
}

/* ---------- Footer ---------- */
.site-footer { background:#000; color:#fff; text-align:center; padding:14px 20px }
.site-footer__content { max-width:1200px; margin:0 auto; padding:0 12px; font-size:14px }
@media (max-width: 620px) {
  .site-footer { padding: 10px 16px; }
  .site-footer__content { font-size: 11px; }
}

/* ---------- Reveal al scroll ---------- */
.rv { opacity: 0; transform: translateY(16px); }
.rv.is-in { animation: rvIn .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rvIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
/* El nav de escritorio (5 links + CTA) necesita ~820px reales; se colapsa a
   hamburguesa con margen de sobra para no recortarse contra la ventana. */
@media (max-width: 1300px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(260px, 70vw);
    background: #1bbcfb; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 6px; padding: 90px 22px 28px;
    box-shadow: -8px 0 24px rgba(0,0,0,.2); z-index: 55;
    overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease;
    will-change: transform;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a { width: 100%; padding: 12px 0; font-size: 14px; }
  .nav .btn-header { margin-top: 14px; text-align: center; }
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__title { font-size: 38px; }
  .flow__cards { grid-template-columns: repeat(3,1fr); }
  .flow__svg { display: none; }
  .pains { grid-template-columns: 1fr 1fr; }
  .spanel { grid-template-columns: minmax(0, 1fr); }
  .spanel__mock { order: 2; min-width: 0; }
  .spanel__txt { min-width: 0; }
  /* "zoom" no es confiable en Safari/iPhone acá, así que en tablet/móvil
     se reemplaza por transform:scale: se fija el ancho/alto natural de
     la ventana (para que adentro se acomode igual que en desktop) y se
     reduce completa; el margen negativo compensa el espacio que el
     transform deja reservado, para que ocupe en el layout el tamaño
     ya escalado. */
  #demo-win, .cpwin--static { zoom: 1; }
  .cpwin-scale { margin: 0 auto; overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .cpwin-scale > .cpwin {
    width: var(--nw, 620px);
    transform: scale(var(--s, 1));
    transform-origin: top left;
    margin-right: calc((var(--s, 1) - 1) * var(--nw, 620px));
    margin-bottom: calc((var(--s, 1) - 1) * var(--nh, 500px));
    /* centrado horizontal: al reducirse queda anclada arriba-izquierda,
       esto la corre a la mitad del contenedor según su ancho ya escalado */
    left: 50%;
    margin-left: calc(var(--nw, 620px) * var(--s, 1) / -2);
  }
  #cpwin-static-scale { --nw: 620px; --nh: 275px; --s: .52; }
  #demo-win-scale { --nw: 620px; --nh: 738px; --s: .45; }
  .news { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .steps__tabs { grid-template-columns: 1fr 1fr; }
  .h2 { font-size: 29px; }
  .section { padding: 62px 0; }
}
@media (max-width: 620px) {
  .pains, .roles, .flow__cards { grid-template-columns: 1fr; }
  .tick--2 { grid-template-columns: 1fr; }
  .autos__list { grid-template-columns: 1fr; }
  .steps__tabs { grid-template-columns: 1fr; }
  .hero__title { font-size: 31px; }
  .h2 { font-size: 25px; }
  .ages { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__circle, .flow__ring, .flow__dash, .cpwin__btn.is-hint::after { animation: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Ventana ContaPyme (fiel al software real) ---------- */
.cpwin { font-family: "Segoe UI", Tahoma, sans-serif; background: #fff; }
.cpwin__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #F5F7FA; border-bottom: 1px solid #E1E4E8; }
.cpwin__bar img { width: 14px; height: 14px; object-fit: contain; }
.cpwin__bar span:nth-child(2) { font-size: 12px; color: #26314a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpwin__ctl { margin-left: auto; display: flex; align-items: center; gap: 11px; font-size: 12px; color: #7d879b; }
.cpwin__ctl i { width: 9px; height: 1px; background: currentColor; display: block; }
.cpwin__ctl b { width: 8px; height: 8px; border: 1px solid currentColor; display: block; }
.cpwin__menu { display: flex; gap: 14px; padding: 4px 10px; background: #fff; border-bottom: 1px solid #EEF2F7; font-size: 11.5px; color: #26314a; }
.cpwin__step { display: flex; align-items: center; background: #1479D0; }
.dots { display: flex; align-items: center; gap: 8px; padding: 0 12px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; opacity: .45; transition: opacity .25s, box-shadow .25s; }
.dots i.on { opacity: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.cpwin__stitle { flex: 1; background: #0B4C8C; color: #fff; font-weight: 700; font-size: 15px; padding: 6px 14px; text-align: right; }

/* formulario del documento */
.fform { padding: 8px 10px 6px; background: #fff; display: flex; flex-direction: column; gap: 5px; }
.frow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.frow label { font-size: 11.5px; color: #26314a; white-space: nowrap; }
.inp { display: inline-block; font-size: 11.5px; color: #14213d; background: #E8F6E9; border: 1px solid #B9C6D8; padding: 2px 6px; min-width: 42px; }
.inp--sm { min-width: 40px; }
.inp--auto { color: #1479D0; font-weight: 700; background: #fff; min-width: 78px; }
.inp--dt { background: #fff; min-width: 66px; }
.inp--hl { background: #1479D0; color: #fff; border-color: #0B4C8C; }
.inp--wide { flex: 1; min-width: 120px; background: #E8F6E9; }
.frow--chk { gap: 12px; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #26314a; }
.chk i { width: 10px; height: 10px; flex: none; background: #1479D0; border: 1px solid #0B4C8C; border-radius: 2px; position: relative; }
.chk i::after { content: ""; position: absolute; left: 2px; top: 1px; width: 5px; height: 3px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }

/* barra de sección */
.secbar { display: flex; align-items: center; background: #D6E9FB; border-top: 1px solid #B9CCE3; border-bottom: 1px solid #B9CCE3; }
.secbar--tools { justify-content: flex-end; padding: 3px 8px; }
.seclab { font-weight: 700; font-size: 12px; color: #0B4C8C; background: #C2DFF8; padding: 4px 14px; border-right: 1px solid #A9C6E4; white-space: nowrap; }
.sectools { margin-left: auto; display: flex; gap: 7px; padding: 0 9px; }
.sectools i { width: 11px; height: 11px; border: 1px solid #7C93B4; border-radius: 2px; display: block; opacity: .55; }
.dragbar { background: #FBF3C8; border-bottom: 1px solid #E3D89A; padding: 4px 10px; font-size: 11px; color: #6b6446; }

/* grids */
.xgrid { position: relative; font-size: 11.5px; background: #fff; }
.xh2, .xhead, .xrow { display: grid; }
.xgrid--p1 .xh2, .xgrid--p1 .xhead, .xgrid--p1 .xrow { grid-template-columns:
  minmax(55px,.8fr) minmax(90px,1.3fr) minmax(65px,.9fr) minmax(65px,.8fr) minmax(60px,.8fr); }
.xgrid--p2 .xh2, .xgrid--p2 .xhead, .xgrid--p2 .xrow { grid-template-columns:
  minmax(55px,.64fr) minmax(80px,1fr) minmax(65px,.78fr) minmax(40px,.44fr) minmax(40px,.46fr)
  minmax(70px,.92fr) minmax(70px,.92fr) minmax(72px,.96fr) minmax(70px,.92fr); }
.xh2 .g2 { grid-column: span 2; }
.xh2 span { background: #1F6FBF; color: #fff; font-weight: 700; font-size: 11px; padding: 4px 5px; text-align: center; border-right: 1px solid #fff; white-space: normal; line-height: 1.15; display: flex; align-items: center; justify-content: center; min-height: 26px; }
.xhead span { background: #1F6FBF; color: #fff; font-weight: 700; font-size: 11px; padding: 3px 5px; border-right: 1px solid #fff; border-top: 1px solid rgba(255,255,255,.35); white-space: normal; line-height: 1.15; display: flex; align-items: center; }
.xrow { border-bottom: 1px solid #E4EAF2; }
.xrow span { padding: 3px 5px; color: #14213d; border-right: 1px solid #EEF2F7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xrow.is-sel { background: #FFFCE0; }
.mark { background: #FFF200; font-weight: 700; padding: 0 2px; }
.xfill { height: 46px; background: #fff; border-top: 1px solid #EEF2F7; }
.xgrid--p2 .xrow span:nth-child(n+6) { text-align: right; font-weight: 700; }
.xgrid--p2 .xrow span { font-size: 11px; }
.xgrid--p2 .v { opacity: 0; transition: opacity .3s ease; }
.xgrid--p2 .xrow.is-on .v { opacity: 1; }
.xgrid--p2 .xrow.is-on { background: #F2F8FF; }
.v-tot { color: #0B4C8C; }
.xload { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 10px; font-size: 12px; color: #5a6577; background: #FBFCFE; border-top: 1px solid #EEF2F7; }
.xload.is-off { display: none; }
.xload .spin { width: 15px; height: 15px; border: 2px solid #C2DFF8; border-top-color: #1479D0; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* resumen paso 3 */
.rtable { font-size: 11.5px; background: #fff; }
.rrow { display: grid; grid-template-columns: 1.5fr .75fr; border-bottom: 1px solid #E4EAF2; }
.rrow span { padding: 3px 9px; color: #14213d; }
.rrow span:last-child { text-align: right; border-left: 1px solid #E4EAF2; }
.rrow--sub { font-weight: 700; background: #F5F8FC; }
.rrow--tot { background: #EAF3FD; }
.rrow--tot span { color: #1479D0; font-weight: 700; font-size: 13px; padding: 5px 9px; }
.fpay { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1px; background: #E4EAF2; font-size: 11.5px; }
.fpay__t { background: #fff; }
.fprow { display: grid; grid-template-columns: 1fr .8fr; border-bottom: 1px solid #E4EAF2; }
.fprow span { padding: 3px 8px; color: #14213d; }
.fprow span:last-child { text-align: right; border-left: 1px solid #E4EAF2; }
.fprow--h { background: #EDF1F6; font-weight: 700; }
.fprow--sel { background: #F2F8FF; }
.fprow--sel .mark { background: #FFF200; display: block; }
.fprow--reg { background: #F5F8FC; font-weight: 700; border-top: 1.5px solid #14213d; }
.fpay__d { background: #fff; padding: 0; display: flex; flex-direction: column; }
.fpay__dh { background: #D6E9FB; color: #0B4C8C; font-weight: 700; padding: 3px 9px; font-size: 11px; }
.fpay__acct { display: flex; align-items: center; gap: 6px; padding: 6px 9px; }
.acct { flex: 1; background: #E8F4FF; border: 1px solid #C2DFF8; padding: 2px 7px; font-size: 11.5px; color: #14213d; }
.fpay__big { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 6px 9px; background: #F5F7FA; border-top: 1px solid #E4EAF2; }
.fpay__big span { font-size: 12.5px; color: #26314a; }
.fpay__big b { margin-left: auto; font-size: 16px; color: #14213d; }

/* pie de la ventana */
.cpwin__hint { background: #D6E9FB; color: #0B4C8C; font-weight: 700; font-size: 11px; text-align: center; padding: 3px 8px; opacity: 0; transition: opacity .3s; }
.cpwin__hint.is-on { opacity: 1; }
.cpwin__actions { display: flex; justify-content: flex-end; gap: 15px; padding: 5px 11px; background: #EDF1F6; border-top: 1px solid #C9D3E2; }
.act { font-size: 9.5px; font-weight: 600; color: #26314a; white-space: nowrap; position: relative; }
.act--x { color: #C0392B; }
.act--ok { color: #1E7A34; }
.act--off { color: #A9B6C9; }
.act.is-hint::after { content: ""; position: absolute; inset: -4px -7px; border-radius: 5px; border: 1.5px solid #1479D0; animation: ring 1.4s ease-out infinite; }
.act.is-pressed { opacity: .5; }
@keyframes ring { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.14); opacity: 0; } }
.cpwin .dpane { display: none; }
.cpwin .dpane.is-on { display: block; animation: fadeUp .3s ease both; }
/* altura reservada: los 3 pasos tienen contenidos de alto distinto;
   se fija al alto del paso más alto (paso 3) para que no cambie al pasar de paso */
#demo-win .dpanes { min-height: 440px; }
@media (max-width: 400px) { #demo-win-scale { --s: .36; } #cpwin-static-scale { --s: .42; } }
@media (prefers-reduced-motion: reduce) { .act.is-hint::after, .xload .spin { animation: none; } }

/* puntero del mouse sobre los botones resaltados */
.mcur { display: none; position: absolute; right: -13px; bottom: -14px; width: 15px; height: 21px; z-index: 4;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M4 2l0 21 5.5-5.5 3.5 8 4.2-1.9-3.6-8 8.4 0z' fill='%23fff' stroke='%231B1E35' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.act.is-hint .mcur { display: block; animation: mcurIn .9s ease both; }
.act.is-pressed .mcur { display: block; transform: scale(.82); }
@keyframes mcurIn { 0% { opacity: 0; transform: translate(-18px,-20px); } 55% { opacity: 1; transform: translate(0,0); } 70% { transform: translate(0,0) scale(.82); } 85% { transform: translate(0,0) scale(1); } 100% { opacity: 1; transform: translate(0,0); } }

/* lista de procesos: estado pendiente → completado */
.autos__list { align-items: start; }
.auto { opacity: 1; transform: none; color: var(--gray-500); font-weight: 500; transition: color .3s ease, font-weight .3s ease; }
.auto .dotp { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gray-300); flex: none; display: block; transition: opacity .25s; }
.auto .ic { display: none; }
.auto.is-on { color: var(--navy); font-weight: 600; }
.auto.is-on .dotp { display: none; }
.auto.is-on .ic { display: block; }
@media (prefers-reduced-motion: reduce) { .act.is-hint .mcur { animation: none; } }

/* =========================================================
   Nivel "pro": prueba social, bento, testimonios, CTA fija
   ========================================================= */

/* ---- Prueba social en el hero ---- */
.hero__proof { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.28); flex-wrap: wrap; }
.hero__proof-av { display: flex; flex: none; }
.hero__proof-av i { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--blue-600);
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; font-style: normal;
  display: flex; align-items: center; justify-content: center; border: 2px solid #2CA3F1; margin-left: -9px; }
.hero__proof-av i:first-child { margin-left: 0; }
.hero__proof p { font-size: 14px; line-height: 1.5; color: #fff; max-width: 400px; }
.hero__proof strong { font-family: var(--font-display); font-weight: 700; }

/* ---- Testimonios ---- */
.tsts { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tst { margin: 0; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 18px; transition: transform .2s, box-shadow .2s; }
.tst:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tst blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.45; color: var(--navy); flex: 1; }
.tst figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--gray-200); padding-top: 16px; }
.tst__av { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-brand); color: #fff; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.tst figcaption b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--navy); }
.tst figcaption em { font-style: normal; font-size: 12.5px; color: var(--gray-700); }

/* ---- Señales de confianza junto al CTA del formulario ---- */
.form-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-top: 4px; }
.form-trust li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-700); }
.form-trust .ic { width: 13px; height: 13px; color: var(--success-deep); }

/* ---- Nav con sección activa (scroll-spy) ---- */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--blue-500); border-radius: 2px; transition: right .25s ease; }
.nav a.is-current { color: var(--blue-600); }
.nav a.is-current::after { right: 0; }

@media (max-width: 1000px) {
  .pains .pain:nth-child(1) { grid-column: span 2; }
  .pains .pain:nth-child(6) { grid-column: span 2; grid-template-columns: 1fr; gap: 12px; }
  .pains .pain:nth-child(6) .sol__was { border-left: none; padding-left: 0; padding-top: 11px; border-top: 1px dashed var(--gray-200); max-width: none; }
  .tsts { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pains .pain:nth-child(1), .pains .pain:nth-child(6) { grid-column: span 1; }
  .hero__proof p { font-size: 13px; }
}

/* ---- Espacios de testimonio pendientes de contenido real ---- */
.tst--slot { border-style: dashed; border-color: var(--gray-300); background: #fff; }
.tst--slot:hover { transform: none; box-shadow: none; }
.tst--slot blockquote { color: var(--gray-700); font-style: italic; }
.tst--slot .tst__av { background: var(--gray-100); color: var(--gray-700); }
.tst--slot figcaption b { color: var(--gray-700); }


/* =========================================================
   Dinamismo: el flujo integral en vivo
   ========================================================= */
.flow__hub { position: relative; }
.flow__live { position: absolute; top: 8px; left: calc(50% + 62px); display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: var(--blue-600);
  background: var(--blue-pale); border: 1px solid #A9D3FF; padding: 4px 11px; border-radius: var(--radius-pill);
  white-space: nowrap; opacity: 0; transition: opacity .3s; }
.flow__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none;
  animation: livePulse 1s ease-in-out infinite; }
.flow__live.is-on { opacity: 1; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* tarjetas del flujo: se encienden en secuencia */
.fcard { position: relative; border-color: var(--gray-200); }
.fcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient-brand); border-radius: var(--radius-md) var(--radius-md) 0 0;
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.fcard.is-lit { border-color: var(--blue-pale); box-shadow: var(--shadow-md); }
.fcard.is-lit::after { transform: scaleX(1); }
.fcard.is-lit .ic { color: var(--blue-500); }
.fcard__ok { position: absolute; top: 9px; right: 9px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--success); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.fcard__ok::after { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 3px;
  border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
.fcard.is-done .fcard__ok { opacity: 1; transform: scale(1); }

/* la ventana del sistema con más presencia */
.spanel__mock .mock { box-shadow: 0 22px 54px rgba(11,16,48,.20); }
.cpwin { box-shadow: 0 28px 66px rgba(0,0,0,.34); }

@media (max-width: 1000px) {
  .flow__live { position: static; left: auto; top: auto; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__live::before { animation: none; }
  .fcard::after { transition: none; }
}

/* =========================================================
   Peso visual: iconos en teja, secciones numeradas
   ========================================================= */

/* numeración de sección */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; }
body { counter-reset: sec; }
.eyebrow__n { counter-increment: sec; font-style: normal; font-size: 11px; letter-spacing: .04em; color: #fff;
  background: var(--blue-500); width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.eyebrow__n::before { content: counter(sec, decimal-leading-zero); }
.section__head .eyebrow { justify-content: center; }

/* iconos en teja: dan volumen a las tarjetas */
.pain .ic, .fcard .ic, .tst .ic { background: none; }
.pain > .ic, .fcard > .ic {
  width: 46px; height: 46px; border-radius: 13px; background: var(--blue-pale);
  color: var(--blue-600); display: flex; align-items: center; justify-content: center; margin-bottom: 15px;
  position: relative;
}
.pain > .ic::before, .fcard > .ic::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask-image: inherit; mask-image: inherit;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.pains .pain:nth-child(1) > .ic { width: 54px; height: 54px; background: #fff; box-shadow: var(--shadow-sm); }
.pains .pain:nth-child(1) > .ic::before { width: 28px; height: 28px; }
.fcard > .ic { width: 40px; height: 40px; border-radius: 11px; margin: 0 auto 11px; }
.fcard > .ic::before { width: 21px; height: 21px; }
.fcard.is-lit > .ic { background: var(--blue-500); color: #fff; }

/* tarjetas con más presencia */
.pain { background: #fff; box-shadow: var(--shadow-sm); }
.pain:hover { box-shadow: var(--shadow-lg); }
.pains .pain:nth-child(1) { box-shadow: var(--shadow-md); }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "media" "foot"; gap: 30px; }
  .hero__title { font-size: 36px; }
  .hero__lead { text-align: center; }
  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__ctas { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero__trust { justify-content: center; }
}
@media (max-width: 620px) { .hero__title { font-size: 30px; } }

/* ---- Capturas reales del sistema ---- */
/* la captura vive sobre un panel de marca, no flotando sola */
.shotwrap { position: relative; padding: 22px 22px 40px; border-radius: var(--radius-xl);
  background: radial-gradient(120% 120% at 15% 0%, #EAF4FF, #D7E9FB); max-width: 140%; margin: 0 auto; }
.shot { margin: 0; background: #fff; border: 1px solid rgba(255,255,255,.9); border-radius: 9px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(11,16,48,.26); }
.shot img { width: 100%; height: auto; display: block; }
.shot--crop { aspect-ratio: 3.17 / 1; max-height: none; }
.shot--crop img { object-fit: cover; object-position: top left; width: 100%; height: 100%; }
.shotwrap--duo { display: flex; flex-direction: column; gap: 0; }
.shot--over { margin: -46px 0 0 34px; position: relative; z-index: 2; box-shadow: 0 22px 50px rgba(11,16,48,.30); }
@media (max-width: 1000px) {
  .shot--over { margin: 0; }
  .shot--crop { aspect-ratio: 1.36; }
  .shot--crop:not(.shot--over) { aspect-ratio: 1.27; }
}
.shotnote { position: absolute; left: 22px; right: 22px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--blue-700); }
.shotnote .ic { width: 15px; height: 15px; color: var(--success-deep); flex: none; }

/* ---------- Señalizadores sobre las capturas ---------- */
.shot, .cpwin--static { position: relative; }
.pin { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  max-width: 232px; padding: 7px 12px 7px 8px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.97); border: 1px solid var(--blue-pale);
  box-shadow: 0 8px 22px rgba(11,16,48,.20);
  font-family: var(--font-body); font-weight: 600; font-size: 9px; line-height: 1.3; color: var(--navy);
  transform: translate(0,-50%); }
.pin--r { transform: translate(-100%,-50%); }
.pin__ic { flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue-500); display: flex; align-items: center; justify-content: center; }
.pin__ic .ic { width: 12px; height: 12px; color: #fff; }
.pin--win { max-width: 214px; }
.pin--wide { max-width: 440px; }
@media (max-width: 1500px) { 
  .pin{
    font-size: 8px;
    padding: 5px 12px 5px 8px;
  }
  .img1-text1{
    width:229px !important;
  }
  .img1-text2{
    width:176px !important;
  }
  .img2-text1{
    left: 21% !important;
    width: 311px !important;
  }
  .img3-text1{
    width:174px !important;
  }
  .img3-text2{
    left: 64% !important;
    top: 78% !important;
    width: 204px !important;
  }
  .img3-text3{
    left: 89% !important;
    top: 26% !important;
    width: 170px !important;
  }
}
@media (max-width: 900px) { .pin { display: none; } }

/* precio visible */
.price { background: #fff; border: 1px solid var(--blue-pale); border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 20px; }
.price__lbl { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-700); }
.price__v { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--navy); line-height: 1.1; }
.price__per { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gray-700); }
.price__note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--gray-700); }
@media (max-width: 620px) { .shot--over { margin-left: 0; } }
@media (max-width: 1000px) { .steps__tabs { grid-template-columns: 1fr; } }

/* ---- Ventana estática del sistema (paso 2) ---- */
.cpwin--static .xgrid--p2 .xrow span:nth-child(n+6) { text-align: right; font-weight: 700; }
.xtot { display: grid; grid-template-columns:
    minmax(55px,.64fr) minmax(80px,1fr) minmax(65px,.78fr) minmax(40px,.44fr) minmax(40px,.46fr)
    minmax(70px,.92fr) minmax(70px,.92fr) minmax(72px,.96fr) minmax(70px,.92fr);
  background: #EDF1F6; border-top: 2px solid #1666C0; font-weight: 700; font-size: 9.5px; }
.xtot span { padding: 5px 5px; text-align: right; color: #14213d; border-right: 1px solid #DCE3EE; }
.xtot span:nth-child(2) { text-align: left; }

/* =========================================================
   Orbital: escenario intrínseco 1220×720 escalado como bloque,
   así tarjetas y geometría se reducen juntas (sin solapes).
   ========================================================= */
.orbwrap { position: relative; width: 100%; max-width: 1220px; margin: 0 auto; aspect-ratio: 1220 / 760; }
.orb { position: absolute; top: 0; left: 0; width: 1220px; height: 760px; transform-origin: top left;
  transform: scale(var(--k, 1)); }
.orb__svg { position: absolute; inset: 0; width: 1220px; height: 760px; overflow: visible; }
.orb__base { fill: none; stroke: var(--blue-pale); stroke-width: 1.25; stroke-dasharray: 3 7; opacity: .8; }
.orb__lit { fill: none; stroke: var(--blue-500); stroke-width: 1.75; stroke-linecap: round; opacity: 0;
  stroke-dasharray: .045 .06; transition: opacity .5s ease; }
.orb__lit.is-on { opacity: .95; }
.orb__dot { fill: var(--blue-500); opacity: 0; offset-distance: 0%;
  filter: drop-shadow(0 0 4px rgba(0,123,255,.65)); }
.orb__dot.is-run { animation: orbDot 1.4s cubic-bezier(.3,0,.7,1) forwards; }
@keyframes orbDot {
  0% { offset-distance: 0%; opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.orb__inbase { fill: none; stroke: var(--blue-pale); stroke-width: 1.25; stroke-dasharray: 3 7; opacity: .8; }
.orb__inlit { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-linecap: round; opacity: 0;
  stroke-dasharray: .045 .06; transition: opacity .45s ease; }
.orb.is-flowing .orb__inlit { opacity: 1; }

/* núcleo */
.orb__core { position: absolute; left: 685px; top: 354px; transform: translate(-50%,-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px; }
.orb__core img { width: 120px; height: 120px; display: block; position: relative; z-index: 2;
  filter: drop-shadow(0 12px 30px rgba(0,123,255,.34)); }
.orb__core b { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); white-space: nowrap; }
.orb__core em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-600); white-space: nowrap; margin-top: -3px; }
.orb__halo { position: absolute; top: 60px; left: 50%; width: 120px; height: 120px; translate: -50% -50%;
  border-radius: 50%; border: 2px solid var(--blue-pale); opacity: 0; }
.orb.is-busy .orb__halo { animation: haloOut 2.4s ease-out 2; }
.orb__halo--b { animation-delay: 1.5s; }
@keyframes haloOut { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.85); opacity: 0; } }

/* entrada */
.orb__inbox { position: absolute; left: 20px; top: 357px; transform: translateY(-50%); width: 196px; z-index: 3; }
.orb__inlbl { display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gray-700); margin-bottom: 8px; }
.orb__incard { position: relative; background: var(--gradient-brand); border-radius: var(--radius-lg); padding: 18px 16px;
  text-align: center; box-shadow: var(--shadow-blue); display: flex; flex-direction: column; align-items: center;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.orb__incard::after { content: ""; position: absolute; inset: -6px; border-radius: calc(var(--radius-lg) + 6px);
  border: 2px solid var(--blue-500); opacity: 0; transition: opacity .3s ease; }
.orb.is-trigger .orb__incard { transform: scale(1.045); box-shadow: 0 14px 34px rgba(0,123,255,.42); }
.orb.is-trigger .orb__incard::after { opacity: .55; }

/* numeración del flujo */
.orb__step { font-style: normal; width: 17px; height: 17px; border-radius: 50%; background: var(--blue-500); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px; display: inline-flex; align-items: center;
  justify-content: center; margin-right: 7px; vertical-align: -3px; }
.orb__step--b { background: var(--navy); }

.orb__inic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: rgba(255,255,255,.24);
  display: flex; align-items: center; justify-content: center; margin: 0 0 10px; }
.orb__inic .ic { width: 21px; height: 21px; color: #fff; }
.orb__incard b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.1; }
.orb__incard span { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.92); }

/* satélites */
.orbn { position: absolute; transform: translate(-50%,-50%); width: 196px; z-index: 2;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 17px 16px 15px;
  box-shadow: var(--shadow-sm);
  filter: blur(3px) saturate(.35); opacity: .5;
  transition: box-shadow .32s, border-color .32s, filter .5s ease, opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.orbn.is-on { border-color: var(--blue-pale); box-shadow: var(--shadow-md);
  filter: none; opacity: 1; transform: translate(-50%,-50%) scale(1.02); }
.orbn.is-done { transform: translate(-50%,-50%); }
.orbn__ic { width: 34px; height: 34px; border-radius: 9px; background: var(--blue-pale);
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px; transition: background .3s; }
.orbn__ic .ic { width: 19px; height: 19px; color: var(--blue-600); transition: color .3s; }
.orbn.is-on .orbn__ic { background: var(--blue-500); }
.orbn.is-on .orbn__ic .ic { color: #fff; }
.orbn h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); line-height: 1.2; margin-bottom: 4px; }
.orbn p { font-size: 11.5px; line-height: 1.4; color: var(--gray-700); }
.orbn__chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; font-size: 10.5px; font-weight: 700;
  color: var(--success-deep); background: rgba(92,186,53,.12); border-radius: var(--radius-pill); padding: 3px 7px;
  opacity: 0; transform: translateY(3px); transition: opacity .35s, transform .35s; white-space: nowrap; }
.orbn__chip .ic { width: 11px; height: 11px; flex: none; }
.orbn.is-done .orbn__chip { opacity: 1; transform: none; }

/* lo que la nómina recibe de vuelta */
.back { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px dashed var(--blue-pale); border-radius: var(--radius-lg); padding: 17px 22px; }
.back__t { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; color: var(--blue-600); flex: none; }
.back__t .ic { width: 18px; height: 18px; }
.back__items { display: flex; gap: 26px; flex-wrap: wrap; flex: 1; }
.back__items span { font-size: 13.5px; line-height: 1.45; color: var(--gray-700); }
.back__items b { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-right: 6px; }


@media (max-width: 1440px) {
  #integral.section { padding: 32px 0 16px !important; }
  #integral .section__head { margin: 0 auto 16px !important; }
  #integral .eyebrow { font-size: 13px !important; }
  #integral .h2 { font-size: 27px !important; margin-top: 8px !important; }
  #integral .lead { font-size: 14px !important; margin-top: 8px !important; line-height: 1.45 !important; }
  #integral .note-box { margin-top: 16px !important; padding: 12px 16px !important; }
  #integral .note-box__ico { display: none !important; }
  #integral .note-box p { font-size: 13px !important; line-height: 1.45 !important; }
}

@media (max-width: 1024px){
  .img2-text1 {
        left: 10% !important;
        top: 32% !important;
  }

  .img3-text2 {
        left: 48% !important;
    }
  
    .img3-text3 {
        left: 94% !important;
        top: 21% !important;
        width: 140px !important;
    }

  .h2{
    font-size: 32px;
  }

  .lead{
    font-size: 14px;
  }
}

/* ---- Orbital en tablet/móvil: tarjeta fija arriba, logo, flecha y carrusel ---- */
.orbn__down { display: none; }
.orbn__slider { display: contents; }
.orbn__track { display: contents; }
.orbn__slide { display: contents; }
.orbn__nav { display: none; }
.orbn__dots { display: none; }

@media (max-width: 1024px) {
  .orbwrap { aspect-ratio: auto; max-width: none; }
  .orb { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; }
  .orb__svg, .orb__halo { display: none; }

  .orb__inbox {
    position: static; left: auto; transform: none; width: auto; z-index: 4;
    padding-top: 4px; max-width: 62%; margin: 0 auto 6px;
  }

  .orb__core { position: static; left: auto; top: auto; transform: none;
    flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 8px 0 2px; }
  .orb__core img { width: 62px; height: 62px; }

  .orbn__down { display: flex; justify-content: center; position: relative; width: 2px; height: 30px; margin: 4px auto 12px; }
  .orbn__downline { position: absolute; inset: 0; left: 0; width: 2px;
    background: repeating-linear-gradient(to bottom, var(--blue-pale) 0 4px, transparent 4px 9px); }
  .orbn__downdot { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: var(--blue-500); opacity: 0;
    box-shadow: 0 0 5px rgba(0,123,255,.6); }
  .orbn__downdot.is-run { animation: orbnDotDown .6s cubic-bezier(.3,0,.7,1); }
  @keyframes orbnDotDown {
    0% { top: 0; opacity: 1; }
    85% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  .orbn__down--top { height: 26px; }
  .orbn__downline--arrow { background: none; border-left: 3px dashed var(--blue-500); width: 0; bottom: 6px; }
  .orbn__down--top::after {
    content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--blue-500);
  }

  .orbn__slider { display: grid; grid-template-columns: 32px 62% 32px; justify-content: center;
    align-items: center; column-gap: 6px; }
  .orbn__track {
    grid-column: 2; min-width: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; padding: 8px 0 10px;
  }
  .orbn__track::-webkit-scrollbar { display: none; }

  .orbn__slide { display: flex; flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }

  .orbn, .orbn.is-on, .orbn.is-done { position: static; transform: none; flex: 0 0 100%; width: auto; max-width: none;
    margin: 0; filter: none; opacity: 1; box-sizing: border-box; }
  .orbn__chip { opacity: 1; transform: none; }

  .orbn__nav {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; z-index: 2; cursor: pointer; padding: 0;
    background: var(--gray-100); border: 1px solid var(--gray-200); transition: background .18s ease;
    outline: none;
  }
  .orbn__nav:hover { background: var(--gray-200); }
  .orbn__nav:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
  .orbn__nav .ic { width: 15px; height: 15px; color: var(--blue-600); }
  .orbn__nav--prev .ic { transform: rotate(180deg); }
  .orbn__nav--prev::after, .orbn__nav--next::before {
    content: ""; position: absolute; top: 40px; width: 14px; height: 2px;
    background: repeating-linear-gradient(to right, var(--blue-pale) 0 4px, transparent 4px 8px);
    opacity: .6; transition: opacity .2s ease;
  }
  .orbn__nav--prev::after { left: 100%; }
  .orbn__nav--next::before { right: 100%; }
  .orbn__nav.is-pulse::after, .orbn__nav.is-pulse::before { animation: navDashPulse .7s ease; }
  @keyframes navDashPulse {
    0% { opacity: .6; }
    40% { opacity: 1; background-position: 8px 0; }
    100% { opacity: .6; }
  }

  .orbn__downdot--auto { animation: orbnDotDown 1.8s cubic-bezier(.3,0,.7,1) infinite; }

  .orbn__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; }
  .orbn__dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff;
    border: 2px solid var(--gray-300); box-sizing: border-box;
    transition: background .2s ease, border-color .2s ease, transform .2s ease; }
  .orbn__dots i.is-on { background: var(--blue-500); border-color: var(--blue-500); transform: scale(1.3); }

  .back { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 768px) {
  .hero__desc{
    font-size: 12px;
  }
  .hero__ctas .btn {
    font-size: 10px;
  }
  .band__item strong{
    font-size: 15px;
  }
  .band__item span{
    font-size: 13px;
  }
  .tick li{
    font-size: 13px;
  }
}

@media (max-width: 1024px) {
  .steps__tabswrap { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center;
    column-gap: 6px; margin-bottom: 22px; }
  .steps__navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; padding: 0; outline: none;
    background: var(--gray-100); border: 1px solid var(--gray-200); transition: background .18s ease;
  }
  .steps__navbtn:hover { background: var(--gray-200); }
  .steps__navbtn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
  .steps__navbtn .ic { width: 15px; height: 15px; color: var(--blue-600); }
  .steps__navbtn--prev .ic { transform: rotate(180deg); }

  .steps__tabs { grid-column: 2; display: flex; margin-bottom: 0; max-width: none; margin-left: 0; margin-right: 0; }
  .stab { display: none; }
  .stab.is-active { display: flex; width: 100%; justify-content: center; }
}

@media (max-width: 425px) {
  .badge-pill, .hero__trust span{
    font-size: 7px;
  }

  .band__item span{
    font-size: 9px;
  }

  .band__item .ic{
    width: 24px;
    height: 24px;
  }

  #integral .h2, .h2, .form-main-title{
    font-size: 21px !important;
  }

  .eyebrow, .spanel__txt p, .news__card > p, .acc__h, .acc__b > p, .form-pre-title
  .form-description{
    font-size: 13px;
  }

  .spanel__txt h3, .news__card h3{
    font-size: 19px;
  }

  .tick li, .form-benefits-list li{
    font-size: 12px;
  }

  .shotnote{
    font-size: 8px;
  }

  .btn{
    font-size: 10px;
  }

  .section {
        padding: 22px 0;
    }
}