/* Fuentes autohospedadas (antes Google Fonts): una fuente variable por familia, solo latin. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/font-pjs-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/font-inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "PJS Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 104%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }
:root {
  
  --zen-green:      #2563B0;
  --zen-green-600:  #1E4F93;
  --zen-green-700:  #17407A;
  --zen-green-300:  #52D68A;
  --zen-green-100:  #DCEAF8;
  --zen-green-50:   #F1F6FC;

  --zen-navy:       #1A2F5A;   
  --zen-navy-600:   #2563B0;
  --zen-sky:        #4A90D9;
  --zen-sky-600:    #2563B0;

  
  --surface:        #FFFFFF;
  --surface-2: #F4F7FB;
  --surface-3: #E8EEF6;
  --line: #E3EAF3;
  --line-strong: #C8D6E8;

  
  --dark:           #0F1E3D;
  --dark-2:         #14264B;
  --dark-3:         #1A2F5A;
  --dark-line:      rgba(255,255,255,.10);
  --dark-line-2:    rgba(255,255,255,.16);

  
  --ink: #1A2F5A;
  --ink-2: #24365F;
  --body: #4A607A;
  --muted: #5A7090;
  --on-dark:        #EEF3FA;
  --on-dark-muted:  #A8C0DC;

  
  --red:            #C23B3B;
  --amber:          #F5A524;
  --violet:         #4A90D9;

  
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px;  --r-pill: 999px;

  
  --sh-xs: 0 1px 2px rgba(11,23,48,.06);
  --sh-sm: 0 2px 8px rgba(11,23,48,.06), 0 1px 2px rgba(11,23,48,.04);
  --sh-md: 0 8px 24px rgba(11,23,48,.08), 0 2px 6px rgba(11,23,48,.04);
  --sh-lg: 0 18px 48px rgba(11,23,48,.12), 0 4px 12px rgba(11,23,48,.05);
  --sh-xl: 0 32px 80px rgba(11,23,48,.16), 0 8px 20px rgba(11,23,48,.06);

  
  --tint-sky:      #EEF5FD;
  --tint-sky-2:    #DDEBFA;
  --tint-sky-line: #CFE1F6;
  --tint-navy:     #EEF2FB;
  --tint-navy-line:#DAE3F4;
  --tint-violet:   #F5F3FF;
  --tint-green:    #E7F6EE;

  
  --amber-ink:  #A85A12;
  --amber-bg:   #FEF0C7;
  --amber-soft: #FFFAEB;
  --red-ink:    #A32E2E;
  --red-bg:     #FEE4E2;
  --red-soft:   #FEF3F2;

  
  --on-dark-soft: #8DA5C4;

  --sh-brand: 0 10px 30px rgba(37,99,176,.28);
  
  --ring:       0 0 0 3px rgba(37,99,176,.28);   
  --ring-0:     0 0 0 0 rgba(37,99,176,0);       
  --sh-inset:   inset 0 1px 0 rgba(255,255,255,.55);
  --sh-inset-d: inset 0 1px 0 rgba(255,255,255,.10);

  
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 6.1vw, 88px);
  --nav-h: 72px;

  
  --font-display: 'Plus Jakarta Sans', 'PJS Fallback', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}

html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

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


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.4vw, 4rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 1.15rem + 2.3vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.02rem + .7vw, 1.6rem); }
h4 { font-size: clamp(1.05rem, .98rem + .32vw, 1.25rem); }
h5 { font-size: 1rem; }

p { text-wrap: pretty; }
strong, b { font-weight: 700; color: var(--ink-2); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--body);
}
.text-grad {
  background: linear-gradient(100deg, var(--zen-green) 0%, #7BE9AA 40%, var(--zen-sky) 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mono { font-family: var(--font-mono); font-size: .8em; letter-spacing: -.01em; }


.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }

section { position: relative; }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(44px, 5vw, 72px); }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 60px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head .lead { margin-top: 0; }


.bg-soft   { background: var(--surface-2); }
.bg-mesh   { background:
    radial-gradient(1000px 500px at 12% -8%, rgba(37,99,176,.07), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, rgba(74,144,217,.07), transparent 60%),
    var(--surface); }
.bg-mesh-soft { background:
    radial-gradient(900px 460px at 88% 0%, rgba(37,99,176,.08), transparent 60%),
    var(--surface-2); }

.bg-dark {
  background:
    radial-gradient(1100px 560px at 10% -10%, rgba(37,99,176,.16), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(74,144,217,.12), transparent 58%),
    linear-gradient(165deg, var(--dark) 0%, var(--dark-2) 55%, #08111F 100%);
  color: var(--on-dark);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5 { color: #fff; }
.bg-dark p, .bg-dark .lead { color: var(--on-dark-muted); }
.bg-dark strong { color: #fff; }


.grid-lines::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 20%, transparent 78%);
}
.grid-lines > * { position: relative; z-index: 1; }


.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1000px) { .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px)  { .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .g-2, .g-3, .g-4, .g-6 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.wide-left  { grid-template-columns: 1.1fr .9fr; }
.split.wide-right { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 980px) { .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; } }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.row     { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row.center { justify-content: center; }
.mt-auto { margin-top: auto; }
.center  { text-align: center; }


/* Reset de <button> con especificidad cero (:where): .btn-primary y compañía deben ganar siempre */
:where(button.btn) { appearance: none; -webkit-appearance: none; background: none; border: 0; font: inherit; line-height: inherit; color: inherit; margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  padding: 13px 24px; border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s;
  position: relative;
}
.btn:active { transform: translateY(1px); }
.btn .ico { font-size: 1.05em; line-height: 1; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(135deg, var(--zen-green) 0%, var(--zen-green-600) 100%);
  color: #fff; box-shadow: var(--sh-brand);
}
.btn-primary:hover { box-shadow: var(--sh-brand); transform: translateY(-2px); }

.btn-navy { background: var(--ink); color: #fff; box-shadow: var(--sh-md); }
.btn-navy:hover { background: #16233A; transform: translateY(-2px); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-xs); }
.btn-ghost:hover { border-color: var(--zen-green); color: var(--zen-green-600); box-shadow: var(--sh-sm); transform: translateY(-2px); }

.btn-outline-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.26); backdrop-filter: blur(8px); }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--ink); box-shadow: var(--sh-md); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

.btn-sm { padding: 9px 16px; font-size: .8438rem; border-radius: var(--r-xs); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  
  color: var(--zen-green-700); transition: gap .22s var(--ease), color .2s;
}
.link-arrow::after { content: '→'; transition: transform .22s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.bg-dark .link-arrow { color: var(--zen-green-300); }



.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zen-green-700);
  background: none; border: 0; padding: 0; border-radius: 0;
  margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; flex: none;
  width: 26px; height: 1px; border-radius: 0;
  background: currentColor; opacity: .55; box-shadow: none;
}
.bg-dark .eyebrow { color: var(--zen-green-300); background: none; border-color: transparent; }


.hero-centro .eyebrow::after {
  content: ''; flex: none;
  width: 26px; height: 1px;
  background: currentColor; opacity: .55;
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--ink-2); background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.pill-green { color: var(--zen-green-700); background: var(--zen-green-50); border-color: var(--zen-green-100); }
.pill-sky   { color: var(--zen-sky-600); background: var(--tint-sky); border-color: var(--tint-sky-line); }
.pill-navy  { color: var(--zen-navy); background: var(--tint-navy); border-color: var(--tint-navy-line); }
.bg-dark .pill { color: var(--on-dark); background: rgba(255,255,255,.07); border-color: var(--dark-line); }

.badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  color: var(--zen-green-700); background: var(--zen-green-50);
  border: 1px solid var(--zen-green-100); border-radius: var(--r-sm);
}
.bg-dark .badge-num { color: var(--zen-green-300); background: rgba(37,99,176,.14); border-color: rgba(37,99,176,.3); }

.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }


.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  overflow: hidden;
}
.card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--zen-green), var(--zen-sky));
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease);
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-strong); }
.card-hover:hover::after { transform: scaleX(1); }

.card h3, .card h4 { margin-bottom: 2px; }
.card p { font-size: .9375rem; line-height: 1.62; }

.card-soft { background: var(--surface-2); border-color: transparent; }
.card-dark {
  background: rgba(255,255,255,.035);
  border-color: var(--dark-line);
  backdrop-filter: blur(10px);
}
.card-dark:hover { background: rgba(255,255,255,.06); border-color: var(--dark-line-2); }
.card-dark h3, .card-dark h4 { color: #fff; }
.card-dark p { color: var(--on-dark-muted); }

.card-accent { border-color: var(--zen-green-100); background: linear-gradient(165deg, var(--zen-green-50), var(--surface) 62%); }


.c-ico {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--zen-green-50), var(--tint-green));
  border: 1px solid var(--zen-green-100);
  transition: transform .3s var(--ease);
}
.card-hover:hover .c-ico { transform: scale(1.07) rotate(-3deg); }
.c-ico.sky   { background: linear-gradient(140deg, var(--tint-sky), var(--tint-sky-2)); border-color: var(--tint-sky-line); }
.c-ico.navy  { background: linear-gradient(140deg, var(--tint-navy), #E4E8F8); border-color: var(--tint-navy-line); }
.c-ico.amber { background: linear-gradient(140deg, #FEF6E7, #FDEFD4); border-color: #FAE3B4; }
.bg-dark .c-ico { background: rgba(37,99,176,.14); border-color: rgba(37,99,176,.3); }


.card-step { padding-top: 26px; }
.card-step .step-n {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(140deg, var(--zen-green), var(--zen-sky));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: .9;
}


.stats-row {
  display: grid; gap: clamp(18px, 2.5vw, 32px);
  
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats-row { grid-template-columns: 1fr; } }
.stat { text-align: center; }
.stat .n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 700; line-height: 1; letter-spacing: -.045em;
  color: var(--ink);
  display: block;
}
.stat.grad .n {
  background: linear-gradient(135deg, var(--zen-green) 10%, #45D07F 55%, var(--zen-sky) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat .l { margin-top: 8px; font-size: .875rem; color: var(--muted); font-weight: 500; }
.bg-dark .stat .n { color: #fff; }
.bg-dark .stat .l { color: var(--on-dark-muted); }


.stat-band {
  display: grid; gap: 4px;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.stat-band > * { padding: clamp(20px, 2.4vw, 30px) 16px; }
.stat-band > * + * { border-left: 1px solid var(--line); }


@media (max-width: 900px) {
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band > * + * { border-left: none; }
  .stat-band > *:nth-child(even) { border-left: 1px solid var(--line); }
  .stat-band > *:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bg-dark .stat-band > *:nth-child(even),
  .bg-dark .stat-band > *:nth-child(n+3) { border-color: var(--dark-line); }
}


@media (max-width: 520px) {
  .stat-band { grid-template-columns: 1fr; }
  .stat-band > * { border-left: none !important; }
  .stat-band > * + * { border-top: 1px solid var(--line); }
  .bg-dark .stat-band > * + * { border-color: var(--dark-line); }
}
.bg-dark .stat-band { background: rgba(255,255,255,.035); border-color: var(--dark-line); }
.bg-dark .stat-band > * + * { border-color: var(--dark-line); }


.topbar {
  
  color: #fff; position: relative; overflow: hidden;
  font-size: .8125rem;
}
.tb-slide { background: linear-gradient(100deg, #071B3B 0%, #1A2F5A 45%, #17407A 78%, #071B3B 100%); }


.tb-slide.tb-clobi {
  background: linear-gradient(100deg, #071B3B 0%, #1A2F5A 45%, #17407A 78%, #071B3B 100%);
}

.tb-slide.tb-training {
  background: linear-gradient(100deg, #0B2A1C 0%, #0E5C2A 42%, #17407A 74%, #0B2A1C 100%);
}
.tb-slide.tb-training .tb-tag { background: rgba(82,214,138,.18); border-color: rgba(82,214,138,.34); color: #BFF0CF; }
.tb-slide.tb-training .tb-cta { background: #52D68A; color: #0B2A1C; }
.tb-slide.tb-training .tb-cta:hover { background: #fff; }
.topbar-inner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px var(--gutter); flex-wrap: wrap; text-align: center;
}
.topbar .tb-tag {
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.topbar strong { color: #fff; font-weight: 700; }
.topbar span.sep { color: rgba(255,255,255,.45); }
.topbar .tb-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-green-600));
  padding: 5px 13px; border-radius: var(--r-pill);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.topbar .tb-cta:hover { transform: translateY(-1px); box-shadow: var(--sh-brand); }
.topbar .tb-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); font-size: 1rem; padding: 10px 12px; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.topbar .tb-close:hover { color: #fff; }
@media (max-width: 720px) { .topbar .tb-sub { display: none; } }

header.nav {
  position: sticky; top: 0; z-index: 960;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
header.nav.stuck { border-bottom-color: var(--line); box-shadow: var(--sh-sm); background: rgba(255,255,255,.95); }

.nav-inner {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; margin-right: 8px; }
.brand img { height: 34px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav-links > li { position: relative; }
.nav-links a.nl, .nav-links button.nl {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: .9rem; font-weight: 500;
  color: var(--ink-2); padding: 9px 13px; border-radius: var(--r-sm);
  transition: color .2s, background-color .2s;
}
.nav-links a.nl:hover, .nav-links button.nl:hover { color: var(--zen-green-600); background: var(--zen-green-50); }
.nav-links a.nl.active { color: var(--zen-green-600); }
.nl .chev { font-size: .6rem; opacity: .55; transition: transform .25s var(--ease); }
li.has-menu:hover .chev, li.has-menu:focus-within .chev { transform: rotate(180deg); }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
li.has-menu:hover > .submenu, li.has-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .18s, color .18s;
}
.submenu a:hover { background: var(--surface-2); color: var(--zen-green-600); }
.submenu a .sm-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--zen-green-50); font-size: .95rem; }
.submenu a .sm-txt small { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); line-height: 1.35; margin-top: 1px; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--line); place-items: center; flex-direction: column; gap: 5px;
  background: var(--surface);
}
.burger span { display: block; width: 18px; height: 2px; border-radius: var(--r-pill); background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-links, .nav-actions .btn-desktop { display: none; }
  .burger { display: flex; align-items: center; justify-content: center; }
}


.mobile-menu {
  position: fixed; inset: 0; z-index: 950;
  background: var(--surface);
  padding: calc(var(--nav-total-h, var(--nav-h)) + 20px) var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
  visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu a:not(.btn), .mobile-menu button.mm-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; color: var(--ink);
  padding: 15px 4px; border-bottom: 1px solid var(--line);
}
.mobile-menu .mm-sub { padding-left: 14px; overflow: hidden; max-height: 0; visibility: hidden;
  transition: max-height .35s var(--ease), visibility .35s; }
.mobile-menu .mm-sub.open { max-height: 560px; visibility: visible; }
.mobile-menu .mm-sub a { font-size: .95rem; font-weight: 500; color: var(--body); }
.mobile-menu .mm-cta { margin-top: 26px; display: grid; gap: 12px; }
.mobile-menu .mm-cta .btn { width: 100%; justify-content: center; }


#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100001;
  background: linear-gradient(90deg, var(--zen-green), #56D98A, var(--zen-sky));
  box-shadow: 0 0 12px rgba(37,99,176,.5);
  transition: width .1s linear;
}


.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 100px);
}
.hero-dark {
  background:
    radial-gradient(1200px 620px at 8% -12%, rgba(37,99,176,.22), transparent 58%),
    radial-gradient(1000px 560px at 96% 6%, rgba(74,144,217,.16), transparent 56%),
    linear-gradient(160deg, #0B1730 0%, #14264B 45%, #081426 72%, #060F1F 100%);
  color: var(--on-dark);
}
.hero-dark h1, .hero-dark h2 { color: #fff; }
.hero-dark p { color: #B3C6E0; }
.hero-light { background:
    radial-gradient(1000px 520px at 6% -10%, rgba(37,99,176,.09), transparent 60%),
    radial-gradient(900px 500px at 98% 0%, rgba(74,144,217,.09), transparent 58%),
    linear-gradient(180deg, #FBFDFE 0%, var(--surface) 60%); }

.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 56ch; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: .8125rem; color: var(--muted); }
.hero-dark .hero-meta { color: var(--on-dark-soft); }
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zen-green); box-shadow: var(--ring); animation: zen-pulse 2.4s ease-in-out infinite; }

@keyframes zen-pulse { 0%,100% { box-shadow: var(--ring); } 50% { box-shadow: var(--ring-0); } }

.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }


.app-window {
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  font-size: .8125rem;
  position: relative;
}
.hero-dark .app-window, .bg-dark .app-window {
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--sh-xl);
}
.app-window.tilt { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); transition: transform .6s var(--ease-out); }
.app-window.tilt:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }

.aw-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.aw-dots { display: flex; gap: 6px; flex: none; }
.aw-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.aw-dots i:nth-child(1) { background: #FF5F57; }
.aw-dots i:nth-child(2) { background: #FEBC2E; }
.aw-dots i:nth-child(3) { background: #52D68A; }

.aw-logo { height: 16px; width: auto; flex: none; object-fit: contain; }
.aw-url {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 12px;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-live {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--zen-green-700); background: var(--zen-green-50);
  border: 1px solid var(--zen-green-100); padding: 3px 9px; border-radius: var(--r-pill);
}
.aw-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--zen-green); animation: zen-pulse 2s infinite; }

.aw-body { padding: 16px; background: #fff; }
.aw-body.pad-lg { padding: 20px; }

.aw-tabs { display: flex; gap: 3px; padding: 8px 12px 0; background: #fff; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.aw-tabs::-webkit-scrollbar { display: none; }
.aw-tabs span {
  font-size: .75rem; font-weight: 500; color: var(--muted);
  padding: 8px 12px; border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.aw-tabs span.on { color: var(--zen-green-700); border-bottom-color: var(--zen-green); background: var(--zen-green-50); }


.aw-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 520px) { .aw-kpis { grid-template-columns: repeat(2, 1fr); } }
.aw-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; }
.aw-kpi .v { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.03em; }
.aw-kpi .k { font-size: .6875rem; color: var(--muted); margin-top: 3px; }
.aw-kpi .d { font-size: .625rem; font-weight: 700; margin-top: 4px; }
.aw-kpi .d.up { color: #08461D; }
.aw-kpi .d.down { color: #073F66; }


.aw-list { display: flex; flex-direction: column; gap: 7px; }
.aw-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s, transform .2s;
}
.aw-row:hover { border-color: var(--zen-green-300); transform: translateX(2px); }
.aw-av {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-sky));
  font-family: var(--font-display);
}
.aw-av.v2 { background: linear-gradient(135deg, var(--violet), var(--zen-sky)); }
.aw-av.v3 { background: linear-gradient(135deg, var(--amber), var(--red)); }
.aw-av.v4 { background: linear-gradient(135deg, #4A90D9, #6366F1); }
.aw-main { flex: 1; min-width: 0; }
.aw-t { font-size: .8125rem; font-weight: 500; color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-s { font-size: .6875rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-chip {
  flex: none; font-size: .625rem; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.chip-red    { color: var(--red-ink); background: #FEF3F2; border-color: var(--red-bg); }
.chip-amber  { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-bg); }
.chip-green  { color: var(--zen-green-700); background: var(--zen-green-50); border-color: var(--zen-green-100); }
.chip-sky    { color: #1E4F93; background: #F0F9FF; border-color: #DDEBFA; }
.chip-gray   { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.chip-violet { color: #5B21B6; background: var(--tint-violet); border-color: #E9E1FE; }


.aw-table { width: 100%; font-size: .75rem; }
.aw-table th {
  text-align: left; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.aw-table td { padding: 10px; border-bottom: 1px solid var(--surface-3); color: var(--ink-2); vertical-align: middle; }
.aw-table tr:last-child td { border-bottom: none; }
.aw-table tr:hover td { background: var(--surface-2); }
.aw-table .id { font-family: var(--font-mono); font-size: .6875rem; color: var(--muted); }


.aw-bars { display: flex; flex-direction: column; gap: 9px; }

.aw-bar-item {
  display: grid;
  grid-template-columns: auto minmax(52px, 1fr) auto;
  gap: 10px; align-items: center; font-size: .6875rem;
}
.aw-bar-item .lbl { color: var(--muted); white-space: nowrap; }
.aw-bar-item .track { display: block; height: 7px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; min-width: 0; }
.aw-bar-item .fill { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--zen-green), var(--zen-sky)); width: 0; transition: width 1.1s var(--ease-out); }
.aw-bar-item .pct { text-align: right; font-weight: 700; color: var(--ink); white-space: nowrap; }


.aw-chart { display: flex; align-items: flex-end; gap: 6px; height: 88px; padding-top: 8px; }
.aw-chart .col { flex: 1; border-radius: var(--r-xs) var(--r-xs) 2px 2px; background: linear-gradient(180deg, var(--zen-green-300), var(--zen-green)); min-height: 6px; height: 0; transition: height .8s var(--ease-out); }
.aw-chart .col.alt { background: linear-gradient(180deg, #7FD8F8, var(--zen-sky)); }
.aw-xaxis { display: flex; gap: 6px; margin-top: 7px; }
.aw-xaxis span { flex: 1; text-align: center; font-size: .5625rem; color: var(--muted); }


.aw-spark { width: 100%; height: 60px; }


.aw-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 620px) { .aw-kanban { grid-template-columns: repeat(2, 1fr); } }
.aw-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px; }
.aw-col h6 { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.aw-deal { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 9px; margin-bottom: 6px; }
.aw-deal .n { font-size: .75rem; font-weight: 500; color: var(--ink); }
.aw-deal .a { font-size: .8125rem; font-weight: 700; color: var(--zen-green-600); font-family: var(--font-display); }


.aw-chat { display: flex; flex-direction: column; gap: 10px; }
.aw-msg { max-width: 86%; padding: 10px 13px; border-radius: var(--r-md); font-size: .75rem; line-height: 1.55; }
.aw-msg .who { display: block; font-size: .5625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; opacity: .7; }
.aw-msg.them { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.aw-msg.ai { background: linear-gradient(140deg, var(--tint-violet), #EEF2FF); border: 1px solid #E9E1FE; color: #4C1D95; align-self: flex-start; }
.aw-msg.me { background: linear-gradient(135deg, var(--zen-green), var(--zen-green-600)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.aw-note { font-size: .6875rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }


.aw-flow { display: flex; flex-direction: column; gap: 7px; }
.aw-flow-step { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: .75rem; }
.aw-flow-step .st { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .625rem; font-weight: 700; }
.st.done { background: var(--zen-green-100); color: var(--zen-green-700); }
.st.wait { background: var(--amber-bg); color: var(--amber-ink); }
.st.todo { background: var(--surface-3); color: var(--muted); }
.aw-flow-step .txt { flex: 1; color: var(--ink-2); font-weight: 500; }
.aw-flow-step .stt { font-size: .625rem; color: var(--muted); }
.aw-flow-arrow { text-align: center; color: var(--line-strong); font-size: .875rem; line-height: 1; }


.float-card {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.97);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: .75rem;
  backdrop-filter: blur(12px);
  animation: floaty 5s ease-in-out infinite;
}
.float-card .fc-ico { width: 32px; height: 32px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--zen-green-50); font-size: 1rem; }
.float-card .fc-t { display: block; font-weight: 700; color: var(--ink); font-size: .75rem; line-height: 1.3; white-space: nowrap; }
.float-card .fc-s { display: block; color: var(--muted); font-size: .6875rem; margin-top: 2px; white-space: nowrap; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 780px) { .float-card { display: none; } }


.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: clamp(28px, 4vw, 60px); width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--muted); letter-spacing: -.02em; white-space: nowrap;
  transition: color .25s;
}
.marquee-item:hover { color: var(--ink); }
.marquee-item img { width: 24px; height: 24px; object-fit: contain; border-radius: var(--r-xs); }
.bg-dark .marquee-item { color: #7E8DA3; }
.bg-dark .marquee-item:hover { color: #fff; }

.logo-strip-label { text-align: center; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }


.tabs-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: 32px; width: fit-content; max-width: 100%;
}
.tabs-nav.center { margin-inline: auto; justify-content: center; }
@media (max-width: 479px) {
  .tabs-nav { flex-direction: column; width: 100%; }
  .tabs-nav button { width: 100%; justify-content: center; }
}
.tabs-nav button {
  font-family: var(--font-display); font-size: .875rem; font-weight: 500;
  color: var(--body); padding: 10px 18px; border-radius: var(--r-sm);
  transition: all .24s var(--ease); white-space: nowrap;
}
.tabs-nav button:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.tabs-nav button.on { color: var(--zen-green-700); background: var(--surface); box-shadow: var(--sh-sm); }
.bg-dark .tabs-nav { background: rgba(255,255,255,.05); border-color: var(--dark-line); }
.bg-dark .tabs-nav button { color: var(--on-dark-muted); }
.bg-dark .tabs-nav button.on { color: #fff; background: rgba(255,255,255,.12); }

.tab-panel { display: none; animation: zen-fadeup .45s var(--ease-out); }
.tab-panel.on { display: block; }
@keyframes zen-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.filter-bar button {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 500;
  color: var(--body); background: var(--surface); border: 1px solid var(--line);
  padding: 9px 18px; border-radius: var(--r-pill);
  transition: all .22s var(--ease);
}
.filter-bar button:hover { border-color: var(--zen-green-300); color: var(--zen-green-700); }
.filter-bar button.on { color: #fff; background: linear-gradient(135deg, var(--zen-green), var(--zen-green-600)); border-color: transparent; box-shadow: var(--sh-brand); }

.filter-item { animation: zen-fadeup .4s var(--ease-out); }
.filter-item[hidden] { display: none !important; }


.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: left;
  font-family: var(--font-display); font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); font-weight: 500;
  color: var(--ink); transition: color .2s;
}
.acc-q:hover { color: var(--zen-green-600); }
.acc-q .ai {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: .875rem; color: var(--muted);
  transition: transform .3s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.acc-item.open .acc-q { color: var(--zen-green-700); }
.acc-item.open .ai { transform: rotate(45deg); background: var(--zen-green); border-color: var(--zen-green); color: #fff; }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc-a > div { padding: 0 4px 24px; font-size: .9375rem; line-height: 1.72; color: var(--body); max-width: 78ch; }
.bg-dark .accordion, .bg-dark .acc-item { border-color: var(--dark-line); }
.bg-dark .acc-q { color: #fff; }
.bg-dark .acc-a > div { color: var(--on-dark-muted); }
.bg-dark .acc-q .ai { border-color: var(--dark-line-2); color: var(--on-dark-muted); }


.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.6; color: var(--body); }
.check-list li::before {
  content: '✓'; flex: none;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 700;
  color: var(--zen-green-700); background: var(--zen-green-100);
}
.bg-dark .check-list li { color: var(--on-dark-muted); }
.bg-dark .check-list li::before { color: var(--zen-green-300); background: rgba(37,99,176,.2); }

.x-list li::before { content: '✕'; color: var(--red-ink); background: var(--red-bg); }


.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.5vw, 30px); align-items: center; }
@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
  .compare .cmp-arrow {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    justify-self: center;
    transform: rotate(90deg);
  }
}
.cmp-arrow { font-size: 1.75rem; color: var(--zen-green); font-weight: 400; }
.cmp-box { border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--line); }
.cmp-box.bad  { background: #FFFBFA; border-color: var(--red-bg); }
.cmp-box.good { background: var(--zen-green-50); border-color: var(--zen-green-100); }
.cmp-box h4 { margin-bottom: 16px; font-size: 1rem; }
.cmp-box.bad h4  { color: var(--red-ink); }
.cmp-box.good h4 { color: var(--zen-green-700); }


.timeline { position: relative; display: grid; gap: 4px; }
.tl-item {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.tl-item:last-child { border-bottom: none; }
.tl-num {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  color: #fff; background: linear-gradient(140deg, var(--zen-green), var(--zen-green-600));
  box-shadow: var(--sh-brand);
}
.tl-item.alt .tl-num { background: linear-gradient(140deg, var(--zen-sky), var(--zen-sky-600)); box-shadow: var(--sh-brand); }
.tl-phase { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--zen-green-600); margin-bottom: 5px; }
.tl-body h4 { margin-bottom: 7px; }
.tl-body p { font-size: .9375rem; }
.bg-dark .tl-item { border-color: var(--dark-line); }


.flow { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); position: relative; }
.flow-step { text-align: center; position: relative; }
.flow-step .fs-ico {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: var(--r-lg); display: grid; place-items: center; font-size: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm);
  position: relative; z-index: 2;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.flow-step:hover .fs-ico { transform: translateY(-4px) scale(1.05); box-shadow: var(--sh-md); border-color: var(--zen-green-300); }
.flow-step h4 { font-size: 1rem; margin-bottom: 7px; }
.flow-step p { font-size: .875rem; }
.bg-dark .flow-step .fs-ico { background: rgba(255,255,255,.06); border-color: var(--dark-line); }


.plans { display: grid; gap: clamp(18px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }

.plans > .plan:only-child { max-width: 420px; margin-inline: auto; }
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(26px, 3vw, 34px);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.plan.hot { border: 2px solid var(--zen-green); box-shadow: var(--sh-brand); background: linear-gradient(170deg, #fff 0%, var(--zen-green-50) 100%); }
.plan.hot::before {
  content: 'MÁS POPULAR'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: .625rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: linear-gradient(90deg, var(--zen-green-600), var(--zen-green), var(--zen-sky));
  padding: 6px 18px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: var(--sh-brand);
}
.plan-tier { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--zen-green-600); margin-bottom: 10px; }
.plan h3 { margin-bottom: 6px; }
.plan .plan-sub { font-size: .875rem; color: var(--muted); min-height: 40px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; }
.plan-price .amt { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.3vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.plan-price .per { font-size: .875rem; color: var(--muted); font-weight: 500; }
.plan-note { font-size: .8125rem; font-weight: 700; color: var(--ink-2); margin: 18px 0 12px; }
.plan .check-list { margin-bottom: 26px; }
.plan .check-list li { font-size: .875rem; }
.plan .btn { margin-top: auto; }


.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cmp-table { min-width: 620px; font-size: .875rem; }
.cmp-table th, .cmp-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table thead th { font-family: var(--font-display); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.cmp-table thead th.hl { color: var(--zen-green-700); background: var(--zen-green-50); }
.cmp-table td.hl { background: rgba(37,99,176,.045); font-weight: 500; color: var(--ink); }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .yes { color: var(--zen-green-600); font-weight: 700; }
.cmp-table .no  { color: var(--line-strong); font-weight: 700; }


.quote-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.stars { color: var(--amber); font-size: .875rem; letter-spacing: 2px; }
.quote-card blockquote { font-size: 1rem; line-height: 1.7; color: var(--ink-2); font-weight: 400; }
.quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-who .qa {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-sky));
}

.quote-who > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quote-who .qn { display: block; font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.quote-who .qr { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.35; }
.quote-metrics { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-metrics div { font-size: .75rem; color: var(--muted); }
.quote-metrics b { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--zen-green-600); letter-spacing: -.02em; }


.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 64px);
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(37,99,176,.28), transparent 62%),
    radial-gradient(700px 380px at 88% 100%, rgba(74,144,217,.22), transparent 58%),
    linear-gradient(150deg, #08111F 0%, #0D1B2F 55%, #14264B 100%);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: #B3C6E0; max-width: 62ch; margin-inline: auto; }
.cta-band .row { justify-content: center; margin-top: 30px; }
.cta-band .cta-note { margin-top: 22px; font-size: .8125rem; color: #7E8DA3; }
.cta-band .eyebrow {
  color: var(--zen-green-300);
  background: rgba(37,99,176,.16);
  border: 1px solid rgba(37,99,176,.3);
  border-radius: var(--r-pill);
  padding: 6px 16px;
}
.cta-band .eyebrow::before { content: none; }


.modal-backdrop {
  position: fixed; inset: 0; z-index: 980;
  background: rgba(6,12,22,.72); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal {
  width: 100%; max-width: 470px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl); padding: clamp(26px, 3vw, 36px);
  transform: translateY(18px) scale(.98);
  transition: transform .34s var(--ease-out);
}
.modal-backdrop.open .modal { transform: none; }
.modal-close { position: absolute; top: 14px; right: 16px; font-size: 1.25rem; color: var(--muted); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s, color .2s; }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal h3 { margin-bottom: 8px; }
.modal > p { font-size: .9375rem; margin-bottom: 22px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: .9375rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--zen-green); box-shadow: var(--ring);
}
.field textarea { resize: vertical; min-height: 88px; }
.form-ok {
  display: none; padding: 16px; border-radius: var(--r-sm);
  background: var(--zen-green-50); border: 1px solid var(--zen-green-100);
  color: var(--zen-green-700); font-size: .875rem; font-weight: 500; text-align: center;
}
.form-ok.show { display: block; }


footer.site-footer {
  background: linear-gradient(170deg, #0B1730 0%, #132447 60%, #0D1B36 100%);
  color: var(--on-dark-muted);
  padding-block: clamp(52px, 6vw, 80px) 0;
  position: relative; overflow: hidden;
}
footer.site-footer::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 12% 0%, rgba(37,99,176,.14), transparent 60%),
              radial-gradient(700px 360px at 92% 20%, rgba(74,144,217,.09), transparent 58%);
  pointer-events: none;
}
footer.site-footer > * { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 52px); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }


.footer-brand img { height: 38px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: .9375rem; color: var(--on-dark-soft); max-width: 34ch; }
.f-social { display: flex; gap: 10px; margin-top: 20px; }
.f-social a {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: .9rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--dark-line);
  color: #fff; transition: all .22s var(--ease);
}
.f-social a:hover { background: var(--zen-green); border-color: var(--zen-green); transform: translateY(-2px); }

footer .f-h {
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
footer .f-links { display: grid; gap: 11px; }
footer .f-links a { font-size: .875rem; color: var(--on-dark-soft); transition: color .2s, transform .2s; display: inline-flex; align-items: center; gap: 8px; }
footer .f-links a:hover { color: #fff; transform: translateX(3px); }

.f-contact { display: grid; gap: 13px; }
.f-country { display: flex; align-items: center; gap: 11px; font-size: .875rem; }
.f-country .flag { font-size: 1.1rem; line-height: 1; }
.f-country .cn { color: var(--on-dark-soft); min-width: 62px; }
.f-country a { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; transition: color .2s; }
.f-country a:hover { color: var(--zen-green-300); }

.footer-bottom {
  margin-top: clamp(40px, 5vw, 60px);
  padding-block: 24px;
  border-top: 1px solid var(--dark-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8125rem; color: #6E7C93;
}
.footer-bottom a { color: var(--on-dark-soft); transition: color .2s; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .fb-links { display: flex; gap: 20px; flex-wrap: wrap; }


.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; } .reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; } .reveal-d4 { transition-delay: .28s; }
.reveal-d5 { transition-delay: .35s; } .reveal-d6 { transition-delay: .42s; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hide-sm { }
@media (max-width: 640px) { .hide-sm { display: none !important; } }


.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gal-item {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
  aspect-ratio: 4/3;
}
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
.gal-item:hover img { transform: scale(1.06); }
.gal-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(6,12,22,.85));
  color: #fff; font-size: .8125rem; font-weight: 500;
}


.shot {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-lg);
  background: var(--surface);
}
.shot img { width: 100%; }
.bg-dark .shot { border-color: rgba(255,255,255,.12); box-shadow: var(--sh-xl); }


.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card .pc-img { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.post-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.post-card:hover .pc-img img { transform: scale(1.05); }
.post-card .pc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h3 { font-size: 1.0625rem; line-height: 1.35; }
.post-card .pc-meta { font-size: .75rem; color: var(--muted); display: flex; gap: 10px; align-items: center; }


.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.partner-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: all .26s var(--ease);
}
.partner-tile:hover { border-color: var(--zen-green-300); box-shadow: var(--sh-md); transform: translateY(-3px); }
.partner-tile img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.partner-tile .pt-n { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; color: var(--ink); }
.partner-tile .pt-c { font-size: .75rem; color: var(--muted); }


.callout {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--r-md);
  background: var(--zen-green-50); border: 1px solid var(--zen-green-100);
  font-size: .9375rem; color: var(--zen-green-700);
}
.callout .ci { flex: none; font-size: 1.15rem; line-height: 1.3; }
.callout.sky { background: #F0F9FF; border-color: #DDEBFA; color: #1E4F93; }
.callout.amber { background: var(--amber-soft); border-color: var(--amber-bg); color: var(--amber-ink); }


.pull-quote {
  border-left: 3px solid var(--zen-green);
  padding: 6px 0 6px 24px;
  font-family: var(--font-display); font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  font-weight: 500; line-height: 1.55; color: var(--ink-2); letter-spacing: -.015em;
}
.bg-dark .pull-quote { color: #D5DEEA; }


.prose { max-width: 72ch; font-size: 1.0625rem; line-height: 1.78; color: var(--body); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.2em; margin-bottom: .1em;
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.875rem);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose h3 { margin-top: 1.9em; margin-bottom: .1em; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.prose h4 { margin-top: 1.6em; font-size: 1.0625rem; }
.prose ul, .prose ol { padding-left: 0; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ''; position: absolute; left: 6px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--zen-green);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 30px; counter-increment: n; }
.prose ol li::before {
  content: counter(n) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--zen-green-600);
}
.prose a { color: var(--zen-green-600); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--zen-green-700); }
.prose blockquote {
  border-left: 3px solid var(--zen-green); padding: 4px 0 4px 22px;
  font-size: 1.125rem; font-style: italic; color: var(--ink-2);
}
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: var(--sh-md); margin-block: 1.6em; }
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: 2.4em; }
.prose .callout { font-size: .9375rem; }

.article-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 34px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .875rem; color: var(--muted); margin-top: 16px; }
.article-meta .au { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--ink-2); }
.article-meta .au span.av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-sky));
}


.event-card {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); transition: all .28s var(--ease);
}
.event-card:hover { border-color: var(--zen-green-300); box-shadow: var(--sh-md); transform: translateY(-2px); }
.event-card .ev-date {
  text-align: center; padding: 10px 6px; border-radius: var(--r-md);
  background: var(--zen-green-50); border: 1px solid var(--zen-green-100);
}
.event-card .ev-date .d { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--zen-green-700); line-height: 1; }
.event-card .ev-date .m { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--zen-green-600); margin-top: 3px; }
.event-card h4 { margin-bottom: 5px; }
.event-card .ev-meta { font-size: .8125rem; color: var(--muted); }
@media (max-width: 720px) {
  .event-card { grid-template-columns: 76px 1fr; }
  .event-card > :last-child { grid-column: 1 / -1; }
}


.ico {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  flex: none;
  stroke: currentColor; fill: none;
  overflow: visible;
}
.ico-inline { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: .28em; opacity: .9; }
.ico-emoji { font-style: normal; line-height: 1; }


.c-ico { font-size: 1.5rem; color: var(--zen-green-600); overflow: visible; }
.c-ico .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.c-ico.sky   { color: var(--zen-sky-600); }
.c-ico.navy  { color: var(--zen-navy); }
.c-ico.amber { color: var(--amber-ink); }
.bg-dark .c-ico, .card-dark .c-ico { color: var(--zen-green-300); }


.c-ico .ico { transition: transform .45s var(--ease-out); }
.card-hover:hover .c-ico .ico { transform: scale(1.12) rotate(-6deg); }
.c-ico::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, currentColor, transparent 70%);
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.c-ico { position: relative; }
.card-hover:hover .c-ico::after { opacity: .1; }

.fs-ico { color: var(--zen-green-600); font-size: 1.5rem; }
.fs-ico .ico { width: 26px; height: 26px; }
.bg-dark .fs-ico { color: var(--zen-green-300); }
.flow-step:hover .fs-ico .ico { animation: icoPop .55s var(--ease-out); }
@keyframes icoPop { 0% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }

.sm-ico { color: var(--zen-green-600); font-size: 1rem; }
.sm-ico .ico { width: 17px; height: 17px; }
.submenu a:hover .sm-ico { background: var(--zen-green-100); }

.pill .ico, .aw-chip .ico, .check-list .ico, .btn .ico-inline { opacity: .85; }
.eyebrow .ico-inline { margin-right: .2em; }
.f-links .ico-inline, .footer-bottom .ico-inline { opacity: .7; }


@keyframes drawStroke { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.reveal.in .c-ico .ico > * {
  stroke-dasharray: 120; stroke-dashoffset: 0;
  animation: drawStroke .9s var(--ease-out) both;
}


.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .55;
  will-change: transform;
}
.aurora i:nth-child(1) {
  width: 46vw; height: 46vw; left: -10vw; top: -12vw;
  background: radial-gradient(circle, rgba(37,99,176,.30), transparent 68%);
  animation: drift1 26s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  width: 40vw; height: 40vw; right: -12vw; top: 4vw;
  background: radial-gradient(circle, rgba(74,144,217,.26), transparent 68%);
  animation: drift2 32s ease-in-out infinite;
}
.aurora i:nth-child(3) {
  width: 34vw; height: 34vw; left: 38vw; top: 28vw;
  background: radial-gradient(circle, rgba(26,47,90,.18), transparent 70%);
  animation: drift3 38s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(9vw,7vw,0) scale(1.14); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-8vw,10vw,0) scale(1.2); } }
@keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6vw,-9vw,0) scale(.86); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }


.hero-dark::before, .bg-dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(520px 320px at 18% 24%, rgba(37,99,176,.16), transparent 62%),
    radial-gradient(460px 300px at 82% 68%, rgba(74,144,217,.13), transparent 62%);
  animation: breathe 12s ease-in-out infinite;
}
.hero-dark > *, .bg-dark > * { position: relative; z-index: 1; }
@keyframes breathe { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }


.grid-lines::before { animation: gridDrift 24s linear infinite; }
@keyframes gridDrift { to { background-position: 56px 56px, 56px 56px; } }


.tilt-scene { perspective: 1400px; perspective-origin: 50% 40%; }
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.tilt-3d > * { transform: translateZ(0); }


.app-window {
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease);
}
.hero-dark .app-window {
  animation: floatWindow 9s ease-in-out infinite;
}
@keyframes floatWindow {
  0%, 100% { transform: perspective(1500px) rotateX(2.2deg) rotateY(-4deg) translateY(0); }
  50%      { transform: perspective(1500px) rotateX(1.2deg) rotateY(-2deg) translateY(-12px); }
}
.tilt-scene .app-window { animation: none; }


.app-window::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  opacity: 0; pointer-events: none;
}
.hero-dark .app-window::after { opacity: .6; animation: edgeSweep 6s ease-in-out infinite; }
@keyframes edgeSweep { 0%,100% { transform: translateX(-100%); } 55%,100% { transform: translateX(100%); } }


.reveal .app-window,
.reveal.in .app-window { transition: transform .9s var(--ease-out), opacity .9s var(--ease-out); }
.reveal:not(.in) .app-window {
  transform: perspective(1600px) rotateX(14deg) scale(.94) translateY(26px);
  opacity: 0;
}
.reveal.in .app-window { opacity: 1; }


.app-window-wrap { position: relative; }
.app-window-wrap::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 40px;
  background: radial-gradient(ellipse at center, rgba(37,99,176,.28), transparent 70%);
  filter: blur(18px); pointer-events: none;
}


.card-hover { position: relative; }
.card-hover::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(37,99,176,.10), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.card-hover:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card-dark.card-hover::before { background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(74,144,217,.14), transparent 62%); }


.reveal { will-change: opacity, transform; }
.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(.94); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in { transform: none; }
.reveal-d7 { transition-delay: .49s; } .reveal-d8 { transition-delay: .56s; }


.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .10s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .34s; }
.stagger.in > *:nth-child(n+7) { transition-delay: .40s; }


.btn-primary, .btn-navy, .btn-white { overflow: hidden; }
.btn-primary::after, .btn-navy::after, .btn-white::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after, .btn-navy:hover::after, .btn-white:hover::after { animation: shine .8s var(--ease-out); }
@keyframes shine { to { left: 130%; } }

.btn-magnetic { transition: transform .28s var(--ease-out), box-shadow .28s var(--ease); }


.hero-cta .btn-primary { position: relative; }
.hero-cta .btn-primary::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-sky), var(--zen-green));
  background-size: 250% 250%;
  filter: blur(10px); opacity: .55;
  animation: haloShift 5s linear infinite;
}
@keyframes haloShift { to { background-position: 250% 50%; } }


.aw-row { transition: border-color .25s, transform .25s var(--ease), background-color .25s; }
.aw-row:hover { background: var(--zen-green-50); }

.aw-kpi { position: relative; overflow: hidden; }
.aw-kpi::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(37,99,176,.09) 50%, transparent 60%);
  transform: translateX(-100%);
}
.reveal.in .aw-kpi::after { animation: kpiSweep 1.6s var(--ease-out) .3s; }
@keyframes kpiSweep { to { transform: translateX(100%); } }

.partner-tile, .gal-item, .quote-card, .plan, .event-card { will-change: transform; }
.partner-tile:hover .pt-n { color: var(--zen-green-700); }

.marquee-item img { transition: transform .3s var(--ease), filter .3s; filter: grayscale(1) opacity(.75); }
.marquee-item:hover img { transform: scale(1.15); filter: none; }

.stat .n { transition: transform .3s var(--ease); display: inline-block; }
.stat:hover .n { transform: translateY(-3px) scale(1.03); }

.pill { transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s; }
.pill:hover { transform: translateY(-1px); }

.acc-item { transition: background-color .25s; }
.acc-item.open { background: linear-gradient(90deg, var(--zen-green-50), transparent 55%); }
.bg-dark .acc-item.open { background: linear-gradient(90deg, rgba(37,99,176,.08), transparent 55%); }


.aw-live::before { animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,176,.55); }
  60%      { box-shadow: var(--ring-0); }
}


.aw-bar-item .fill { position: relative; overflow: hidden; }
.aw-bar-item .fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%); animation: barShine 2.4s var(--ease-out) infinite;
}
@keyframes barShine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(220%); } }

.aw-chart .col { position: relative; }
.aw-chart .col:last-child { background: linear-gradient(180deg, #7EE8A2, var(--zen-green-600)); box-shadow: 0 0 14px rgba(37,99,176,.4); }


.link-arrow { position: relative; }
.link-arrow::before {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.link-arrow:hover::before { transform: scaleX(1); transform-origin: left; }


.nav-links a.nl { position: relative; }
.nav-links a.nl.active::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: var(--r-pill); background: linear-gradient(90deg, var(--zen-green), var(--zen-sky));
}


.bg-dark .card-dark { backdrop-filter: blur(12px) saturate(120%); }


@media (prefers-reduced-motion: reduce) {
  .hero-dark .app-window, .hero-dark .app-window::after, .aurora i,
  .hero-dark::before, .bg-dark::before, .grid-lines::before,
  .aw-bar-item .fill::after, .hero-cta .btn-primary::before { animation: none !important; }
  .reveal.in .c-ico .ico > * { animation: none !important; }
}



.c-ico {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background:
    linear-gradient(150deg, rgba(37,99,176,.14), rgba(37,99,176,.04)) padding-box,
    linear-gradient(150deg, rgba(37,99,176,.42), rgba(37,99,176,.10)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--sh-inset);
}
.c-ico .ico { width: 26px; height: 26px; stroke-width: 1.65; }
.c-ico.sky {
  background:
    linear-gradient(150deg, rgba(74,144,217,.14), rgba(74,144,217,.04)) padding-box,
    linear-gradient(150deg, rgba(74,144,217,.45), rgba(74,144,217,.10)) border-box;
}
.c-ico.navy {
  background:
    linear-gradient(150deg, rgba(26,47,90,.11), rgba(26,47,90,.03)) padding-box,
    linear-gradient(150deg, rgba(26,47,90,.35), rgba(26,47,90,.08)) border-box;
}
.c-ico.amber {
  background:
    linear-gradient(150deg, rgba(245,165,36,.16), rgba(245,165,36,.04)) padding-box,
    linear-gradient(150deg, rgba(245,165,36,.5), rgba(245,165,36,.10)) border-box;
}
.bg-dark .c-ico, .card-dark .c-ico {
  background:
    linear-gradient(150deg, rgba(37,99,176,.20), rgba(255,255,255,.03)) padding-box,
    linear-gradient(150deg, rgba(37,99,176,.55), rgba(255,255,255,.08)) border-box;
  box-shadow: var(--sh-inset-d);
}


.flow-step .fs-ico {
  width: 66px; height: 66px; border-radius: var(--r-xl);
  background: linear-gradient(160deg, #fff, var(--surface-2));
  border: 1px solid var(--line);
}
.flow-step .fs-ico::before {
  content: ''; position: absolute; inset: -5px; border-radius: var(--r-xl);
  background: conic-gradient(from 180deg, rgba(37,99,176,.35), rgba(74,144,217,.28), rgba(37,99,176,.35));
  opacity: 0; transition: opacity .35s var(--ease); z-index: -1; filter: blur(6px);
}
.flow-step .fs-ico { position: relative; z-index: 1; }
.flow-step:hover .fs-ico::before { opacity: 1; }
.bg-dark .flow-step .fs-ico { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border-color: var(--dark-line); }


.flow { position: relative; }
.flow::before {
  content: ''; position: absolute; top: 33px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 15px);
  z-index: 0;
}
.flow.in::before, .reveal.in .flow::before { animation: dashRun 22s linear infinite; }
@keyframes dashRun { to { background-position: 300px 0; } }
.bg-dark .flow::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 7px, transparent 7px 15px); }
@media (max-width: 780px) { .flow::before { display: none; } }


.hero-dark::after, .bg-dark::after, .cta-band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.cta-band > * { position: relative; z-index: 1; }


.text-grad {
  background-size: 220% 100%;
  animation: gradShift 7s linear infinite;
}
@keyframes gradShift { to { background-position: 220% 50%; } }


.eyebrow::before { animation: livePulse 2.6s ease-in-out infinite; }


.submenu li { opacity: 0; transform: translateX(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
li.has-menu:hover > .submenu li, li.has-menu:focus-within > .submenu li { opacity: 1; transform: none; }
.submenu li:nth-child(1) { transition-delay: .02s; } .submenu li:nth-child(2) { transition-delay: .05s; }
.submenu li:nth-child(3) { transition-delay: .08s; } .submenu li:nth-child(4) { transition-delay: .11s; }
.submenu li:nth-child(5) { transition-delay: .14s; } .submenu li:nth-child(6) { transition-delay: .17s; }
.submenu li:nth-child(n+7) { transition-delay: .20s; }


.plan.hot::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-sky), var(--zen-green));
  background-size: 250% 250%; filter: blur(14px); opacity: .30;
  animation: haloShift 6s linear infinite;
}
.plan { isolation: isolate; }


.shot { position: relative; overflow: hidden; }
.shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%);
  transform: translateX(-120%);
}
.reveal.in .shot::after { animation: shotSheen 1.5s var(--ease-out) .35s; }
@keyframes shotSheen { to { transform: translateX(120%); } }


.aw-av { box-shadow: 0 0 0 2px var(--surface), 0 2px 6px rgba(11,23,48,.12); }

@media (prefers-reduced-motion: reduce) {
  .text-grad, .eyebrow::before, .plan.hot::after, .flow::before,
  .reveal.in .shot::after { animation: none !important; }
}


::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 3px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

::selection { background: rgba(37,99,176,.22); color: var(--ink); }


@media print {
  header.nav, .topbar, footer.site-footer, .modal-backdrop, #scroll-progress { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


:root {
  

  

  

  

  

  

  
  --ease-halo-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-halo-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-halo-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-fast: .24s;
  --dur-base: .34s;
  --dur-slow: .4s;
}


h1, h2, .plan h3, .cta-band h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h1 { font-weight: 500; }
h2 { font-weight: 500; }
h1 em, h2 em, .text-grad { font-style: normal; }


h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; }


.bg-soft { background: var(--surface-2); }
.bg-mesh {
  background:
    radial-gradient(1000px 500px at 12% -8%, rgba(37,99,176,.06), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, rgba(74,144,217,.05), transparent 60%),
    var(--surface);
}
.bg-cream { background: var(--surface-2); }
.bg-cream-deep { background: var(--surface-3); }


.card { border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); }
.card-soft { background: var(--surface-2); }
.plan { border-radius: var(--r-xl); }
.app-window { border-radius: var(--r-lg); }
.shot { border-radius: var(--r-lg); }


.btn { border-radius: var(--r-sm); }
.btn-lg { border-radius: var(--r-md); }


.reveal {
  transition:
    opacity .7s var(--ease-halo-out),
    transform .7s var(--ease-halo-out);
}
.btn, .card-hover, .pill, .link-arrow, .acc-q, .aw-row, .partner-tile {
  transition-timing-function: var(--ease-halo-out) !important;
}
.submenu { transition-duration: var(--dur-fast); transition-timing-function: var(--ease-halo-out); }
.mobile-menu { transition: transform var(--dur-slow) var(--ease-halo-out); }
.acc-a { transition: max-height var(--dur-slow) var(--ease-halo-soft); }


.line-reveal { display: block; overflow: hidden; }
.line-reveal > span {
  display: block;
  transform: translateY(110%);
  transition: transform .82s var(--ease-halo-out);
}
.reveal.in .line-reveal > span,
.line-reveal.in > span { transform: translateY(0); }
.line-reveal:nth-child(2) > span { transition-delay: .08s; }
.line-reveal:nth-child(3) > span { transition-delay: .16s; }


.shape-band {
  position: absolute; left: 0; right: 0; width: 100%;
  pointer-events: none; z-index: 0;
  height: clamp(180px, 26vw, 380px);
}
.shape-band svg { width: 100%; height: 100%; display: block; }
.shape-band path { transition: none; }
.shape-band.top    { top: -1px; }
.shape-band.bottom { bottom: -1px; }
section > .container { position: relative; z-index: 1; }


.stat .n, .aw-kpi .v { transition: transform var(--dur-base) var(--ease-halo-out); }


[data-parallax] { will-change: transform; }


.marquee-track { animation-timing-function: linear; }


.hs-form-wrap { margin-top: 4px; }
.hs-form-wrap .hs-form-frame { min-height: 120px; }

.hs-form-wrap fieldset { max-width: none !important; border: none; padding: 0; margin: 0; }
.hs-form-wrap .hs-form-field { margin-bottom: 14px; }
.hs-form-wrap label {
  display: block; font-family: var(--font-display);
  font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px;
}
.hs-form-wrap .hs-field-desc { font-size: .75rem; color: var(--muted); margin-bottom: 6px; }
.hs-form-wrap input[type=text],
.hs-form-wrap input[type=email],
.hs-form-wrap input[type=tel],
.hs-form-wrap input[type=number],
.hs-form-wrap select,
.hs-form-wrap textarea {
  width: 100% !important; box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-family: var(--font-body);
  font-size: .9375rem; color: var(--ink);
  transition: border-color .2s var(--ease-halo-out), box-shadow .2s var(--ease-halo-out);
}
.hs-form-wrap input:focus, .hs-form-wrap select:focus, .hs-form-wrap textarea:focus {
  outline: none; border-color: var(--zen-green); box-shadow: var(--ring);
}
.hs-form-wrap textarea { min-height: 88px; resize: vertical; }
.hs-form-wrap .hs-button,
.hs-form-wrap input[type=submit] {
  width: 100%; cursor: pointer;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 700;
  padding: 14px 24px; border: none; border-radius: var(--r-sm); color: #fff;
  background: linear-gradient(135deg, var(--zen-green), var(--zen-green-600));
  box-shadow: var(--sh-brand);
  transition: transform .2s var(--ease-halo-out), box-shadow .25s var(--ease-halo-out);
}
.hs-form-wrap .hs-button:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); }
.hs-form-wrap .hs-error-msg, .hs-form-wrap .hs-error-msgs label {
  color: var(--red-ink); font-size: .75rem; font-weight: 500; margin-top: 4px;
}
.hs-form-wrap ul.hs-error-msgs { list-style: none; padding: 0; }
.hs-form-wrap .legal-consent-container,
.hs-form-wrap .hs-richtext { font-size: .75rem; color: var(--muted); line-height: 1.55; }
.hs-form-wrap .hs-form-booleancheckbox-display { display: flex; gap: 8px; align-items: flex-start; }
.hs-form-wrap .submitted-message {
  padding: 18px; border-radius: var(--r-sm);
  background: var(--zen-green-50); border: 1px solid var(--zen-green-100);
  color: var(--zen-green-700); font-size: .9375rem; text-align: center;
}
.modal-alt { margin-top: 14px; font-size: .75rem; color: var(--muted); text-align: center; }
.modal-alt a { color: var(--zen-green-600); font-weight: 500; }


.modal { max-width: 520px; }

@media (prefers-reduced-motion: reduce) {
  .line-reveal > span { transform: none !important; }
}


.section.has-shape { overflow: hidden; }
.section.has-shape > .container { position: relative; z-index: 1; }


.text-grad {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-size: 100% 100%;
  animation: none;
}
.line-reveal > span { -webkit-box-decoration-break: clone; box-decoration-break: clone; }


:root {
  
}

body { line-height: 1.5; }
p { max-width: 68ch; }
.lead { line-height: 1.45; max-width: 60ch; }
.card p, .quote-card blockquote { line-height: 1.7; }
.sec-head { margin-bottom: clamp(48px, 5.5vw, 76px); }
.sec-head h2 { margin-bottom: 20px; line-height: 1.10; }
.sec-head.center .lead { margin-inline: auto; }
.eyebrow { margin-bottom: 26px; letter-spacing: .14em; }

.hero h1 { margin-bottom: 26px; line-height: 1.05; }
.hero .lead { margin-bottom: 38px; }
.hero-cta { gap: 14px; margin-bottom: 32px; }
.hero-tags { gap: 10px; margin-bottom: 32px; }

.card { gap: 14px; }
.card h3, .card h4 { margin-bottom: 4px; line-height: 1.3; }
.check-list { gap: 14px; }
.check-list li { line-height: 1.65; }
.grid { gap: clamp(18px, 2.2vw, 28px); }
.tl-item { padding: 28px 0; }
.tl-body p { line-height: 1.7; }
.flow-step p { line-height: 1.7; max-width: 34ch; margin-inline: auto; }
.plan { padding: clamp(30px, 3.2vw, 40px); }
.plan .check-list { gap: 13px; }
.cta-band { padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 72px); }
.cta-band h2 { margin-bottom: 20px; line-height: 1.14; }
.prose { line-height: 1.82; }
.prose > * + * { margin-top: 1.3em; }
.stat .l { line-height: 1.5; max-width: 26ch; margin-inline: auto; }
.footer-grid { gap: clamp(34px, 4.5vw, 64px); }
footer .f-links { gap: 13px; }


.f-social a svg { display: block; }
.f-social a { transition: all .24s var(--ease-halo-out); }


:root {
  --ease-custom:       cubic-bezier(.215, .61, .355, 1);
  --ease-bounce-soft:  cubic-bezier(.4, 1.65, .3, 1);
  --dur-slowest: 1.4s;
  --dur-slower:  .9s;
  --stagger-word: 40ms;
}

@keyframes split-clip-reveal {
  0%  { transform: translateY(110%); clip-path: inset(-100% 0 110%); opacity: 0; }
  to  { transform: translateY(0);    clip-path: inset(-10%);          opacity: 1; }
}
@keyframes fade-reveal {
  0%  { transform: translateY(120%); opacity: 0; filter: blur(.2rem); }
  to  { transform: translateY(0);    opacity: 1; filter: blur(0); }
}


.sw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sw > span {
  display: inline-block;
  transform: translateY(110%);
  clip-path: inset(-100% 0 110%);
  opacity: 0;
  will-change: transform, clip-path, opacity;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-lines].in .sw > span {
  animation: split-clip-reveal var(--dur-slowest) var(--ease-custom) both;
  animation-delay: calc(var(--wi, 0) * var(--stagger-word));
}


.line-reveal > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sw > span { transform: none !important; clip-path: none !important; opacity: 1 !important; animation: none !important; }
}


.orbit-w {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  aspect-ratio: 1430 / 640;
  opacity: 0;
  transition: opacity .8s var(--ease-custom);
}
.orbit-w.orbit-ready { opacity: 1; }
.orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-svg path { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 5 8; opacity: .75; }
.bg-dark .orbit-svg path { stroke: rgba(255,255,255,.18); }

.orbit-item {
  position: absolute; top: 0; left: 0;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  transition: box-shadow .3s var(--ease-custom), border-color .3s;
  will-change: transform;
}
.orbit-item img { width: 28px; height: 28px; object-fit: contain; }
.orbit-item:hover { border-color: var(--zen-green-300); box-shadow: var(--sh-brand); }
.bg-dark .orbit-item { background: rgba(255,255,255,.07); border-color: var(--dark-line); backdrop-filter: blur(8px); }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 2;
}
.orbit-core img { width: 96px; margin-inline: auto; }
.orbit-core .oc-t {
  margin-top: 14px; font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700; color: var(--muted);
}
.bg-dark .orbit-core .oc-t { color: var(--on-dark-muted); }
@media (max-width: 760px) { .orbit-w { display: none; } }


.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84vw, 360px);
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: 6px 22px;
  scrollbar-width: none;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.arrastrando { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.carousel-track > * { scroll-snap-align: start; }
@media (min-width: 780px)  { .carousel-track { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (min-width: 1100px) { .carousel-track { grid-auto-columns: calc((100% - 52px) / 3); } }

.carousel-nav { display: flex; align-items: center; gap: 10px; }
.carousel-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink); cursor: pointer;
  transition: all .26s var(--ease-halo-out);
}
.carousel-nav button:hover:not(:disabled) {
  background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px);
}
.carousel-nav button:disabled { opacity: .3; cursor: default; }
.carousel-nav button svg { width: 18px; height: 18px; }
.bg-dark .carousel-nav button { background: rgba(255,255,255,.07); border-color: var(--dark-line); color: #fff; }
.bg-dark .carousel-nav button:hover:not(:disabled) { background: #fff; color: var(--ink); }

.carousel-dots { display: flex; gap: 7px; margin-left: auto; }
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--line-strong); border: none; cursor: pointer;
  transition: all .26s var(--ease-halo-out);
}
.carousel-dots button.on { width: 26px; border-radius: var(--r-pill); background: var(--zen-green); }
.bg-dark .carousel-dots button { background: rgba(255,255,255,.24); }

.carousel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}


.plan-price { position: relative; }
.precio-velado { cursor: pointer; }
.precio-velado .amt,
.precio-velado .per { filter: blur(11px); user-select: none; transition: filter .45s var(--ease-custom); }
.precio-velado::after {
  content: "Ver precio";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  color: var(--zen-green-700);
  background: rgba(255,255,255,.35);
  border-radius: var(--r-sm);
  transition: color .3s var(--ease-custom);
}
.precio-velado:hover::after { color: var(--zen-green); }
.precio-velado:focus-visible { outline: 2px solid var(--zen-green); outline-offset: 4px; border-radius: var(--r-sm); }


.ev-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.ev-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--dark-2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-xl);
  transition: transform .3s var(--ease-bounce-soft), border-color .25s, box-shadow .25s;
}
.ev-card:hover {
  transform: translateY(-6px);
  border-color: rgba(37,99,176, .45);
  box-shadow: var(--sh-xl);
}
.ev-photo { position: relative; height: 210px; flex: none; overflow: hidden; }
.ev-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.52) saturate(.72);
  transition: transform .65s var(--ease-custom), filter .45s;
}
.ev-card:hover .ev-photo img { transform: scale(1.07); filter: brightness(.64) saturate(.9); }
.ev-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 13, 27, .97) 0%, rgba(7, 13, 27, .3) 55%, transparent 100%);
}
.ev-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; }
.ev-bar.g { background: linear-gradient(90deg, var(--zen-green), #50FFCC); }
.ev-bar.b { background: linear-gradient(90deg, var(--zen-sky), #90C4FF); }
.ev-bar.a { background: linear-gradient(90deg, var(--amber), #FFD79A); }
.ev-bar.d { background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)); }
.ev-meta-top {
  position: absolute; inset: 16px 18px auto; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.ev-flag { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); }
.ev-estado {
  font-family: var(--font-display); font-size: .625rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-sm); backdrop-filter: blur(8px); white-space: nowrap;
}
.ev-estado.hot { background: rgba(245, 165, 36, .2);   color: #FBBF24; border: 1px solid rgba(245, 165, 36, .4); }
.ev-estado.ok  { background: rgba(37,99,176, .16);   color: var(--zen-green-300); border: 1px solid rgba(37,99,176, .4); }
.ev-estado.tbc { background: rgba(255, 255, 255, .1);  color: #C9D4E3; border: 1px solid rgba(255, 255, 255, .2); }
.ev-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ev-body h3 { color: #fff; font-size: 1.125rem; line-height: 1.32; }
.ev-when { font-size: .8125rem; color: var(--zen-green-300); font-weight: 500; }
.ev-body p { color: var(--on-dark-muted); font-size: .9375rem; }
.ev-extra { font-size: .8125rem; color: var(--on-dark-soft); display: grid; gap: 5px; }
.ev-body .btn { margin-top: auto; align-self: flex-start; }


.ev-past { height: 100%; }
.ev-past .pc-img { aspect-ratio: 16 / 10; }
.ev-past .pc-body { gap: 12px; }


.text-grad .sw > span {
  background-image: linear-gradient(100deg, var(--zen-green) 0%, #7BE9AA 40%, var(--zen-sky) 85%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}




.sec-domo {
  --domo: calc(26px + (1 - var(--p, 0)) * 86px);
  position: relative;
  z-index: 1;
  margin-top: -112px;
  padding-top: calc(var(--section-y) + 112px);
  border-radius: 50% 50% 0 0 / var(--domo) var(--domo) 0 0;
}
.hero + .sec-domo { margin-top: 0; padding-top: var(--section-y); }


[data-esc="crecer"] {
  scale: calc(0.78 + 0.22 * var(--p, 1));
  opacity: calc(0.35 + 0.65 * var(--p, 1));
  transform-origin: 50% 60%;
  will-change: scale, opacity;
}


[data-esc="deriva"] {
  scale: 1.12;
  translate: 0 calc(var(--q, 0) * -16px);
  will-change: translate;
}


[data-esc="satelite"] {
  translate: calc(var(--sat, 1) * (1 - var(--p, 1)) * -34px) calc((1 - var(--p, 1)) * 26px);
  opacity: var(--p, 1);
  will-change: translate, opacity;
}


[data-esc="cabecera"] {
  translate: 0 calc(var(--q, 0) * -20px);
  will-change: translate;
}


[data-esc="contra"] {
  translate: 0 calc(var(--q, 0) * 12px);
  will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
  [data-esc="cabecera"], [data-esc="contra"] { translate: none !important; }
}


.reveal.rev-auto { transition-delay: var(--rd, 0s); }





@media (prefers-reduced-motion: reduce) {
  .sec-domo { --domo: 26px; }
  [data-esc="crecer"], [data-esc="deriva"],
  [data-esc="satelite"], .reveal.rev-fan {
    scale: 1; translate: 0; rotate: none; opacity: 1;
  }
  [data-esc="deriva"] { scale: 1.12; }
}


.reveal {
  transition: opacity .9s var(--ease-custom), transform .9s var(--ease-custom),
              rotate .95s var(--ease-custom), translate .95s var(--ease-custom);
}
.reveal:not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.rev-fan) {
  
  transform: translateY(35px);
}
.reveal.in:not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.rev-fan) {
  transform: none;
}




h1 { font-size: clamp(2.5rem, 1.35rem + 2.4vw, 3.5rem); letter-spacing: -.048em; }
h2 { font-size: clamp(2rem, 1.2rem + 1.55vw, 2.5rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.5rem); }
h4 { font-size: clamp(1rem, .96rem + .22vw, 1.1875rem); }


body { font-size: clamp(1rem, .97rem + .14vw, 1.0625rem); }
p    { max-width: 68ch; }
.lead { font-size: clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem); }


.stat .n        { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); }
.plan-price .amt { font-size: clamp(1.75rem, 1.45rem + 1vw, 2.375rem); }
.cta-band h2    { font-size: clamp(1.625rem, 1.25rem + 1.35vw, 2.375rem); }


.sec-head { margin-bottom: clamp(36px, 4vw, 64px); }


[data-esc="crecer"] {
  scale: calc(0.55 + 0.45 * var(--p, 1));
  opacity: calc(0.25 + 0.75 * var(--p, 1));
}


.card p,
.check-list li,
.tl-body p,
.ev-body p,
.acc-a > div,
.prose .callout { font-size: 1rem; }

.card p        { line-height: 1.58; }
.check-list li { line-height: 1.56; }
.acc-a > div   { line-height: 1.6; max-width: 68ch; }



.car3d [data-carousel-track] { perspective: 1400px; perspective-origin: 50% 45%; }

.car3d [data-carousel-track] > * {
  transform: rotateY(calc(var(--d, 0) * -13deg))
             translateZ(calc(var(--dabs, 0) * -120px))
             scale(calc(1 - var(--dabs, 0) * 0.07));
  transform-origin: 50% 50%;
  transition: opacity .4s var(--ease-custom);
  opacity: calc(1 - var(--dabs, 0) * 0.16);
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .car3d [data-carousel-track] > * { transform: none; opacity: 1; }
}


.card, .partner-tile, .plan, .ev-card, .post-card {
  transition: transform .42s var(--ease-custom),
              box-shadow .42s var(--ease-custom),
              border-color .3s ease;
}
.card:hover, .partner-tile:hover, .post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-strong);
}


.c-ico, .fs-ico, .pt-ico {
  transition: transform .5s var(--ease-bounce-soft), background-color .3s ease;
}
.card:hover .c-ico, .card:hover .fs-ico, .partner-tile:hover .pt-ico {
  transform: translateY(-3px) scale(1.08);
}


.btn { transition: transform .2s var(--ease-custom), box-shadow .28s var(--ease-custom), background-color .22s ease; }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }


.link-arrow { transition: color .24s ease; }
.link-arrow::after,
.link-arrow > svg { transition: transform .32s var(--ease-custom); }
.link-arrow:hover::after,
.link-arrow:hover > svg { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .car3d [data-carousel-track] > * { transform: none; filter: none; }
  .card:hover, .partner-tile:hover, .post-card:hover,
  .btn:hover, .btn:active { transform: none; }
}




@keyframes zen-fade-reveal {
  0%  { transform: translateY(120%); opacity: 0; filter: blur(.2rem) }
  to  { transform: translate(0, 0);  opacity: 1; filter: blur(0rem) }
}





[data-esc="crecer"].crecer-sangra {
  --sangre: calc(var(--p, 1) * 5vw);
  margin-inline: calc(var(--sangre) * -1);
  max-width: none;
}
@media (max-width: 900px) {
  [data-esc="crecer"].crecer-sangra { --sangre: 0px; margin-inline: 0; }
}


@keyframes zen-subir {
  0% { transform: translateY(70px); opacity: 0 }
  to { transform: translateY(0);   opacity: 1 }
}
.car3d [data-carousel-track] > * { animation: zen-subir .9s var(--ease-custom) both; }
.car3d [data-carousel-track] > *:nth-child(2) { animation-delay: .08s }
.car3d [data-carousel-track] > *:nth-child(3) { animation-delay: .16s }
.car3d [data-carousel-track] > *:nth-child(4) { animation-delay: .24s }
.car3d [data-carousel-track] > *:nth-child(n+5) { animation-delay: .3s }


.circulos {
  
  position: absolute; right: 6%; top: 4%;
  width: clamp(200px, 24vw, 380px); aspect-ratio: 1;
  pointer-events: none; z-index: 0;
}
.circulos .ci {
  position: absolute; border-radius: 999px;
  background:
    radial-gradient(circle at 30% 26%, rgba(74,144,217,.55), transparent 58%),
    radial-gradient(circle at 68% 74%, rgba(37,99,176,.5), transparent 62%);
  filter: blur(26px);
  will-change: transform, opacity;
}

.circulos .c1 { width:52%; height:52%; left:0;    top:0 }
.circulos .c2 { width:46%; height:46%; right:0;  top:8% }
.circulos .c3 { width:44%; height:44%; left:12%; bottom:6% }
.circulos .c4 { width:38%; height:38%; right:8%; bottom:0 }
.sec-domo { position: relative; overflow: hidden; }
.sec-domo > .container { position: relative; z-index: 1; }


.con-dispersos { position: relative; }
.dispersos { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.di {
  position: absolute; width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  animation: zen-flotar 7s ease-in-out infinite alternate;
  animation-delay: var(--r, 0s);
  opacity: .82;
}
.di img { width: 24px; height: 24px; object-fit: contain }
.bg-dark .di { background: rgba(255,255,255,.07); border-color: var(--dark-line); backdrop-filter: blur(8px) }
@keyframes zen-flotar {
  from { transform: translate3d(0, calc(var(--amp, 8px) * -1), 0) }
  to   { transform: translate3d(0, var(--amp, 8px), 0) }
}
@media (max-width: 900px) { .dispersos { display: none } }




@media (prefers-reduced-motion: reduce) {
  .car3d [data-carousel-track] > * { animation: none; opacity: 1; transform: none; filter: none }
  .reveal.rev-auto { filter: none }
  .di { animation: none }
  [data-esc="crecer"].crecer-sangra { --sangre: 0px; margin-inline: 0 }
}




.split:has(.grid) {
  
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 3.4vw, 52px);
  
  align-items: center;
}
.split:has(.grid) > *:first-child { padding-top: clamp(0px, 2vw, 28px) }

.split:has(> *:first-child .grid) { grid-template-columns: 1.2fr .8fr; }
.split:has(> *:first-child .grid) > *:first-child { padding-top: 0 }

.split:has(> *:last-child .grid) { grid-template-columns: .8fr 1.2fr; }


@media (max-width: 980px) {
  .split:has(.grid),
  .split:has(> *:first-child .grid),
  .split:has(> *:last-child .grid) {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .split:has(.grid) > *:first-child,
  .split:has(> *:first-child .grid) > *:first-child { padding-top: 0; }
}


@media (min-width: 900px) {
  .split:has(> *:first-child .grid) > *:last-child {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
@media (max-width: 900px) {
  .split:has(.grid) { grid-template-columns: 1fr; }
  .split:has(.grid) > *:first-child { padding-top: 0 }
}

.split .grid.g-2 .card p { max-width: 34ch }


:root {
  
  --dur-nav: .32s;
  --dur-carrusel: .6s;
}
.marquee-track { animation-duration: var(--dur-marquee, 38s) }
.nav .submenu, .nav .mega { transition-duration: var(--dur-nav) }
.car3d [data-carousel-track] > * {
  transition: opacity var(--dur-carrusel) var(--ease-custom);
}




[data-precio-oculto] .amt,
[data-precio-oculto] .per {
  filter: blur(11px);
  user-select: none;
  pointer-events: none;
}
[data-precio-oculto] { position: relative; }
[data-precio-oculto]::after {
  content: "Consultar precio";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--zen-green-600);
}
.bg-dark [data-precio-oculto]::after { color: var(--zen-green-300); }

[data-precio-oculto] .amt, [data-precio-oculto] .per { speak: none; }


html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

[data-carousel-track], .marquee, .cmp-table-wrap { }



:root { --ciclo-pulso: 5.333s; }


@keyframes zen-pulso-giro {
  0%,   3%   { transform: rotate(0deg) }
  35%,  63%  { transform: rotate(180deg) }
  95%, 100%  { transform: rotate(360deg) }
}
.pulso-giro {
  animation: zen-pulso-giro var(--ciclo-pulso) var(--ease-custom) infinite;
}


@keyframes zen-pulso-latir {
  0%,   3%   { opacity: .55; scale: .97 }
  19%        { opacity: 1;   scale: 1.03 }
  35%,  63%  { opacity: .78; scale: 1 }
  79%        { opacity: 1;   scale: 1.03 }
  95%, 100%  { opacity: .55; scale: .97 }
}
.pulso-latir {
  animation: zen-pulso-latir var(--ciclo-pulso) var(--ease-custom) infinite;
}




@media (prefers-reduced-motion: reduce) {
  .pulso-giro, .pulso-latir, .circulos .ci { animation: none }
}


.hero .hero-grid > div,
.hero h1,
.hero .lead,
.hero .eyebrow,
.hero .hero-cta,
.hero .hero-meta {
  opacity: 1;
}
.hero .hero-grid > div.reveal:not(.in) { opacity: 1; transform: none; }






.hero .reveal:not(.title-phase-1):not(.title-phase-2),
.hero .rev-auto:not(.title-phase-1):not(.title-phase-2) {
  opacity: 1;
  filter: none;
}



@media (min-width: 1024px) {
  .hero-centro .hero-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(28px, 3.4vw, 48px);
  }
  .hero-centro .hero-grid > div { width: 100%; }

  
  .hero-centro .hero-grid > div:first-child {
    position: relative;
    text-align: center;
    max-width: 850px;
    margin-inline: auto;
  }
  .hero-centro .title-phase-1 { margin-bottom: 18px; }
  .hero-centro .title-phase-2 {
    max-width: 68ch;
    margin-inline: auto;
    margin-bottom: 26px;
  }
  .hero-centro .hero-cta,
  .hero-centro .hero-tags,
  .hero-centro .hero-meta { justify-content: center; }
  .hero-centro .eyebrow { margin-inline: auto; }

  
  .hero-centro .hero-visual,
  .hero-centro .hero-grid > div:last-child {
    max-width: 980px;
    margin-inline: auto;
  }
  .hero-centro .app-window,
  .hero-centro .shot { transform-origin: center center; }
}




@media (prefers-reduced-motion: reduce) {
  .hero-centro .title-phase-2 { opacity: 1 !important; transform: none !important; }

}



.hero .lead,
.hero-centro .title-phase-2 {
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 580px;
  margin: 16px auto 0 auto;
}
.hero-dark .lead,
.hero-dark .title-phase-2 { color: var(--on-dark-muted); }


.grid > .card, .grid > article, .plans > .plan, .ev-bento > .ev-card,
.cards-grid > .card-item {
  transform-style: flat;
  rotate: none;
}



.hero-titles-container { position: relative; width: 100%; }
.hero-phase-1-group { position: relative; z-index: 2; }
.hero-col .lead.title-phase-2 { position: relative; }

@media (min-width: 1024px) {
  .hero-centro .hero-titles-container {
    max-width: 820px;
    margin: 0 auto 32px auto;
    min-height: 160px;
    text-align: center;
  }

  
  .hero-2f .title-phase-2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 20px);
    width: 100%;
    max-width: 580px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.45;
    text-align: center;
  }
  .hero-2f.hero-light .title-phase-2 { color: var(--muted); }
  .hero-2f.hero-dark  .title-phase-2 { color: var(--on-dark-muted); }
}





@media (prefers-reduced-motion: reduce) {
  .hero-2f .title-phase-2 {
    position: relative; opacity: 1; transform: none;
    left: auto; pointer-events: auto;
  }
}



.cf-on {
  --cf-card: clamp(240px, 30vw, 420px);
  
  overflow-x: clip;
}

@media (max-width: 520px) {
  .cf-on { --cf-card: min(240px, 74vw); }
}

.cf-on [data-carousel-track] {
  display: block;              
  position: relative;
  height: calc(var(--cf-card) * 0.72);
  overflow: visible;
  grid-auto-flow: unset;
  grid-auto-columns: unset;
  scroll-snap-type: none;
  transform-style: preserve-3d;
  cursor: grab;
  outline: none;
  touch-action: pan-y;         
  padding: 0;
}
.cf-on.cf-drag [data-carousel-track] { cursor: grabbing; }
.cf-on [data-carousel-track]:focus-visible { outline: 2px solid var(--zen-green); outline-offset: 6px; }

.cf-on [data-carousel-track] > * {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--cf-card);
  height: 100%;
  margin: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.cf-on .ev-past .pc-img { aspect-ratio: auto; height: 62%; }
.cf-on .ev-past .pc-body { padding: 14px 16px 16px; }
.cf-on .ev-past .pc-body ul,
.cf-on .ev-past .pc-body .pc-meta { display: none; }
.cf-on .ev-past h3 { font-size: 1.0625rem; }
.cf-on .ev-past p { font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
  .cf-on { --cf-card: clamp(200px, 62vw, 300px); }
  .cf-on [data-carousel-track] { height: calc(var(--cf-card) * 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .cf-on [data-carousel-track] { display: grid; height: auto; perspective: none; }
  .cf-on [data-carousel-track] > * { position: relative; left: auto; width: auto; height: auto; transform: none !important; opacity: 1 !important; }
}



[data-horiz] { overflow: hidden; }
[data-horiz-fila] {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}
[data-horiz-fila] > * { flex: 0 0 auto; width: clamp(280px, 26vw, 380px); }


[data-horiz]:not(.horiz-on) [data-horiz-fila] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
[data-horiz]:not(.horiz-on) [data-horiz-fila] > * { scroll-snap-align: start; }

.horiz-on { display: flex; align-items: center; min-height: 100vh; }
.horiz-on [data-horiz-fila] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .horiz-on { min-height: 0; }
  .horiz-on [data-horiz-fila] { transform: none !important; overflow-x: auto; }
}




[data-precio-oculto] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  text-align: center;
}
[data-precio-oculto] .amt,
[data-precio-oculto] .per {
  filter: blur(14px);
  opacity: .3;
  user-select: none;
  pointer-events: none;
}
[data-precio-oculto]::after {
  content: "Consultar precio";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--zen-green-600);
}
.bg-dark [data-precio-oculto]::after { color: var(--zen-green-300); }


.ev-capa {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0; visibility: hidden;
  transition: opacity .34s var(--ease-custom), visibility .34s;
}
.ev-capa.abierta { opacity: 1; visibility: visible; }
.ev-capa-fondo { position: absolute; inset: 0; background: rgba(6,12,22,.72); backdrop-filter: blur(6px); }
.ev-capa-caja {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  transform: translateY(18px) scale(.97);
  transition: transform .4s var(--ease-custom);
}
.ev-capa.abierta .ev-capa-caja { transform: none; }
.ev-capa-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.9);
  font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer;
}
.ev-capa-x:hover { background: #fff; border-color: var(--line-strong); }


.ev-ficha { border: 0; box-shadow: none; }
.ev-ficha .pc-img { aspect-ratio: 16/9; height: auto; }
.ev-ficha .pc-img img { transform: none !important; scale: 1 !important; }
.ev-ficha .pc-body { padding: 22px 26px 28px; }
.ev-ficha .pc-body ul,
.ev-ficha .pc-body .pc-meta { display: block; }
.ev-ficha .pc-body p {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  font-size: 1rem; line-height: 1.6;
}
.ev-ficha h3 { font-size: 1.375rem; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .ev-capa, .ev-capa-caja { transition: none; }
}



@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {

    
    @keyframes zen-hundir {
      to { transform: scale(.93) translateY(-40px); opacity: .45; filter: blur(2px); }
    }
    .section:not(.hero):not(.sec-domo) {
      animation: zen-hundir linear both;
      animation-timeline: view();
      animation-range: exit -10% exit 90%;
      transform-origin: 50% 0%;
    }

    
    @keyframes zen-emerger {
      from { transform: scale(.96) translateY(48px); opacity: .55; }
      to   { transform: none; opacity: 1; }
    }
    .section.bg-soft, .section.bg-mesh, .sec-domo {
      animation: zen-emerger linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
      transform-origin: 50% 100%;
    }

    
    @keyframes zen-domo-plano {
      from { border-radius: 50% 50% 0 0 / 112px 112px 0 0 }
      to   { border-radius: 50% 50% 0 0 / 26px 26px 0 0 }
    }
    .sec-domo {
      animation: zen-emerger linear both, zen-domo-plano linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 85%, entry 0% cover 30%;
    }

    
    @keyframes zen-derivar { from { translate: 0 22px } to { translate: 0 -22px } }
    .pc-img img, .ev-photo img, .shot img {
      animation: zen-derivar linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      scale: 1.12;
    }

    
    @keyframes zen-crecer-vista {
      from { scale: .84 }
      to   { scale: 1 }
    }
    .app-window:not(.hero .app-window) {
      animation: zen-crecer-vista linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }

    
    @keyframes zen-progreso { from { transform: scaleX(0) } to { transform: scaleX(1) } }
    #scroll-progress {
      width: 100% !important;
      transform-origin: 0 50%;
      animation: zen-progreso linear both;
      animation-timeline: scroll(root block);
    }
  }
}


@supports (animation-timeline: view()) {
  @media (min-width: 1024px) {
    [data-esc="deriva"] { translate: none !important; }
  }
}




.stat .n, .plan-price .amt, [data-count] { letter-spacing: -.045em; }

h1 em, h2 em { letter-spacing: inherit; }


.eyebrow, .logo-strip-label, .aw-chip { letter-spacing: .07em; }


.card, .plan, .partner-tile, .post-card, .ev-card, .shot, .app-window {
  border-width: 1px;
}



.c-ico,
.c-ico.sky,
.c-ico.navy,
.c-ico.amber,
.c-ico.violet {
  background:
    linear-gradient(150deg, rgba(37,99,176,.13), rgba(37,99,176,.035)) padding-box,
    linear-gradient(150deg, rgba(37,99,176,.42), rgba(37,99,176,.08)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--sh-inset);
  color: var(--zen-green-600);
}
.c-ico .ico { color: var(--zen-green-600); }


.card-hover:hover .c-ico,
.card:hover .c-ico {
  background:
    linear-gradient(150deg, rgba(37,99,176,.2), rgba(37,99,176,.06)) padding-box,
    linear-gradient(150deg, rgba(37,99,176,.6), rgba(37,99,176,.14)) border-box;
  transform: translateY(-3px) scale(1.06);
}

.bg-dark .c-ico,
.bg-dark .c-ico.sky,
.bg-dark .c-ico.navy,
.bg-dark .c-ico.amber {
  background:
    linear-gradient(150deg, rgba(37,99,176,.2), rgba(37,99,176,.06)) padding-box,
    linear-gradient(150deg, rgba(82,214,138,.42), rgba(82,214,138,.10)) border-box;
  box-shadow: var(--sh-inset-d);
  color: var(--zen-green-300);
}
.bg-dark .c-ico .ico { color: var(--zen-green-300); }


.pill-sky,
.pill-navy,
.pill-violet {
  color: var(--ink-2);
  background: var(--surface-3);
  border-color: var(--line);
}


.aw-chip.chip-amber { color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-bg); }
.aw-chip.chip-red   { color: var(--red-ink);   background: var(--red-soft); border-color: var(--red-bg); }


.sw {
  padding-bottom: .18em;
  margin-bottom: -.18em;
  padding-top: .08em;
  margin-top: -.08em;
}


.text-grad,
.text-grad .sw > span {
  padding-bottom: .12em;
  margin-bottom: -.12em;
}



.aurora3d {
  position: absolute;
  top: 46%; left: 50%;
  width: clamp(460px, 52vw, 880px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}
.hero-centro > .container { position: relative; z-index: 1; }

.aurora3d-in {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}


.aurora3d .luz {
  position: absolute; inset: 8%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(74,144,217,.58), transparent 56%),
    radial-gradient(circle at 70% 60%, rgba(37,99,176,.52), transparent 58%),
    radial-gradient(circle at 48% 86%, rgba(82,214,138,.40), transparent 56%);
  filter: blur(30px);
}


.aurora3d .halo {
  position: absolute; inset: 14%;
  border-radius: 999px;
  border: 1.5px solid rgba(82,214,138,.42);
  box-shadow: inset 0 0 70px rgba(74,144,217,.22), 0 0 40px rgba(37,99,176,.14);
  transform: rotateX(72deg);
}
.aurora3d .halo.h2 { inset: 26%; transform: rotateX(72deg) rotateZ(48deg); opacity: .75 }
.aurora3d .halo.h3 { inset: 4%; transform: rotateX(72deg) rotateZ(-40deg); opacity: .5 }


@media (min-width: 1024px) {
  .aurora3d-in {
    transform:
      rotateY(calc(-34deg + var(--p, .5) * 68deg))
      rotateX(calc(6deg - var(--p, .5) * 12deg))
      scale(calc(.72 + var(--p, .5) * .48));
    opacity: calc(.22 + var(--p, .5) * .78);
  }
}


@supports not (animation-timeline: view()) {
  .aurora3d-in { transform: rotateY(-8deg) scale(.95); opacity: .7 }
}

@media (max-width: 1023px) { .aurora3d { display: none } }
@media (prefers-reduced-motion: reduce) {
  .aurora3d-in { animation: none; transform: none; opacity: .5 }
}



.arriba {
  position: fixed; right: 22px; bottom: 22px; z-index: 300;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-md); cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 12px;
  transition: opacity .3s var(--ease-custom), translate .3s var(--ease-custom), visibility .3s;
}
.arriba.visible { opacity: 1; visibility: visible; translate: 0; }
.arriba:hover { background: var(--zen-green-600); border-color: var(--zen-green-600); color: #fff; }
.arriba svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2;
              stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .arriba {
    width: 38px; height: 38px; right: 12px; bottom: 12px;
    background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .arriba svg { width: 16px; height: 16px; }
}


.esqueleto { display: grid; gap: 14px; padding: 4px 0; }
.esqueleto span { display: block; border-radius: var(--r-xs); background: var(--surface-3); }
.esqueleto .es-l   { height: 11px; width: 34%; }
.esqueleto .es-c   { height: 44px; }
.esqueleto .es-btn { height: 46px; border-radius: var(--r-pill); background: var(--zen-green-50); }
.esqueleto span { animation: es-latir 1.4s ease-in-out infinite; }
.esqueleto span:nth-child(even) { animation-delay: .18s }
@keyframes es-latir { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
.es-fallback { padding: 16px; border-radius: var(--r-sm); background: var(--surface-2); text-align: center; }
.es-fallback p { margin: 0; color: var(--muted); }
.es-fallback a { color: var(--zen-green-600); font-weight: 600; }
.bg-dark .es-fallback { background: rgba(255,255,255,.06); color: var(--on-dark-muted); }
.bg-dark .es-fallback p { color: var(--on-dark-muted); }
.bg-dark .es-fallback a { color: var(--zen-green-300); }
@media (prefers-reduced-motion: reduce) { .esqueleto span { animation: none } }


body:not(.es-home) .aurora3d { opacity: .55; }
body:not(.es-home) .aurora3d .luz { filter: blur(40px); }



.hero-claro {
  background: linear-gradient(168deg, var(--surface) 0%, var(--zen-green-50) 46%, #E3F3EA 100%);
  position: relative;
  overflow: hidden;
}
.hero-claro h1 { color: var(--ink); }
.hero-claro .lead { color: var(--body); }
.hero-claro .eyebrow {
  color: var(--zen-green-700);
  background: rgba(37,99,176,.10);
  border-color: rgba(37,99,176,.24);
}
.hero-claro .hero-meta { color: var(--muted); }
.hero-claro .hero-meta .dot { background: var(--zen-green); }


.hero-claro .anillo-esm {
  position: absolute; left: 50%; top: 42%;
  width: clamp(520px, 58vw, 940px); aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 0; pointer-events: none;
}
.hero-claro .anillo-esm span {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: linear-gradient(158deg, rgba(255,255,255,.96), rgba(220,234,248,.60) 52%, rgba(255,255,255,.88));
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 68%, transparent 70%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 68%, transparent 70%);
  box-shadow: inset 0 0 60px rgba(37,99,176,.10);
}
.hero-claro .anillo-esm .br {
  background:
    radial-gradient(ellipse 42% 15% at 38% 18%, rgba(255,255,255,1), transparent 60%),
    radial-gradient(ellipse 24% 9% at 70% 80%, rgba(255,255,255,.75), transparent 62%);
  filter: blur(5px);
  box-shadow: none;
}


@media (min-width: 1024px) {
  .hero-claro h1 { font-size: clamp(2.6rem, 1.9rem + 2.6vw, 4rem); letter-spacing: -.052em; }
}


@media (max-width: 900px) { .hero-claro .anillo-esm { display: none } }
@media (prefers-reduced-motion: reduce) { .hero-claro .anillo-esm { opacity: .7 } }




@media (min-width: 1024px) {
  .hero-2f .title-phase-2 {
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
    line-height: 1.24;
    letter-spacing: -.03em;
    font-weight: 500;
    font-family: var(--font-display);
    color: var(--on-dark);
    max-width: 22ch;
  }
  .hero-dark.hero-2f .title-phase-2 { color: #fff; }
}



.hero .capas {
  position: absolute; left: 50%; top: 48%;
  width: min(1180px, 92vw); height: min(680px, 70vh);
  translate: -50% -50%;
  perspective: 1500px; perspective-origin: 50% 38%;
  z-index: 0; pointer-events: none;
}
.hero .capas > span {
  position: absolute; left: 50%; top: 50%;
  width: 620px; height: 360px;
  margin: -180px 0 0 -310px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(82,214,138,.22);
  background: linear-gradient(155deg, rgba(37,99,176,.10), rgba(74,144,217,.05) 60%, transparent);
  box-shadow: 0 30px 80px rgba(3,10,22,.55);
  backdrop-filter: blur(2px);
}


.hero .capas .c1 { transform: rotateX(58deg) rotateZ(-16deg) translateZ(120px); opacity: .90 }
.hero .capas .c2 { transform: rotateX(58deg) rotateZ(-16deg) translateZ(40px);  opacity: .62 }
.hero .capas .c3 { transform: rotateX(58deg) rotateZ(-16deg) translateZ(-40px); opacity: .40 }
.hero .capas .c4 { transform: rotateX(58deg) rotateZ(-16deg) translateZ(-120px); opacity: .24 }


.hero .capas .cp-rejilla {
  width: 1100px; height: 620px; margin: -310px 0 0 -550px;
  border: 0; background:
    repeating-linear-gradient(90deg, rgba(82,214,138,.10) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(82,214,138,.10) 0 1px, transparent 1px 64px);
  transform: rotateX(58deg) rotateZ(-16deg) translateZ(-190px);
  -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 78%);
  mask: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 78%);
  box-shadow: none; backdrop-filter: none; opacity: .5;
}


@media (min-width: 1024px) {
  .hero .capas {
    perspective-origin: 50% calc(38% - var(--p, .5) * 10%);
    opacity: calc(.45 + var(--p, .5) * .55);
  }
  .hero .capas > span { rotate: z calc(var(--p, .5) * 4deg - 2deg); }
}
@media (max-width: 1023px) { .hero .capas { display: none } }
@media (prefers-reduced-motion: reduce) {
  .hero .capas { opacity: .6 }
  .hero .capas > span { rotate: none }
}




.hero-meta .dot { display: none; }
.hero-meta > span + span::before {
  content: '·';
  margin-inline-end: 22px;
  opacity: .4;
}


.hero-dark .eyebrow,
.hero-claro .eyebrow,
.bg-dark .eyebrow { color: var(--zen-green-300); }
.hero-dark .eyebrow::before,
.hero-dark .eyebrow::after { box-shadow: none; }




.hero .capas {
  -webkit-mask: radial-gradient(ellipse 46% 42% at 50% 46%, transparent 30%, #000 76%);
  mask: radial-gradient(ellipse 46% 42% at 50% 46%, transparent 30%, #000 76%);
}
.hero .capas > span { opacity: .55 }
.hero .capas .c1 { opacity: .58 } .hero .capas .c2 { opacity: .40 }
.hero .capas .c3 { opacity: .26 } .hero .capas .c4 { opacity: .16 }


.hero-dark .lead,
.hero-dark .title-phase-2 {
  color: #C7D4E6;
  text-shadow: 0 1px 24px rgba(4, 10, 20, .85);
}
@media (min-width: 1024px) {
  .hero-dark.hero-2f .title-phase-2 { color: #E8F0FA; }
}


.eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font-body);
  gap: 10px;
}
.eyebrow::before, .eyebrow::after { width: 18px; opacity: .45; }


.marca-tit {
  
  
  height: var(--tit-h, .88em);
  
  max-height: var(--tit-max, none);
  
  width: auto;
  display: inline-block;
  
  vertical-align: baseline;
  
  
  transform: translateY(var(--tit-dy, .41em));
  margin-inline: .14em;
}


.brand-tag-wm {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 7px;
}
.hero-centro .brand-tag-wm { align-items: center; }
.marca-wm { height: 28px; width: auto; display: block; }

.brand-tag-sub {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8DA5C4;
  padding: 0; border: 0;
}


.hero-titles-container { min-height: 0 !important; }
.hero .lead,
.hero-centro .title-phase-2,
.hero-2f .title-phase-2 {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  margin: 0 auto 30px auto !important;
  max-width: 62ch;
}
@media (min-width: 1024px) {
  .hero-centro .hero-titles-container { min-height: 0; margin-bottom: 20px; }
  .hero .lead {
    font-size: clamp(1.125rem, 1rem + .42vw, 1.375rem);
    line-height: 1.42;
  }
}


.eyebrow::before, .eyebrow::after { content: none !important; }
.eyebrow {
  gap: 0;
  font-size: .9375rem;
  font-weight: 500;
}
@media (min-width: 1024px) { .eyebrow { font-size: 1rem; } }




.card, .grid > article, .cards-grid > .card-item {
  transition:
    transform .42s var(--ease-out),
    box-shadow .42s var(--ease-out),
    border-color .3s ease,
    background-color .3s ease;
}
.card:hover, .grid > article:hover, .cards-grid > .card-item:hover {
  border-color: var(--zen-green-300);
}
.bg-dark .card:hover, .bg-dark .grid > article:hover {
  border-color: rgba(82,214,138, .42);
  background-color: rgba(37,99,176, .06);
}


.card .ico, .card .card-ico, .grid > article .ico {
  transition: transform .42s var(--ease-out), color .3s ease;
}
.card:hover .ico, .card:hover .card-ico, .grid > article:hover .ico {
  transform: scale(1.12) rotate(-4deg);
}


.card a::after, .card-link::after, .link-arrow::after {
  transition: transform .34s var(--ease-out);
}
.card:hover a::after, .card-link:hover::after, .link-arrow:hover::after {
  transform: translateX(5px);
}


.link-sub, .prose a, .footer-col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .34s var(--ease-out), color .2s ease;
}
.link-sub:hover, .prose a:hover, .footer-col a:hover { background-size: 100% 1px; }


.btn { transition: transform .2s var(--ease-out), box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46,139,90, .34); }
.btn-outline-light:hover, .btn-ghost:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }


.logo-strip img, .marquee img {
  filter: grayscale(1);
  opacity: .62;
  transition: filter .34s ease, opacity .34s ease, transform .34s var(--ease-out);
}
.logo-strip img:hover, .marquee img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}


.tbl tbody tr, .list-row {
  transition: background-color .24s ease;
}
.tbl tbody tr:hover, .list-row:hover { background-color: var(--zen-green-50); }
.bg-dark .tbl tbody tr:hover { background-color: rgba(37,99,176, .08); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .grid > article:hover, .btn:hover,
  .logo-strip img:hover, .marquee img:hover { transform: none; }
}


.tira-partners {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 22px;
  margin-bottom: 26px;
}
.tira-label {
  font-size: .8125rem; color: var(--muted);
  letter-spacing: .01em; white-space: nowrap;
}
.hero-dark .tira-label { color: var(--on-dark-soft); }
.tira-logos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 26px; list-style: none; margin: 0; padding: 0;
}
.tira-logos li { display: flex; }
.tira-logos img {
  height: 22px; width: auto; display: block;
  object-fit: contain;
  
  opacity: .82;
  transition: opacity .34s ease, transform .34s var(--ease-out);
}

.hero-dark .tira-logos img { opacity: .82; }

.tira-logos img:hover {
  opacity: 1;
  transform: translateY(calc(var(--tira-dy, 0px) - 2px)) scale(1.05);
}
@media (max-width: 640px) { .tira-partners { gap: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { .tira-logos img:hover { transform: none; } }


@media (max-width: 900px) {
  .btn, .btn-lg, .tb-cta {
    min-height: 44px;
    padding-block: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .brand { min-height: 44px; }
  .burger, .tb-close, .modal-close, .mm-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  
  .footer-col a, .fb-links a, .mm-sub a, .link-arrow, .link-sub {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .footer-col a, .mm-sub a { width: 100%; }
  
  .hero-meta, .pill, .tira-partners { min-height: 0; }
}


.sr-only:focus {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  width: auto; height: auto; min-height: 44px;
  margin: 0; padding: 12px 18px;
  clip: auto; clip-path: none; overflow: visible; white-space: nowrap;
  background: var(--zen-green-700); color: var(--surface);
  border-radius: var(--r-sm); font-weight: 700;
}


@media (min-width: 900px) {
  .cards-grid.g-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
  .cards-grid.g-3 > * {
    flex: 0 1 calc((100% - 2 * var(--gap-rejilla, 28px)) / 3);
    max-width: calc((100% - 2 * var(--gap-rejilla, 28px)) / 3);
    min-width: 280px;
  }
}


.hs-slot { display: none; }
.hs-slot.on { display: block; }



.sw-media {
  overflow: visible;
  padding-bottom: .5em; margin-bottom: -.5em;
  padding-top: 0; margin-top: 0;
  vertical-align: baseline;
}
.sw-media > span { display: inline-flex; align-items: baseline; }

.sw-media > span {
  transform: translateY(30%);
  clip-path: none;
  opacity: 0;
}
[data-lines].in .sw-media > span {
  animation: media-reveal var(--dur-slowest) var(--ease-custom) both;
  animation-delay: calc(var(--wi, 0) * var(--stagger-word));
}
@keyframes media-reveal {
  0%  { transform: translateY(30%); opacity: 0; }
  to  { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-media > span { transform: none !important; opacity: 1 !important; animation: none !important; }
}


.brand-clobi {
  display: inline-flex; align-items: baseline; gap: 8px;
  text-decoration: none;
}
.brand-clobi span {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em;
  color: #1A2F5A;
}
.brand-clobi small {
  font-size: .6875rem; font-weight: 500; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
}
.bg-dark .brand-clobi span, .hero-dark .brand-clobi span { color: #7AB2F0; }


body.sitio-clobi {
  --zen-green: #1A2F5A;
  --zen-green-600: #1A2F5A;
  --zen-green-700: #072C64;
  --zen-green-300: #7AB2F0;
  --zen-green-50: #EEF4FF;
  --zen-green-100: #D6E4FF;
}
body.sitio-clobi .btn-primary {
  background: linear-gradient(135deg, #1A2F5A, #1E4F93);
  border-color: #1A2F5A;
}
body.sitio-clobi .btn-primary:hover { box-shadow: 0 10px 26px rgba(10, 62, 140, .34); }
body.sitio-clobi .text-grad {
  background: linear-gradient(100deg, #1E4F93, #7AB2F0);
  -webkit-background-clip: text; background-clip: text;
}


.tira-con-titulo { flex-direction: column; gap: 14px; }
.tira-con-titulo .tira-label {
  font-family: var(--font-display);
  font-size: clamp(.9375rem, .88rem + .2vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-2);
}
.hero-dark .tira-con-titulo .tira-label { color: #C7D4E6; }



.hero-dark .tira-logos img { opacity: .82; }
.hero-dark .tira-logos img:hover { opacity: 1; }
.tira-logos img { height: 24px; }
@media (max-width: 640px) { .tira-logos img { height: 19px; } }



.tira-logos img {
  height: calc(var(--tira-h, 24px) * var(--k, 1));
  width: auto;
  transform: translateY(var(--tira-dy, 0px));
  object-fit: contain;
}
@media (max-width: 640px) {
  .tira-logos img { height: calc(var(--tira-h, 24px) * var(--k, 1) * .79); }
}

.tira-con-titulo .tira-logos { gap: 8px; }
.tira-logos li {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  transition: background-color .3s ease, border-color .3s ease, transform .3s var(--ease-out);
}
.tira-logos li:hover {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(82,214,138, .32);
  transform: translateY(-2px);
}
.hero-light .tira-logos li, .hero-claro .tira-logos li {
  border-color: var(--line);
  background: var(--surface-2);
}
@media (prefers-reduced-motion: reduce) { .tira-logos li:hover { transform: none } }


.topbar { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.tb-slide {
  grid-area: 1 / 1 / 2 / 3;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-out);
}

.tb-slide:first-of-type { opacity: 1; pointer-events: auto; }

.topbar.tb-rota .tb-slide { opacity: 0; pointer-events: none; }
.topbar.tb-rota .tb-slide.on { opacity: 1; pointer-events: auto; }
.tb-close { grid-area: 1 / 2 / 2 / 3; position: relative; z-index: 2; justify-self: end; }
@media (prefers-reduced-motion: reduce) { .tb-slide { transition: none } }


.sol-cab { display: flex; align-items: center; gap: 10px; }
.sol-ico {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 1.25rem;
}
.sol-ico img { width: 30px; height: 30px; object-fit: contain; display: block; }
.sol-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sol-n {
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em;
  line-height: 1.2;
}
.sol-c {
  font-size: .75rem; font-weight: 500;
  color: var(--zen-green-600);
  line-height: 1.3;
}



@media (prefers-reduced-motion: no-preference) {
  .hero .tira-partners,
  .hero .lead,
  .hero .hero-cta,
  .hero-visual-col {
    animation: hero-entra .9s var(--ease-custom) both;
  }
  .hero .tira-partners { animation-delay: .05s; }
  .hero .lead          { animation-delay: .45s; }
  .hero .hero-cta      { animation-delay: .58s; }
  .hero-visual-col     { animation-delay: .70s; }

  
  .hero .tira-logos li { animation: hero-entra .7s var(--ease-custom) both; }
  .hero .tira-logos li:nth-child(1) { animation-delay: .10s }
  .hero .tira-logos li:nth-child(2) { animation-delay: .16s }
  .hero .tira-logos li:nth-child(3) { animation-delay: .22s }
  .hero .tira-logos li:nth-child(4) { animation-delay: .28s }
  .hero .tira-logos li:nth-child(5) { animation-delay: .34s }
}

@keyframes hero-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


.bg-dark .sol-ico img,
.card-dark .sol-ico img,
.bg-dark .c-ico img {
  filter: brightness(0) invert(1);
  opacity: .92;
}

.sol-ico { background: var(--surface-2); border-color: var(--line); }
.bg-dark .sol-ico, .card-dark .sol-ico {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
}


.hero .hero3d {
  position: absolute;
  
  left: 88%;
  top: 19%;
  
  width: min(330px, 26vw);
  translate: -50% -50%;
  z-index: 0; pointer-events: none;
  opacity: .40;
  
  mix-blend-mode: screen;
}
.hero .hero3d img { width: 100%; height: auto; display: block; }
.hero .hero-phase-1-group, .hero .lead, .hero .hero-cta, .hero .hero-meta { position: relative; z-index: 2; }

@media (min-width: 1024px) {
  .hero .hero3d {
    width: min(380px, 27vw);
    
    opacity: calc(.30 + var(--p, .5) * .16);
  }
  .hero .hero3d img {
    scale: calc(.94 + var(--p, .5) * .14);
    translate: 0 calc(var(--p, .5) * 40px);
    
    transform: perspective(760px) rotateY(calc(-14deg + var(--p, .5) * 28deg));
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero .hero3d { width: min(252px, 23vw); top: 13%; }
}

@media (max-width: 1023px) { .hero .hero3d { display: none } }
@media (prefers-reduced-motion: reduce) {
  .hero .hero3d { rotate: none; scale: 1; }
  .hero .hero3d img { animation: none !important; }
}


.ev-galeria {
  display: flex; gap: 8px; height: auto !important;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  border-radius: var(--r-md);
}
.ev-galeria::-webkit-scrollbar { display: none; }
.ev-galeria img {
  flex: 0 0 100%; width: 100%; height: auto;
  object-fit: cover; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); scroll-snap-align: center;
}
.ev-galeria-marco { position: relative; }
.ev-gal-ant, .ev-gal-sig {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(6, 12, 22, .55); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s ease;
}
.ev-gal-ant:hover, .ev-gal-sig:hover { background: rgba(6, 12, 22, .8); }
.ev-gal-ant { left: 10px; } .ev-gal-sig { right: 10px; }
.ev-gal-cuenta {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(6, 12, 22, .6); color: #fff;
  font-size: .6875rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: reduce) {
  .ev-galeria { scroll-behavior: auto; }
}


.pc-img { position: relative; }
.pc-n {
  position: absolute; right: 10px; bottom: 10px;
  font-size: .6875rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(4, 10, 20, .72); color: #fff;
  backdrop-filter: blur(6px);
}




@media (min-width: 1280px) {
  :root { --container: 1360px; --gutter: 40px; }
}
@media (min-width: 1600px) {
  :root { --container: 1440px; --gutter: 56px; }
}

.container-narrow, .prose { max-width: var(--container-narrow); }


.orbit-item img { width: 60%; height: 60%; object-fit: contain; }
.orbit-item { overflow: hidden; }




@media (prefers-reduced-motion: no-preference) {
  .hero .hero3d { animation: nube-flota 9s ease-in-out infinite; }
  .hero .hero3d img { animation: nube-mece 46s ease-in-out infinite; }
  .hero .hero3d.viva, .hero .hero3d.viva img { animation: none; }
  
  .hero .hero3d.viva {
    transform: translate(calc(var(--bx, 0px) + var(--vx, 0px)), calc(var(--by, 0px) + var(--vy, 0px))) scale(var(--vs, 1));
  }
  .hero .hero3d.viva img { rotate: var(--vg, 0deg); }
}


@keyframes nube-flota {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(18px, -16px) scale(1.02); }
  50%      { transform: translate(0, -30px) scale(1.045); }
  75%      { transform: translate(-18px, -16px) scale(1.02); }
}
@keyframes nube-mece {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: 2.1deg; }
  75%      { rotate: -2.1deg; }
}


.ui-shot {
  display: block; width: 100%;
  
  aspect-ratio: clamp(1.2, var(--prop, 1.6), 2.4);
  object-fit: contain; object-position: center;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.aw-body:has(.ui-shot) { padding: 0; }


@media (prefers-reduced-motion: no-preference) {
  .app-window .ui-shot {
    transition: transform 1.1s var(--ease-out), opacity .8s ease;
    transform: scale(1.05);
    opacity: 0;
  }
  .reveal.in .ui-shot, .in .ui-shot, .hero .ui-shot { transform: none; opacity: 1; }
}


.int-logo {
  height: 18px; width: auto; flex: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.marquee-item:hover .int-logo { filter: none; opacity: 1; }
.bg-dark .int-logo, .hero-dark .int-logo {
  filter: grayscale(1) brightness(2.2);
  opacity: .6;
}
.bg-dark .marquee-item:hover .int-logo,
.hero-dark .marquee-item:hover .int-logo { filter: none; opacity: 1; }


.hero-dark { position: relative; isolation: isolate; }
.hero-dark::before,
.hero-dark::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  
  filter: blur(28px);
}


.hero-dark::before {
  width: 52vw; height: 52vw;
  max-width: 720px; max-height: 720px;
  top: -16%; left: -12%;
  background: radial-gradient(circle,
    rgba(82,214,138, .62) 0%,
    rgba(37,99,176, .38) 26%,
    rgba(30,79,147, .16) 48%,
    transparent 72%);
}

.hero-dark::after {
  width: 60vw; height: 60vw;
  max-width: 840px; max-height: 840px;
  bottom: -22%; right: -14%;
  background: radial-gradient(circle,
    rgba(122,178,240, .52) 0%,
    rgba(74,144,217, .32) 28%,
    rgba(30,79,147, .14) 50%,
    transparent 74%);
}


@media (prefers-reduced-motion: no-preference) {
  .hero-dark::before { animation: luz-respira 14s ease-in-out infinite; }
  .hero-dark::after  { animation: luz-respira 18s ease-in-out infinite reverse; }
}
@keyframes luz-respira {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}


@media (max-width: 767px) {
  .hero-dark::before, .hero-dark::after { filter: blur(20px); opacity: .75; }
}


.sol-ico img, .c-ico img { width: 32px; height: 32px; object-fit: contain; }


.sol-ico img[src*="hubspot"] { border-radius: 7px; }



.hero-tags .pill,
.tag-row .pill {
  position: relative;
  padding: 7px 14px;
  background: var(--surface-2);
  border-color: var(--line);
  backdrop-filter: none;
  color: var(--ink-2);
  transition:
    transform .32s var(--ease-out),
    background-color .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}


.hero-dark .hero-tags .pill,
.hero-dark .tag-row .pill,
.bg-dark .hero-tags .pill,
.bg-dark .tag-row .pill {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
  color: #D6E0EE;
}


.hero-dark .app-window .pill,
.hero-dark .aw-body .pill,
.hero-dark .shot .pill,
.hero-dark .card .pill,
.bg-dark .app-window .pill,
.bg-dark .aw-body .pill,
.bg-dark .shot .pill,
.bg-dark .card .pill {
  background: var(--surface-2);
  border-color: var(--line);
  backdrop-filter: none;
  color: var(--ink-2);
}

.hero-light .hero-tags .pill, .hero-claro .hero-tags .pill,
.bg-soft .tag-row .pill,
.card .tag-row .pill,
.app-window .tag-row .pill,
.aw-body .tag-row .pill,
.shot .tag-row .pill {
  background: var(--surface-2);
  border-color: var(--line);
  backdrop-filter: none;
  color: var(--ink-2);
}

.app-window .tag-row .pill.pill-green,
.aw-body .tag-row .pill.pill-green,
.card .tag-row .pill.pill-green {
  color: var(--zen-green-700);
  background: var(--zen-green-50);
  border-color: var(--zen-green-100);
}
.hero-tags .pill:hover,
.tag-row .pill:hover {
  transform: translateY(-3px);
  background: rgba(37,99,176, .12);
  border-color: rgba(82,214,138, .42);
  box-shadow: 0 8px 22px rgba(4, 10, 20, .28);
}






.card, .grid > article {
  position: relative;
  isolation: isolate;
}

.card::before, .grid > article::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(37,99,176, .14),
    transparent 62%
  );
}
.card:hover::before, .grid > article:hover::before { opacity: 1; }
.bg-dark .card::before, .card-dark::before {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(82,214,138, .18),
    transparent 62%
  );
}






.marca-lockup {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  gap: 10px 12px;
  padding: 9px 16px 9px 14px;
  margin-bottom: 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  transition: background-color .3s ease, border-color .3s ease;
}
.marca-lockup:hover {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(82,214,138, .34);
}
.hero-centro .marca-lockup { margin-inline: auto; }
.hero-light .marca-lockup, .hero-claro .marca-lockup {
  background: var(--surface-2);
  border-color: var(--line);
  backdrop-filter: none;
}


.marca-lockup .marca-wm {
  
  height: var(--wm-h, 22px); width: auto; display: block;
  transform: translateY(var(--wm-dy, 0px));
  filter: none;
}


.marca-lockup-ico { display: flex; flex: none; }
.marca-lockup-ico img { width: 22px; height: 22px; object-fit: contain; display: block; }
.marca-lockup-n {
  font-family: var(--font-display);
  font-size: .9375rem; font-weight: 700; letter-spacing: -.02em;
  color: #fff;
}
.hero-light .marca-lockup-n, .hero-claro .marca-lockup-n { color: var(--ink); }


.marca-lockup-sep {
  width: 1px; height: 16px; flex: none;
  background: rgba(255, 255, 255, .2);
}
.hero-light .marca-lockup-sep, .hero-claro .marca-lockup-sep { background: var(--line); }
.marca-lockup-sub {
  font-size: .75rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: #8DA5C4;
  white-space: nowrap;
}


.marca-lockup-cred {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--zen-green-300);
  white-space: nowrap;
}
.hero-light .marca-lockup-cred, .hero-claro .marca-lockup-cred { color: var(--zen-green-700); }


@media (max-width: 560px) {
  .marca-lockup { padding: 8px 14px; gap: 8px 10px; }
  .marca-lockup-sep { display: none; }
  
  .marca-lockup .marca-wm { height: calc(var(--wm-h, 22px) * .864); }
  .marca-lockup-sub, .marca-lockup-cred { font-size: .6875rem; }
}


.bg-dark, .cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bg-dark::after, .cta-band::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(30px);
  width: 58vw; height: 58vw;
  max-width: 800px; max-height: 800px;
  top: -24%; right: -16%;
  background: radial-gradient(circle,
    rgba(82,214,138, .48) 0%,
    rgba(37,99,176, .28) 28%,
    rgba(30,79,147, .12) 50%,
    transparent 74%);
}

.section.bg-dark:nth-of-type(even)::after {
  right: auto; left: -16%;
  background: radial-gradient(circle,
    rgba(122,178,240, .44) 0%,
    rgba(74,144,217, .26) 28%,
    rgba(30,79,147, .11) 50%,
    transparent 74%);
}
.cta-band::after {
  top: auto; bottom: -30%;
  background: radial-gradient(circle,
    rgba(123,233,170, .44) 0%,
    rgba(82,214,138, .26) 28%,
    rgba(46,139,90, .11) 50%,
    transparent 74%);
}

@media (prefers-reduced-motion: no-preference) {
  .bg-dark::after, .cta-band::after { animation: luz-respira 16s ease-in-out infinite; }
}
@media (max-width: 767px) {
  .bg-dark::after, .cta-band::after { filter: blur(22px); opacity: .8; }
}


img[src*="/assets/img/logo-"],
img[src*="/assets/img/marca-"],
img[src*="/assets/img/brand-"],
img[src*="/assets/img/int-"] {
  object-fit: contain;
}


.marquee-item .int-logo,
.marquee-item img.int-logo {
  height: 20px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  border-radius: 0;
  flex: none;
}


.marca-lead {
  height: var(--lead-h, 1em);
  max-height: var(--lead-max, none);
  width: auto;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(var(--lead-dy, .12em));
  margin-inline: .1em;
}


.hero .hero3d-b {
  
  left: 11%;
  top: 44%;
  width: min(240px, 19vw);
  opacity: .26;
}
@media (min-width: 1024px) {
  .hero .hero3d-b {
    width: min(300px, 22vw);
    opacity: calc(.20 + var(--p, .5) * .14);
  }
  .hero .hero3d-b img {
    
    scale: calc(-1 * (.94 + var(--p, .5) * .12)) calc(.94 + var(--p, .5) * .12);
    translate: 0 calc(var(--p, .5) * -28px);
    transform: perspective(760px) rotateY(calc(10deg - var(--p, .5) * 22deg));
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero .hero3d-b { width: min(190px, 17vw); top: 41%; left: 9%; }
}
@media (max-width: 1023px) { .hero .hero3d-b { display: none } }

@media (prefers-reduced-motion: no-preference) {
  .hero .hero3d-b { animation: nube-flota-b 13s ease-in-out infinite; }
  .hero .hero3d-b img { animation: nube-mece 38s ease-in-out infinite reverse; }
  .hero .hero3d-b.viva, .hero .hero3d-b.viva img { animation: none; }
}

@keyframes nube-flota-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%      { transform: translate(-13px, -14px) scale(1.02); }
  60%      { transform: translate(9px, -26px) scale(1.04); }
}


.cred {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr;
  gap: 26px 44px;
  align-items: start;
}
.bg-dark .cred, .card-dark .cred { border-top-color: rgba(255, 255, 255, .14); }

.cred-et {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bg-dark .cred-et { color: var(--on-dark-muted); }

.cred-t {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 700;
}
.bg-dark .cred-t { color: #fff; }


.cred-nota {
  margin: 9px 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 32ch;
}
.bg-dark .cred-nota { color: var(--on-dark-muted); }


.cred-l {
  margin: 0;
  display: grid;
  
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
}
.cred-l > div {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.bg-dark .cred-l > div { border-top-color: rgba(255, 255, 255, .11); }


.cred-l dt {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.bg-dark .cred-l dt { color: var(--on-dark); }
.cred-l dd {
  margin: 3px 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.bg-dark .cred-l dd { color: var(--on-dark-muted); }


.cred-t .cruce img { max-height: 1.5em; }

@media (max-width: 720px) {
  .cred { grid-template-columns: 1fr; gap: 18px; }
  .cred-l { grid-template-columns: 1fr; }
}


.ev-card { position: relative; cursor: pointer; }


.ev-card:focus-within {
  outline: 2px solid var(--zen-green-300);
  outline-offset: 3px;
}


.ev-when {
  font-size: .75rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--zen-green-300);
}
.ev-body h3 {
  font-size: 1.2rem;
  line-height: 1.26;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ev-body p { line-height: 1.6; }


.carousel .ev-card { border-radius: var(--r-lg); }


.eyebrow { color: var(--marca-claro, var(--zen-green-700)); }
.hero-dark .eyebrow,
.hero-claro .eyebrow,
.bg-dark .eyebrow { color: var(--marca-oscuro, var(--zen-green-300)); }


.cred-et { color: var(--marca-claro, var(--muted)); }
.bg-dark .cred-et,
.card-dark .cred-et { color: var(--marca-oscuro, var(--on-dark-muted)); }


.bg-dark .sec-head .eyebrow::before,
.bg-dark .sec-head .eyebrow::after { background: var(--marca-oscuro, var(--zen-green-300)); }



.int-logo.int-wm { height: 19px; width: auto; }

.cruce {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  
  flex-wrap: nowrap;
  min-width: 0;
}
.cruce-logo {
  
  height: var(--cruce-h, 26px);
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

.cruce-zen { height: 30px; }
.cruce-x {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--marca-oscuro, var(--zen-green-300));
  opacity: .75;
  font-weight: 400;
}
.bg-soft .cruce-x, .card:not(.card-dark) .cruce-x {
  color: var(--marca-claro, var(--zen-green));
}
@media (max-width: 480px) {
  .cruce-logo { height: 22px; }
  .cruce-zen { height: 25px; }
}


.es-pulsable { cursor: pointer; }
.es-pulsable:focus-visible { outline: 2px solid var(--zen-green-300); outline-offset: 3px; }

.modal-backdrop.galeria {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 48px);
}
.galeria .gl-marco { margin: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.galeria img {
  max-width: min(1100px, 88vw);
  max-height: 78vh;
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  display: block;
}
.galeria figcaption {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center;
  color: #E7EFE9; font-size: .9375rem;
}
.galeria .gl-cuenta { font-family: var(--font-mono); font-size: .8125rem; opacity: .7; }
.galeria button {
  appearance: none; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff; border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.galeria button:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.galeria button[hidden] { visibility: hidden; }
.galeria .gl-cerrar { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; font-size: 1.4rem; }
@media (max-width: 640px) {
  .modal-backdrop.galeria { grid-template-columns: 1fr; }
  .galeria .gl-ant, .galeria .gl-sig { position: absolute; top: 50%; translate: 0 -50%; }
  .galeria .gl-ant { left: 10px; } .galeria .gl-sig { right: 10px; }
}



.ev-nota {
  margin-top: auto;
  align-self: flex-start;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--on-dark-muted);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px dashed rgba(255, 255, 255, .22);
}


.rc-figura { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.rc-figura figcaption {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}
.rc-figura figcaption { color: var(--muted); }
.bg-dark .rc-figura figcaption, .grid-lines .rc-figura figcaption { color: var(--on-dark-muted); }

.rc {
  --rc-tinta: #1b2733;
  --rc-suave: #5b6b7c;
  --rc-linea: #e3e8ee;
  --rc-fondo: #f5f7fa;
  --rc-acento: #2563B0;
  container-type: inline-size;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  color: var(--rc-tinta);
  border: 1px solid var(--rc-linea);
  box-shadow: 0 24px 60px -28px rgba(12, 26, 40, .45), 0 2px 6px rgba(12, 26, 40, .06);
  font-size: 13px;
  line-height: 1.45;
  
  letter-spacing: 0;
}
.rc * { box-sizing: border-box; }
.rc strong { font-weight: 700; }
.rc p { margin: 0; }
.rc-i { width: 15px; height: 15px; flex: none; stroke-width: 1.7; }
.rc-sub { color: var(--rc-suave); font-size: .85em; display: block; }
.rc-mini { color: var(--rc-suave); font-size: .85em; display: inline-flex; gap: 6px; align-items: center; }
.rc-link { color: var(--rc-acento); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: default; }
.rc-cuerpo { display: flex; min-height: 300px; }
.rc-cuerpo.col { flex-direction: column; min-height: 0; }
.rc-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.rc-col { flex: none; border-right: 1px solid var(--rc-linea); }
.rc-lienzo { padding: 14px; background: var(--rc-fondo); flex: 1; }


.rc-rail {
  flex: none; width: 42px;
  background: var(--rc-rail-bg, #16305A);
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 0;
  overflow: hidden;
}
.rc-rail-i {
  width: 28px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; color: rgba(255, 255, 255, .55);
}
.rc-rail-i.on { background: rgba(255, 255, 255, .16); color: #fff; }


.rc-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.rc-av.grande { width: 46px; height: 46px; font-size: 15px; }
.rc-av.t1 { background: #d9736a; } .rc-av.t2 { background: #6f8fbf; }
.rc-av.t3 { background: #8a7bb8; } .rc-av.t4 { background: #4f9e88; }
.rc-av.t5 { background: #c99a4e; }
.rc-cab { padding: 10px 14px; border-bottom: 1px solid var(--rc-linea); }
.rc-cab.fila { display: flex; align-items: center; gap: 10px; }
.rc-cab.fila .rc-cab-t { margin-right: auto; }
.rc-cab h6 { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rc-cab h6 .sep { color: var(--rc-linea); font-weight: 400; }
.rc-caret { color: var(--rc-suave); }
.rc-tabs { display: flex; gap: 16px; font-size: 12.5px; color: var(--rc-suave); flex-wrap: wrap; }
.rc-tabs span { padding-bottom: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.rc-tabs span.on { color: var(--rc-tinta); border-bottom-color: var(--rc-tinta); font-weight: 600; }
.rc-tabs.sm { font-size: 11.5px; gap: 12px; padding: 8px 12px 0; }
.rc-tabs.borde { padding: 8px 14px 0; border-bottom: 1px solid var(--rc-linea); }
.rc-tabs b { font-weight: 600; opacity: .7; }
.rc-card { background: #fff; border: 1px solid var(--rc-linea); border-radius: 8px; padding: 12px; }
.rc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rc-ic { width: 26px; height: 26px; border-radius: 6px; background: var(--rc-fondo); display: grid; place-items: center; flex: none; color: var(--rc-suave); }
.rc-ic.redondo { border-radius: 8px; border: 1px solid var(--rc-linea); }
.rc-btn-p { background: var(--rc-acento); color: #fff; padding: 5px 12px; border-radius: 5px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.rc-btn-g { background: #fff; border: 1px solid var(--rc-linea); padding: 5px 11px; border-radius: 5px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-btn-oscuro { background: #16305A; color: #fff; padding: 5px 12px; border-radius: 5px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rc-tag { background: var(--rc-fondo); border-radius: 4px; padding: 2px 8px; font-size: 11px; color: var(--rc-suave); }
.rc-badge { background: var(--rc-fondo); border-radius: 10px; padding: 1px 7px; font-size: 11px; color: var(--rc-suave); }
.rc-msg { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.rc-msg .rc-av { margin-top: 17px; }
.rc-msg.sal { flex-direction: row; justify-content: flex-end; }
.rc-msg.sal .rc-burb, .rc-msg.sal .rc-quien, .rc-msg.sal .rc-hora { margin-left: auto; text-align: right; }
.rc-quien { font-size: 11px; color: var(--rc-suave); display: block; margin-bottom: 3px; }
.rc-burb { background: #e8f0fb; border-radius: 12px; padding: 7px 11px; display: block; width: fit-content; max-width: 34em; margin-bottom: 4px; }
.rc-burb.propia { background: #fff; border: 1px solid var(--rc-linea); }
.rc-burb.gris { background: #f1f3f7; }
.rc-hora { font-size: 10.5px; color: var(--rc-suave); display: block; }


.rc-hubspot { --rc-rail-bg: #33121f; --rc-acento: #0068b1; }
.rc-hubspot .rc-top {
  background: #33121f; color: rgba(255, 255, 255, .82);
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
}
.rc-search { flex: 1; max-width: 320px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 5px; padding: 5px 10px; font-size: 12px; }
.rc-round { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 13px; }
.rc-top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rc-chip-ai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.rc-me { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); }
.rc-hs-grid { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 12px; align-items: start; }
.rc-hs-agenda { grid-row: span 2; padding: 0; }
.rc-hs-agenda .rc-card-h { padding: 8px 12px 0; margin-bottom: 6px; }
.rc-hs-acciones { grid-column: 1 / 3; }
.rc-hs-tareas { display: flex; gap: 18px; }
.rc-hs-cifras { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.rc-hs-cifras .k { font-size: 9.5px; letter-spacing: .06em; color: var(--rc-suave); text-transform: uppercase; display: block; }
.rc-hs-cifras .v { font-size: 26px; font-weight: 700; color: #33121f; border-bottom: 2px solid #33121f; display: inline-block; line-height: 1.1; }
.rc-hs-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rc-hs-links li { display: flex; align-items: center; gap: 8px; }
.rc-hs-links li .rc-i { color: #fff; background: #33121f; border-radius: 50%; padding: 3px; width: 18px; height: 18px; }
.rc-hs-links a { color: var(--rc-acento); text-decoration: underline; text-underline-offset: 2px; }
.rc-hs-agente { display: flex; gap: 10px; border: 1px solid var(--rc-linea); border-radius: 6px; padding: 10px; }
.rc-hs-chispa { width: 26px; height: 26px; border-radius: 50%; background: #f2f4f7; display: grid; place-items: center; flex: none; }
.rc-hs-hoy { margin: 0 12px 8px; background: #f5f7fa; border: 1px solid var(--rc-linea); border-radius: 4px; padding: 5px 8px; font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.rc-hs-horas { border-top: 1px solid var(--rc-linea); }
.rc-hs-hora { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 6px; border-bottom: 1px solid var(--rc-linea); min-height: 26px; padding: 0 8px 0 0; }
.rc-hs-hora .h { font-size: 10.5px; color: var(--rc-suave); text-align: right; padding-right: 4px; }
.rc-hs-hora .ev { font-size: 10.5px; border-radius: 3px; padding: 3px 6px; border-left: 3px solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-hs-hora .ev.celeste { background: #ddeefc; border-color: #4a90c4; }
.rc-hs-hora .ev.durazno { background: #fbe0cf; border-color: #e08b4c; }
.rc-hs-hora .ev.lila { background: #e9e4fb; border-color: #7d6bc4; }
.rc-hs-hora .ev.vacia { border: 0; padding: 0; }
.rc-hs-pills { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.rc-hs-pills span { border: 1px solid var(--rc-linea); border-radius: 5px; padding: 7px 12px; font-size: 12px; display: inline-flex; gap: 10px; align-items: center; }
.rc-hs-pills span.on { border-color: #33121f; border-width: 2px; font-weight: 600; }
.rc-hs-pills b { color: var(--rc-suave); font-weight: 500; }
.rc-hs-accion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rc-linea); }
.rc-hs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rc-hs-meta { flex: none; width: 130px; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--rc-suave); }
.rc-hs-meta.rc-avs { flex-direction: row; gap: 4px; align-items: center; }


.rc-fresh { --rc-rail-bg: #16305A; --rc-acento: #2563B0; }
.rc-fs-ficha { width: 190px; background: #eef2f6; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.rc-volver { color: var(--rc-acento); font-size: 11.5px; }
.rc-fs-perfil { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rc-social { display: flex; gap: 5px; color: var(--rc-acento); margin-top: 3px; }
.rc-fs-score { display: flex; gap: 14px; border-top: 1px solid #dbe2ea; border-bottom: 1px solid #dbe2ea; padding: 8px 0; }
.rc-fs-score .k { font-size: 9.5px; color: var(--rc-suave); display: block; }
.rc-fs-score .v { font-weight: 700; font-size: 15px; }
.rc-fs-score .v i { color: #2fa06a; font-style: normal; }
.rc-fs-score .estrellas { color: #f0a92e; font-size: 12px; letter-spacing: -1px; }
.rc-fs-h { margin: 0; font-size: 11px; text-transform: none; color: var(--rc-tinta); font-weight: 700; }
.rc-fs-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rc-fs-nav li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; color: #3d4d5c; font-size: 12px; }
.rc-fs-nav li.on { background: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--rc-acento); }
.rc-uso { margin-left: auto; background: #eaf1fb; color: #2563B0; border-radius: 4px; padding: 3px 8px; font-size: 11px; }
.rc-x { color: var(--rc-suave); }
.rc-fs-campo { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--rc-linea); }
.rc-fs-campo .et { color: var(--rc-suave); width: 34px; }
.rc-token { display: inline-flex; align-items: center; gap: 6px; background: var(--rc-fondo); border-radius: 12px; padding: 2px 9px 2px 2px; font-size: 12px; }
.rc-ccc { margin-left: auto; color: var(--rc-suave); font-size: 11.5px; }
.rc-fs-campo.asunto { color: var(--rc-tinta); }
.rc-fs-tools { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--rc-linea); font-size: 11.5px; color: #3d4d5c; }
.rc-fs-tools span { display: inline-flex; align-items: center; gap: 5px; }
.rc-freddy { margin-left: auto; color: #7b3fe4; }
.rc-fs-editor { padding: 20px 14px 40px; font-size: 15px; flex: 1; }
.rc-fs-formato { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--rc-linea); color: #3d4d5c; font-size: 11.5px; }
.rc-fs-pie { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--rc-linea); background: var(--rc-fondo); flex-wrap: wrap; }
.rc-check { font-size: 11.5px; color: #2563B0; }
.rc-check.off { color: var(--rc-suave); }
.rc-guardado { margin-left: auto; font-size: 11px; color: var(--rc-suave); font-style: italic; }

.rc-fc-lista { width: 220px; display: flex; flex-direction: column; }
.rc-fc-lh { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--rc-linea); }
.rc-fc-orden { padding: 6px 10px; background: var(--rc-fondo); font-size: 11px; color: var(--rc-suave); display: flex; align-items: center; gap: 6px; }
.rc-fc-row { display: flex; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--rc-linea); }
.rc-fc-row.on { background: #eaf1fb; box-shadow: inset 3px 0 0 var(--rc-acento); }
.rc-fc-txt { min-width: 0; flex: 1; }
.rc-fc-n { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 12.5px; }
.rc-fc-n .rc-t { font-weight: 400; color: var(--rc-suave); font-size: 10.5px; flex: none; }
.rc-fc-txt p { color: var(--rc-suave); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-fc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: #3d4d5c; margin-top: 4px; }
.rc-fc-hilo { background: var(--rc-fondo); }
.rc-fc-hilo .rc-cab { background: #fff; }
.rc-sel { border: 1px solid var(--rc-linea); border-radius: 5px; padding: 4px 9px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; background: #fff; }
.rc-fc-msgs { flex: 1; padding: 14px; }
.rc-fc-responder { background: #fff; border-top: 1px solid var(--rc-linea); }
.rc-ph { padding: 12px 14px 18px; color: var(--rc-suave); }
.rc-fc-acc { display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: var(--rc-suave); }
.rc-enviar { margin-left: auto; color: var(--rc-acento); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.rc-fc-ficha { width: 218px; border-right: 0; border-left: 1px solid var(--rc-linea); background: var(--rc-fondo); padding-bottom: 10px; }
.rc-fc-sec { display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--rc-linea); padding: 8px 10px; font-size: 12px; }
.rc-fc-sec strong { display: inline-flex; align-items: center; gap: 6px; }
.rc-fc-perfil { display: flex; gap: 8px; background: #fff; padding: 10px; border-bottom: 1px solid var(--rc-linea); }
.rc-fc-perfil .rc-link { font-size: 11px; }
.rc-fc-perfil .rc-av { margin-top: 0; }
.rc-fc-props { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 10px; background: #fff; border-bottom: 1px solid var(--rc-linea); }
.rc-fc-props dt { color: var(--rc-suave); font-size: 11px; }
.rc-fc-props dd { margin: 0 0 6px; font-size: 12px; }
.rc-fc-etiq { background: #fff; padding: 0 10px 10px; border-bottom: 1px solid var(--rc-linea); }
.rc-fc-sec.plegada { color: var(--rc-suave); }


.rc-fsv { --rc-acento: #2563B0; }
.rc-fsv-ticket { display: flex; gap: 10px; align-items: flex-start; padding: 14px; }
.rc-fsv-split { display: grid; grid-template-columns: 1fr 1.15fr; }
.rc-fsv-cmdb { padding: 12px 14px; border-right: 1px solid var(--rc-linea); }
.rc-fsv-cmdb h6 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.rc-fsv-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-fsv-pills span { border: 1px solid var(--rc-linea); border-radius: 12px; padding: 3px 10px; font-size: 11px; color: #3d4d5c; }
.rc-fsv-pills span.on { background: #eaf1fb; border-color: #b9d0f0; color: var(--rc-acento); font-weight: 600; }
.rc-fsv-grupo { font-size: 11px; color: var(--rc-suave); margin: 10px 0 5px; }
.rc-fsv-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rc-linea); border-radius: 6px; padding: 8px 10px; }
.rc-menos { width: 17px; height: 17px; border-radius: 50%; background: #e5493a; color: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; flex: none; }
.rc-fsv-item .rc-i { width: 13px; height: 13px; }
.rc-fsv-item a { display: inline-flex; align-items: center; gap: 5px; }
.rc-fsv-topo { background: var(--rc-fondo); }
.rc-fsv-topo-h { display: flex; gap: 9px; align-items: center; padding: 12px 14px 8px; background: #fff; }
.rc-fsv-topo .rc-tabs.sm { background: #fff; border-bottom: 1px solid var(--rc-linea); padding-bottom: 0; }
.rc-fsv-topo .rc-tabs.sm span { padding-bottom: 7px; }
.rc-fsv-topo-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; flex-wrap: wrap; }
.rc-buscar { border: 1px solid var(--rc-linea); border-radius: 5px; padding: 4px 9px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.rc-fsv-mapa {
  position: relative; min-height: 250px; padding: 16px;
  background-image: radial-gradient(circle, #d3dae3 1px, transparent 1px);
  background-size: 13px 13px;
}
.rc-nodo {
  position: absolute; background: #fff; border: 1px solid var(--rc-linea);
  border-radius: 6px; padding: 6px 10px; font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(12, 26, 40, .08);
}
.rc-nodo.activo { border-color: var(--rc-acento); box-shadow: 0 0 0 2px rgba(37,99,176, .16); }
.rc-nodo.n1 { top: 8%; left: 50%; transform: translateX(-50%); }
.rc-nodo.n2 { top: 46%; left: 26%; }
.rc-nodo.n3 { top: 46%; right: 6%; }
.rc-nodo.n4 { bottom: 8%; left: 26%; }
.rc-flecha { position: absolute; background: var(--rc-acento); }
.rc-flecha.f1 { width: 1.5px; top: 18%; bottom: 56%; left: 50%; }
.rc-flecha.f2 { height: 1.5px; top: 51%; left: 56%; right: 27%; background: #94a3b3; }
.rc-flecha.f3 { width: 1.5px; top: 56%; bottom: 20%; left: 33%; }
.rc-flecha::after {
  content: ''; position: absolute; width: 0; height: 0;
  border: 4px solid transparent;
}
.rc-flecha.f1::after { bottom: -7px; left: -3.2px; border-top-color: var(--rc-acento); }
.rc-flecha.f2::after { right: -7px; top: -3.2px; border-left-color: #94a3b3; }
.rc-flecha.f3::after { bottom: -7px; left: -3.2px; border-top-color: var(--rc-acento); }
.rc-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--rc-suave); font-size: 12px; }
.rc-zoom b, .rc-zoom .rc-i { background: #fff; border: 1px solid var(--rc-linea); border-radius: 5px; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 400; padding: 4px; }


.rc-fd { --rc-acento: #2563B0; }
.rc-fd-cab { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--rc-linea); }
.rc-fd-cab strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rc-btn-ia { border: 1px solid #ded3f7; color: #7b3fe4; background: #faf7ff; border-radius: 5px; padding: 5px 10px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-fd-hilo { padding: 14px; position: relative; }
.rc-fd-msg { display: flex; gap: 9px; margin-bottom: 14px; align-items: flex-start; }
.rc-chispa { width: 24px; height: 24px; border-radius: 50%; background: #f2ecff; color: #7b3fe4; display: grid; place-items: center; flex: none; }
.rc-tag-ia { background: #f2ecff; color: #7b3fe4; border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 600; margin-left: 6px; }
.rc-quien.azul { color: var(--rc-acento); font-weight: 600; font-size: 12px; }
.rc-fd-msg .rc-burb { max-width: none; }
.rc-fd-msg .rc-burb p + p { margin-top: 7px; }
.rc-fd-tour {
  position: absolute; right: 8px; bottom: 40px; width: 250px;
  background: #fff; border: 1px solid var(--rc-linea); border-radius: 8px;
  padding: 12px; box-shadow: 0 14px 34px -12px rgba(12, 26, 40, .38);
}
.rc-fd-tour strong { display: block; margin-bottom: 6px; font-size: 13px; }
.rc-fd-tour p { color: var(--rc-suave); font-size: 11.5px; }
.rc-fd-tour-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--rc-suave); font-size: 11px; }
.rc-fd-responder { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--rc-linea); }


.rc-halo { --rc-rail-bg: #1b2a4a; --rc-acento: #0e7fa8; --rc-fondo: #EEF3FA; }
.rc-halo-tabs { display: flex; align-items: center; gap: 8px; background: #1b2a4a; padding: 6px 10px; color: rgba(255, 255, 255, .75); }
.rc-halo-tabs > span.on { background: #EEF3FA; color: #1b2a4a; border-radius: 6px 6px 0 0; padding: 6px 14px; font-weight: 600; margin-bottom: -6px; }
.rc-halo-acc { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rc-halo-acc .cyan { background: #4A90D9; color: #06202e; border-radius: 12px; padding: 3px 11px; font-size: 11px; font-weight: 600; }
.rc-halo-acc .cyan.solido { background: #0aa8dd; color: #fff; }
.rc-halo-pane { background: var(--rc-fondo); }
.rc-halo-full { margin: 10px 0 0 12px; align-self: flex-start; background: #fff; border: 1px solid #d5dfec; border-radius: 5px; padding: 4px 10px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.rc-halo-filtros { display: flex; gap: 18px; padding: 10px 12px; }
.rc-halo-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #3d4d5c; }
.rc-select { background: #fff; border: 1px solid #d5dfec; border-radius: 5px; padding: 5px 9px; min-width: 130px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-chip-cyan { background: #4A90D9; color: #06202e; border-radius: 3px; padding: 1px 7px; font-size: 10.5px; font-weight: 600; }
.rc-halo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 12px 14px; }
.rc-halo-kpi { display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.rc-halo-kpi .t { font-size: 12px; }
.rc-halo-kpi .v { font-size: 34px; font-weight: 400; line-height: 1; margin: auto auto 0; }
.rc-halo-kpi .v.rojo { color: #e0402c; }
.rc-halo-kpi .v.verde { color: #7ac943; }
.rc-halo-linea { grid-column: span 2; }
.rc-halo-pastel { grid-column: span 2; }
.rc-halo-linea strong, .rc-halo-pastel strong, .rc-halo-tabla strong { display: block; font-size: 13px; margin-bottom: 8px; }
.rc-halo-leyenda { display: flex; gap: 14px; font-size: 10.5px; color: var(--rc-suave); margin-bottom: 4px; }
.rc-halo-leyenda i, .rc-halo-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.rc-halo-svg { width: 100%; height: 96px; display: block; }
.rc-halo-x { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--rc-suave); margin-top: 4px; }
.rc-halo-pie-wrap { display: flex; align-items: center; gap: 16px; }
.rc-halo-pie { width: 108px; height: 108px; border-radius: 50%; flex: none; display: block; }
.rc-halo-leg { list-style: none; margin: 0; padding: 0; font-size: 11px; display: flex; flex-direction: column; gap: 4px; }
.rc-halo-leg b { margin-left: 8px; color: var(--rc-suave); font-weight: 600; }
.rc-halo-tabla { grid-column: span 4; }
.rc-halo-tabla table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rc-halo-tabla th { background: #4A90D9; color: #06202e; text-align: left; padding: 7px 10px; font-weight: 600; }
.rc-halo-tabla td { border-bottom: 1px solid var(--rc-linea); padding: 7px 10px; }


.rc-intercom { --rc-acento: #286efa; --rc-fondo: #f7f8fa; }
.rc-ic-cliente { width: 250px; background: #eceef2; padding: 16px; display: grid; place-items: center; }
.rc-ic-tarjeta { background: #fff; border-radius: 12px; padding: 16px; width: 100%; text-align: center; box-shadow: 0 10px 30px -14px rgba(12, 26, 40, .35); }
.rc-ic-tarjeta > strong { display: block; font-size: 14px; margin-bottom: 10px; }
.rc-ic-tarjeta .rc-av { margin: 0 auto 8px; width: 42px; height: 42px; font-size: 14px; }
.rc-ic-estado { color: #2563B0; font-weight: 700; display: block; }
.rc-ic-pasos { display: flex; gap: 4px; margin: 12px 0; }
.rc-ic-pasos i { flex: 1; height: 3px; border-radius: 2px; background: #e3e5ea; }
.rc-ic-pasos i.on { background: #2563B0; }
.rc-ic-aviso { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: var(--rc-fondo); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.rc-ic-dl { margin: 0; text-align: left; }
.rc-ic-dl dt { color: var(--rc-suave); font-size: 11px; margin-top: 8px; }
.rc-ic-dl dd { margin: 0; font-size: 12px; }
.rc-ic-dl.fila { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--rc-linea); align-items: center; }
.rc-ic-dl.fila dt { margin: 0; }
.rc-ic-dl.fila dd { display: flex; align-items: center; gap: 6px; }
.rc-ic-dl.fila .rc-av { width: 18px; height: 18px; font-size: 8px; }
.rc-intercom .rc-tag.lila { background: #eae5fb; color: #2563B0; font-weight: 600; }
.rc-ic-meta { padding: 8px 14px 0; color: var(--rc-suave); font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-ic-meta .rc-av { width: 16px; height: 16px; font-size: 8px; }
.rc-ic-resumen { padding: 6px 14px 10px; }
.rc-ic-msgs { padding: 0 14px 14px; }
.rc-ic-sug { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.rc-ic-sug span { border: 1px solid var(--rc-linea); border-radius: 12px; padding: 3px 10px; font-size: 11px; background: #fff; }
.rc-ic-form { border: 1px solid var(--rc-linea); border-radius: 7px; padding: 8px 10px; font-size: 11.5px; display: flex; align-items: center; gap: 7px; background: #fff; margin-bottom: 8px; }
.rc-ic-form b { margin-left: auto; color: var(--rc-suave); font-weight: 500; }
.rc-ic-sistema { text-align: center; color: var(--rc-suave); font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rc-ic-detalles { width: 214px; border-right: 0; border-left: 1px solid var(--rc-linea); }
.rc-ic-h { margin: 12px 14px 4px; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--rc-suave); font-weight: 600; }
.rc-ic-detalles .rc-ic-dl { padding: 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.rc-ic-detalles .rc-ic-dl dt { margin: 0; align-self: center; }
.rc-ic-detalles .rc-ic-dl dd { align-self: center; overflow: hidden; text-overflow: ellipsis; }
.rc-ic-link { display: flex; align-items: center; gap: 7px; padding: 5px 14px; font-size: 11.5px; }
.rc-ic-link b { margin-left: auto; color: var(--rc-suave); font-weight: 400; }
.rc-ic-detalles > .rc-link { margin: 10px 14px; display: inline-block; font-size: 11.5px; }


.rc-wk { --rc-acento: #08a84f; }
.rc-wk-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--rc-linea); flex-wrap: wrap; }
.rc-wk-cab strong { font-size: 19px; }
.rc-btn-verde { background: #2E8B5A; color: #fff; border-radius: 6px; padding: 9px 16px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.rc-wk-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.rc-wk-lead { color: #3d4d5c; max-width: 62ch; font-size: 14px; }
.rc-wk-card { display: flex; gap: 14px; border: 1px solid var(--rc-linea); border-radius: 8px; padding: 14px; align-items: flex-start; }
.rc-wk-card.on { border-color: #2E8B5A; box-shadow: 0 0 0 1px #2E8B5A; }
.rc-wk-card strong { display: block; font-size: 15px; margin-bottom: 5px; }
.rc-wk-card p { color: #3d4d5c; font-size: 13px; line-height: 1.5; }
.rc-wk-ic { position: relative; flex: none; color: #2E8B5A; }
.rc-wk-ic .rc-i { width: 27px; height: 27px; }
.rc-wk-ic b { position: absolute; top: -4px; right: -7px; color: #4ede8a; }
.rc-wk-ic b .rc-i { width: 12px; height: 12px; }


.rc-rl { --rc-acento: #2563B0; }
.rc-rl-lienzo { position: relative; padding: 16px 16px 16px 64px; background: linear-gradient(125deg, #8fd0f5 0%, #a9c4f7 42%, #f4d9c8 100%); }
.rc-rl-doc { background: #fff; border-radius: 10px 0 0 10px; padding: 20px; margin-right: -16px; box-shadow: 0 18px 44px -20px rgba(12, 26, 40, .4); }
.rc-rl-doc h5 { margin: 0 0 14px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.rc-rl-doc h6 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.rc-rl-doc > p { color: #3d4d5c; margin-bottom: 12px; max-width: 70ch; }
.rc-rl-tabla { width: 100%; border-collapse: collapse; }
.rc-rl-tabla th { text-align: left; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-suave); padding: 0 12px 6px 0; border-bottom: 1px solid var(--rc-linea); }
.rc-rl-tabla td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rc-linea); vertical-align: top; color: #2b3a48; }
.rc-rl-tabla td:nth-child(2) { white-space: nowrap; color: var(--rc-suave); }
.rc-cita { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #d8dee6; color: #4a5a68; font-size: 9px; font-weight: 600; vertical-align: 1px; }
.rc-rl-prompt {
  position: absolute; left: 12px; bottom: 34px; width: 210px;
  background: #fff; border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5;
  box-shadow: 0 16px 40px -16px rgba(12, 26, 40, .5);
}


.rc-d360 { --rc-acento: #2563B0; }
.rc-d360-cab { padding: 15px 20px; border-bottom: 1px solid var(--rc-linea); }
.rc-d360-cab strong { font-size: 18px; }
.rc-d360-cuerpo { display: grid; grid-template-columns: 240px 1fr; }
.rc-d360-pasos { list-style: none; margin: 0; padding: 18px 16px; border-right: 1px solid var(--rc-linea); display: flex; flex-direction: column; gap: 18px; position: relative; }
.rc-d360-pasos li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: #3d4d5c; position: relative; }
.rc-d360-pasos li i { width: 15px; height: 15px; border-radius: 50%; background: #e3e8ee; flex: none; margin-top: 2px; }
.rc-d360-pasos li.on { color: var(--rc-tinta); font-weight: 600; }
.rc-d360-pasos li.on i { background: #fff; border: 4px solid #2563B0; }
.rc-d360-pasos li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 19px; bottom: -18px; width: 1px; background: #e3e8ee; }
.rc-d360-form { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rc-d360-form > strong { font-size: 16px; }
.rc-et { font-size: 13px; margin-top: 6px; }
.rc-d360-op { border: 1px solid var(--rc-linea); border-radius: 6px; padding: 9px 12px; width: 100%; max-width: 340px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rc-d360-op i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #c3ccd7; flex: none; }
.rc-d360-op.on { border-color: #2563B0; }
.rc-d360-op.on i { border: 4px solid #2563B0; }
.rc-d360-pie { display: flex; gap: 8px; margin-top: 10px; }
.rc-btn-morado { background: #2563B0; color: #fff; border-radius: 5px; padding: 6px 16px; font-weight: 600; font-size: 12px; }


.rc-sf { --rc-acento: #14264B; position: relative; }
.rc-sf-tools { display: flex; align-items: center; gap: 9px; justify-content: flex-end; padding: 11px 14px; border-bottom: 1px solid var(--rc-linea); flex-wrap: wrap; }
.rc-sf-tabla { display: flex; flex-direction: column; }
.rc-sf-cab, .rc-sf-row {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1.5fr) .8fr 1fr 1.1fr .7fr .6fr;
  gap: 10px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--rc-linea);
}
.rc-sf-cab { color: var(--rc-suave); font-size: 11.5px; }
.rc-sf-cab .rc-sf-n { color: var(--rc-tinta); font-weight: 600; font-size: 12.5px; }
.rc-cbx { width: 15px; height: 15px; border-radius: 3px; border: 1px solid #c3ccd7; display: inline-block; }
.rc-cbx.on { background: #14264B; border-color: #14264B; position: relative; }
.rc-cbx.on::after { content: '✓'; position: absolute; inset: 0; color: #fff; font-size: 10px; display: grid; place-items: center; }
.rc-sf-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-sf-p b { font-weight: 700; display: block; }
.rc-sf-p i { font-style: normal; color: var(--rc-suave); font-size: 11px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sf-emp { font-weight: 600; }
.rc-btn-suave { background: #eef1f5; border-radius: 5px; padding: 5px 10px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; justify-self: start; white-space: nowrap; }
.rc-sf-loc, .rc-sf-listas { font-size: 11.5px; color: var(--rc-suave); display: inline-flex; align-items: center; gap: 5px; }
.rc-sf-enriq {
  position: absolute; right: 10px; top: 96px; width: 218px;
  background: #fff; border: 1px solid var(--rc-linea); border-radius: 9px;
  padding: 12px; box-shadow: 0 18px 44px -18px rgba(12, 26, 40, .45);
  display: flex; flex-direction: column; gap: 7px;
}
.rc-sf-enriq-h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rc-sf-enriq strong { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.rc-barra { height: 6px; border-radius: 3px; background: #e3e8ee; display: block; overflow: hidden; }
.rc-barra i { display: block; height: 100%; width: 78%; background: #14c08a; border-radius: 3px; }




.rc-marca-hs { position: relative; width: 20px; height: 20px; flex: none; }
.rc-marca-hs b {
  position: absolute; left: 4px; bottom: 0; width: 9px; height: 9px;
  border-radius: 50%; border: 2.5px solid #ff7a59;
}
.rc-marca-hs i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ff7a59; }
.rc-marca-hs i:nth-child(1) { top: 0; right: 1px; }
.rc-marca-hs i:nth-child(2) { top: 7px; right: 1px; }
.rc-marca-hs i:nth-child(3) { top: 3px; left: 7px; width: 2px; height: 7px; border-radius: 1px; }


.rc-fs-buscar {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #dbe2ea; border-radius: 5px;
  padding: 5px 9px; font-size: 11.5px; color: #3d4d5c;
}
.rc-fs-buscar i { font-style: normal; color: #97a4b2; border-left: 1px solid #dbe2ea; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.rc-fc-top {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px; border-bottom: 1px solid var(--rc-linea); background: #fff;
}
.rc-fc-top > strong { font-size: 15px; }
.rc-fc-top .rc-search {
  flex: 1; max-width: 340px; margin-left: auto;
  background: #fff; border: 1px solid var(--rc-linea); color: #7c8b99;
  display: inline-flex; align-items: center; gap: 7px;
}
.rc-fc-top-i { display: flex; align-items: center; gap: 11px; color: #5b6b7c; }
.rc-fc-top-i .rc-av { width: 22px; height: 22px; font-size: 9px; }
.rc-fc-rail2 {
  flex: none; width: 34px; background: #fff; border-left: 1px solid var(--rc-linea);
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0;
  color: #7c8b99;
}


.rc-halo-plano { display: flex; gap: 8px; align-items: stretch; }
.rc-halo-y {
  list-style: none; margin: 0; padding: 0; flex: none;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 9px; color: var(--rc-suave); text-align: right;
  font-variant-numeric: tabular-nums; height: 96px;
}
.rc-halo-plano .rc-halo-svg { flex: 1; height: 96px; overflow: visible; }

.rc-halo-plano { position: relative; }
.rc-halo-puntos { position: absolute; inset: 0 0 0 26px; pointer-events: none; }
.rc-halo-punto { position: absolute; width: 6px; height: 6px; border-radius: 50%; translate: -50% -50%; }
.rc-halo-punto.a { background: #0d4f63; }
.rc-halo-punto.b { background: #1187ad; }
.rc-halo-x { padding-left: 26px; }
.rc-halo-eje { display: block; text-align: center; font-size: 9.5px; color: var(--rc-suave); margin-top: 3px; }
.rc-halo-kpi .v.cian { color: #4A90D9; }
.rc-halo-fb { grid-column: span 2; }
.rc-halo-fb strong { display: block; font-size: 13px; margin-bottom: 8px; }
.rc-halo-pie.chico { width: 84px; height: 84px; }


.rc-sf-titulo { display: flex; align-items: center; gap: 9px; padding: 12px 14px 0; font-size: 15px; font-weight: 700; }
.rc-sf-punto { width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(140deg, #cbb8f5, #8f7ae0); flex: none; }
.rc-sf-historial {
  position: absolute; left: 10px; bottom: 10px; width: 214px;
  background: #f6f8fb; border-radius: 9px; padding: 12px;
  box-shadow: 0 18px 44px -18px rgba(12, 26, 40, .45);
  display: flex; flex-direction: column; gap: 10px;
}
.rc-sf-h-fila { display: flex; gap: 9px; align-items: flex-start; }
.rc-sf-h-fila strong { display: block; font-size: 12.5px; }
.rc-sf-h-ic { width: 22px; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--rc-linea); display: grid; place-items: center; flex: none; color: #5b6b7c; }
.rc-sf-h-ic.oscuro { background: #1b2733; color: #fff; border-color: #1b2733; }
.rc-sf-h-fila .rc-tag.lila { background: #ede8fb; color: #2563B0; font-weight: 600; margin-left: 6px; }


.rc-nodo.n1 { top: 6%; left: 46%; }
.rc-nodo.n2 { top: 44%; left: 12%; }
.rc-nodo.n3 { top: 44%; right: 5%; }
.rc-nodo.n4 { bottom: 8%; left: 14%; }
.rc-flecha.f1 { width: 1.5px; left: 24%; top: 15%; height: 27%; }
.rc-flecha.f2 { height: 1.5px; top: 49%; left: 44%; width: 21%; background: #94a3b3; }
.rc-flecha.f3 { width: 1.5px; left: 24%; top: 57%; height: 27%; }
.rc-flecha.f1 { background: var(--rc-acento); }
.rc-flecha.f1::after { top: -7px; left: -3.2px; border-bottom-color: var(--rc-acento); border-top-color: transparent; }
.rc-flecha.f3::after { bottom: -7px; left: -3.2px; border-top-color: var(--rc-acento); }


@container (max-width: 900px) {
  .rc-hs-grid { grid-template-columns: 1fr 1fr; }
  .rc-hs-agenda { grid-row: auto; grid-column: span 2; }
  .rc-hs-acciones { grid-column: span 2; }
  .rc-halo-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-halo-linea, .rc-halo-pastel, .rc-halo-tabla { grid-column: span 2; }
  .rc-fsv-split, .rc-d360-cuerpo { grid-template-columns: 1fr; }
  .rc-fsv-cmdb { border-right: 0; border-bottom: 1px solid var(--rc-linea); }
  .rc-d360-pasos { border-right: 0; border-bottom: 1px solid var(--rc-linea); }
  .rc-fc-ficha, .rc-ic-detalles, .rc-ic-cliente { display: none; }
  .rc-sf-enriq { position: static; width: auto; margin: 12px 14px; box-shadow: none; }
}
@media (max-width: 620px) {
  .rc-figura .rc { overflow-x: auto; }
  .rc-figura .rc > * { min-width: 560px; }
}


@media (prefers-reduced-motion: no-preference) {
  .reveal .rc-barra i { animation: rc-crece .9s var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both; }
  @keyframes rc-crece { from { width: 0; } }
}


.hero .hero3d.sin-sitio { opacity: 0; pointer-events: none; }


.rc-pd { --rc-acento: #3CB87A; }
.rc-pd-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--rc-linea);
}
.rc-pd-cab strong { font-size: 15px; letter-spacing: -.01em; }
.rc-pd-x { color: var(--rc-suave); font-size: 17px; line-height: 1; }
.rc-pd-cuerpo { padding: 16px 18px 20px; }
.rc-pd-t { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.rc-pd-tabs {
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--rc-linea); margin-bottom: 16px;
}
.rc-pd-tabs span {
  padding-bottom: 8px; color: var(--rc-suave); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rc-pd-tabs span.on { color: var(--rc-tinta); font-weight: 700; border-bottom-color: var(--rc-acento); }
.rc-pd-lupa { margin-left: auto; display: flex; }
.rc-pd-rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rc-pd-card { margin: 0; }
.rc-pd-card figcaption {
  margin-top: 8px; text-align: center; font-weight: 700; font-size: 12px; line-height: 1.3;
}
.rc-pd-mini {
  aspect-ratio: 4 / 5; border-radius: 4px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em; text-align: center;
}

.rc-pd-mini b { display: block; line-height: 1.15; color: inherit; }
.rc-pd-marca { font-size: 8px; font-weight: 700; opacity: .75; margin-bottom: 6px; letter-spacing: .06em; }
.rc-pd-blanco { border: 1px solid var(--rc-linea); background: #fff; }
.rc-pd-mas { font-size: 24px; font-weight: 400; color: var(--rc-suave); }
.rc-pd-oscura { background: #1b2733; color: #fff; }
.rc-pd-clara  { background: #f1efe9; color: #2f3a2f; }
.rc-pd-verde  { background: linear-gradient(160deg, #2f7d55, #3CB87A); color: #fff; }


@container (max-width: 430px) {
  .rc-pd-rejilla { grid-template-columns: repeat(2, 1fr); }
  .rc-pd-tabs { gap: 12px; overflow: hidden; }
  .rc-pd-tabs span:nth-child(n+3) { display: none; }
}


.rc-ss { --rc-acento: #4A90D9; }
.rc-ss-nav { width: 158px; padding: 14px 10px; background: var(--rc-fondo); display: flex; flex-direction: column; gap: 2px; }
.rc-ss-navmarca { display: flex; align-items: center; gap: 8px; padding: 0 4px 12px; }
.rc-ss-navmarca i { width: 22px; height: 22px; border-radius: 6px; background: var(--rc-acento); color: #fff; font-style: normal; font-weight: 700; font-size: 12px; display: grid; place-items: center; flex: none; }
.rc-ss-navmarca b { font-size: 12.5px; font-weight: 700; }
.rc-ss-navsec { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--rc-suave); padding: 10px 8px 4px; }
.rc-ss-navitem { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 12px; }
.rc-ss-navitem .rc-i { color: var(--rc-suave); }
.rc-ss-navitem.on { background: #fff; box-shadow: 0 1px 3px rgba(12, 26, 40, .08); font-weight: 600; }
.rc-ss-navitem.on .rc-i { color: var(--rc-acento); }
.rc-ss-navitem b { margin-left: auto; font-size: 10.5px; font-weight: 600; }
.rc-ss-pane .rc-cab h6 { margin-bottom: 10px; }
.rc-ss-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 14px 0; }
.rc-ss-kpi { background: var(--rc-fondo); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.rc-ss-kpi .v { font-size: 21px; font-weight: 700; line-height: 1.1; }
.rc-ss-kpi .v.sky { color: #4A90D9; }
.rc-ss-kpi .v.teal { color: #0d9488; }
.rc-ss-kpi .v.verde { color: #2E8B5A; }
.rc-ss-kpi .l { font-size: 10.5px; color: var(--rc-suave); }
.rc-ss-kpi .t { font-size: 9.5px; color: #2E8B5A; }
.rc-ss-chart { padding: 18px 14px 4px; }
.rc-ss-chart-t { font-size: 10.5px; font-weight: 600; color: var(--rc-suave); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 8px; }
.rc-ss-bars { display: flex; align-items: flex-end; gap: 8px; height: 88px; }
.rc-ss-bar { display: block; flex: 1; border-radius: 3px 3px 0 0; }
.rc-ss-months { display: flex; gap: 8px; margin-top: 6px; }
.rc-ss-months span { flex: 1; text-align: center; font-size: 9.5px; color: var(--rc-suave); }
.rc-ss-nps { display: flex; gap: 24px; padding: 18px 14px 16px; border-top: 1px solid var(--rc-linea); margin-top: 10px; flex-wrap: wrap; }
.rc-ss-nps-col { flex: 1.2; min-width: 200px; }
.rc-ss-nps-col strong, .rc-ss-canales strong { display: block; font-size: 12px; margin-bottom: 8px; }
.rc-ss-npsbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.rc-ss-npsbar i.det { background: #fecaca; }
.rc-ss-npsbar i.pas { background: #fef08a; }
.rc-ss-npsbar i.pro { background: #4A90D9; }
.rc-ss-npsrow { display: flex; align-items: center; gap: 16px; }
.rc-ss-score { font-size: 28px; font-weight: 700; }
.rc-ss-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.rc-ss-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.rc-ss-leg i.det { background: #fecaca; }
.rc-ss-leg i.pas { background: #fef08a; }
.rc-ss-leg i.pro { background: #4A90D9; }
.rc-ss-canales { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 7px; }
.rc-ss-crow { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.rc-ss-crow .n { width: 62px; color: var(--rc-suave); flex: none; }
.rc-ss-crow .rc-barra { flex: 1; }
.rc-ss-crow .v { width: 28px; text-align: right; font-weight: 600; flex: none; }
@container (max-width: 900px) {
  .rc-ss-kpis { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 700px) {
  footer .f-links { gap: 2px; }
  footer .f-links a { padding-block: 7px; }
  .f-social a { width: 44px; height: 44px; }
  
  .f-country { gap: 8px; }
  .f-country a { padding-block: 7px; }
  
  .footer-bottom .fb-links { gap: 4px 18px; }
  .footer-bottom .fb-links a { padding-block: 7px; }
}


.hero-grid > *,
.split > *,
.stat-band > *,
.stats-row > * { min-width: 0; }

.app-window { max-width: 100%; }


.grid > * { min-width: 0; }





.pill:not([class*="pill-"]) {
  color: var(--marca-claro, var(--ink-2));
  border-color: var(--marca-claro, var(--line));
}
.bg-dark .pill:not([class*="pill-"]),
.hero-dark .hero-tags .pill:not([class*="pill-"]) {
  color: var(--marca-oscuro, var(--on-dark));
  border-color: var(--marca-oscuro, var(--dark-line));
}


.app-window .aw-kpi .d.up { color: var(--marca-claro, var(--zen-green-600)); }
.bg-dark .app-window .aw-kpi .d.up { color: var(--marca-oscuro, var(--zen-green-600)); }





@media (max-width: 1040px) {
  .hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .hero-centro .hero-meta { align-items: center; }
  .hero-meta > span + span::before { content: none; }
}


@media (max-width: 700px) {
  .aw-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aw-body > table { min-width: 460px; }
}


@media (max-width: 700px) {
  footer .f-links { gap: 0; }
  footer .f-links a { padding-block: 12px; }
  .f-country a { padding-block: 12px; }
  .footer-bottom .fb-links a { padding-block: 12px; }
}


.rc-zl { --rc-acento: #1E4F93; }
.rc-zl-nav { width: 168px; padding: 14px 10px; background: var(--rc-fondo); display: flex; flex-direction: column; gap: 2px; }
.rc-zl-marca { display: flex; align-items: center; gap: 8px; padding: 0 4px 12px; }
.rc-zl-marca i {
  width: 22px; height: 22px; border-radius: 6px; background: var(--rc-acento);
  color: #fff; font-style: normal; font-weight: 700; font-size: 12px;
  display: grid; place-items: center; flex: none;
}
.rc-zl-marca b { font-size: 12.5px; font-weight: 700; }
.rc-zl-sec { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--rc-suave); padding: 10px 8px 4px; }
.rc-zl-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 11.5px; }
.rc-zl-item .rc-i { color: var(--rc-suave); }
.rc-zl-item.on { background: #fff; box-shadow: 0 1px 3px rgba(12, 26, 40, .08); font-weight: 600; }
.rc-zl-item.on .rc-i { color: var(--rc-acento); }
.rc-zl-item b { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #A85A12; }
.rc-zl-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 14px 0; }
.rc-zl-kpi { background: var(--rc-fondo); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.rc-zl-kpi .v { font-size: 20px; font-weight: 700; line-height: 1.1; }
.rc-zl-kpi .v.ambar { color: #A85A12; }
.rc-zl-kpi .v.rojo  { color: #b91c1c; }
.rc-zl-kpi .v.cian  { color: #1E4F93; }
.rc-zl-kpi .v.verde { color: #27794E; }
.rc-zl-kpi .l { font-size: 10.5px; color: var(--rc-suave); }
.rc-zl-kpi .t { font-size: 9.5px; color: var(--rc-suave); }
.rc-zl-tabla { padding: 16px 14px 0; }
.rc-zl-th, .rc-zl-tr {
  display: grid; grid-template-columns: 1.7fr .6fr .8fr .5fr .9fr;
  align-items: center; gap: 8px;
}
.rc-zl-th {
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rc-suave); padding-bottom: 7px; border-bottom: 1px solid var(--rc-linea);
}
.rc-zl-tr { padding: 9px 0; border-bottom: 1px solid var(--rc-linea); font-size: 11.5px; }
.rc-zl-app { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rc-zl-app i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-style: normal; flex: none; }
.rc-zl-app b { display: block; font-weight: 600; }
.rc-zl-app em { display: block; font-style: normal; font-size: 9.5px; color: var(--rc-suave); }
.rc-zl-chip { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; justify-self: start; white-space: nowrap; }
.rc-zl-chip.ok     { background: #dcfce7; color: #27794E; }
.rc-zl-chip.aviso  { background: #fef3c7; color: #A85A12; }
.rc-zl-chip.riesgo { background: #fee2e2; color: #b91c1c; }
.rc-zl-riesgos { padding: 16px 14px 16px; }
.rc-zl-riesgos strong { display: block; font-size: 12px; margin-bottom: 10px; }
.rc-zl-riesgo { display: flex; align-items: center; gap: 10px; font-size: 11px; margin-bottom: 7px; }
.rc-zl-riesgo .n { flex: 1; min-width: 0; color: var(--rc-suave); }
.rc-zl-riesgo .rc-barra { width: 110px; flex: none; }
.rc-zl-riesgo .rc-barra i.rojo  { background: #C23B3B; }
.rc-zl-riesgo .rc-barra i.ambar { background: #f59e0b; }
.rc-zl-riesgo .rc-barra i.cian  { background: #06b6d4; }
.rc-zl-riesgo .v { width: 24px; text-align: right; font-weight: 700; flex: none; }
.rc-zl-riesgo .v.rojo  { color: #b91c1c; }
.rc-zl-riesgo .v.ambar { color: #A85A12; }
.rc-zl-riesgo .v.cian  { color: #1E4F93; }


.rc-pt { --rc-acento: #0071b1; }
.rc-pt-cab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--rc-linea); background: var(--rc-fondo);
}
.rc-pt-cab strong { font-size: 12px; color: var(--rc-suave); font-weight: 600; }
.rc-pt-dots { display: flex; gap: 5px; }
.rc-pt-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rc-linea); }
.rc-pt-dots i:nth-child(1) { background: #ff5f57; }
.rc-pt-dots i:nth-child(2) { background: #febc2e; }
.rc-pt-dots i:nth-child(3) { background: #52D68A; }
.rc-pt-cuerpo { padding: 16px 16px 18px; }
.rc-pt-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rc-pt-kpi { background: var(--rc-fondo); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.rc-pt-kpi .v { font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--rc-acento); }
.rc-pt-kpi .l { font-size: 10.5px; color: var(--rc-suave); }
.rc-pt-kpi .t { font-size: 10px; color: #27794E; }
.rc-pt-grafico { margin-top: 18px; }
.rc-pt-t { font-size: 10.5px; color: var(--rc-suave); display: block; margin-bottom: 8px; }
.rc-pt-bars { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.rc-pt-bar { display: block; flex: 1; border-radius: 3px 3px 0 0; background: #bfdcef; }
.rc-pt-bar.alta { background: var(--rc-acento); }
.rc-pt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.rc-pt-card { background: var(--rc-fondo); border-radius: 8px; padding: 12px 14px; }
.rc-pt-card strong { display: block; font-size: 11.5px; margin-bottom: 10px; }
.rc-pt-prog { margin-bottom: 9px; }
.rc-pt-prog .e { display: flex; justify-content: space-between; font-size: 10.5px; margin-bottom: 4px; }
.rc-pt-prog .e b { font-weight: 600; }
.rc-pt-prog .rc-barra i { background: var(--rc-acento); }
.rc-pt-pipe { display: flex; align-items: center; margin: 4px 0 10px; }
.rc-pt-pipe .p-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--rc-acento); flex: none; }
.rc-pt-pipe .p-line { display: block; flex: 1; height: 2px; background: var(--rc-acento); opacity: .45; }
.rc-pt-etapas { display: block; font-size: 10px; color: var(--rc-suave); }
.rc-pt-vivo { display: block; margin-top: 8px; font-size: 10px; color: #27794E; }


@container (max-width: 900px) {
  .rc-zl-kpis { grid-template-columns: repeat(2, 1fr); }
  .rc-pt-row2 { grid-template-columns: 1fr; }
}


.arq { --arq-acento: #995c00; --arq-linea: var(--line); max-width: 860px; margin-inline: auto; }
.arq-capa, .arq-sub {
  border: 1px solid var(--arq-linea); border-radius: 14px;
  padding: 16px; background: var(--surface);
}
.arq-et, .arq-sub-et, .arq-vpc-et {
  display: block; font-size: .6875rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.arq-fila { display: flex; flex-wrap: wrap; gap: 12px; }
.arq-n {
  
  display: block;
  flex: 1 1 170px; min-width: 0;
  border: 1px solid var(--arq-linea); border-left: 3px solid var(--arq-acento);
  border-radius: 10px; padding: 11px 14px; background: var(--surface);
}
.arq-n b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.arq-n em { display: block; font-style: normal; font-size: .75rem; color: var(--muted); margin-top: 2px; }


.arq-vpc {
  position: relative; border: 2px dashed var(--arq-acento); border-radius: 16px;
  padding: 26px 16px 16px; margin: 0;
  background: color-mix(in srgb, var(--arq-acento) 4%, transparent);
}
.arq-vpc-et {
  position: absolute; top: -10px; left: 18px; margin: 0;
  background: var(--surface-2); padding: 0 8px; color: var(--arq-acento);
}
.arq-vpc .arq-sub { background: var(--surface); }


.arq-baja {
  display: block; width: 2px; height: 22px; margin: 0 auto;
  background: var(--arq-acento); opacity: .45; position: relative;
}
.arq-baja::after {
  content: ''; position: absolute; bottom: -1px; left: 50%; translate: -50% 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--arq-acento);
}


.arq-az { gap: 12px; }
.arq-zona {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px dashed var(--arq-linea); border-radius: 12px; padding: 12px;
  background: var(--surface-2);
}
.arq-zona > i {
  display: block; font-style: normal; font-size: .6875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}

.arq-zona .arq-n { background: var(--surface); flex: 0 0 auto; }


.bg-dark .arq { --arq-acento: #ff9900; --arq-linea: var(--dark-line); }
.bg-dark .arq-capa, .bg-dark .arq-sub, .bg-dark .arq-n, .bg-dark .arq-zona .arq-n { background: rgba(255, 255, 255, .04); }
.bg-dark .arq-vpc-et { background: var(--dark-2, var(--dark)); }


@media (max-width: 640px) {
  .arq-n, .arq-zona { flex-basis: 100%; }
  .arq-capa, .arq-sub { padding: 14px; }
  .arq-vpc { padding: 24px 12px 14px; }
}







@media (max-width: 767px) {
  body { overflow-wrap: break-word; }
}



@media (scripting: none) {
  .reveal:not(.title-phase-1):not(.title-phase-2),
  .reveal:not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.rev-fan):not(.title-phase-1):not(.title-phase-2),
  .reveal-left:not(.title-phase-1):not(.title-phase-2),
  .reveal-right:not(.title-phase-1):not(.title-phase-2),
  .reveal-scale:not(.title-phase-1):not(.title-phase-2) {
    opacity: 1;
    transform: none;
    translate: none;
    rotate: none;
    scale: none;
    filter: none;
  }

  
  .reveal:not(.in) .app-window { opacity: 1; transform: none; }

  
  .orbit-w { opacity: 1; }
}



@media (prefers-reduced-motion: reduce) {
  .reveal:not(.title-phase-1):not(.title-phase-2),
  .reveal:not(.reveal-left):not(.reveal-right):not(.reveal-scale):not(.rev-fan):not(.title-phase-1):not(.title-phase-2),
  .reveal-left:not(.title-phase-1):not(.title-phase-2),
  .reveal-right:not(.title-phase-1):not(.title-phase-2),
  .reveal-scale:not(.title-phase-1):not(.title-phase-2) {
    opacity: 1;
    transform: none;
    translate: none;
    rotate: none;
    scale: none;
    filter: none;
  }
  .reveal:not(.in) .app-window { opacity: 1; transform: none; }

  
  .stagger > * { opacity: 1; transform: none; }

  .orbit-w { opacity: 1; }
}



@keyframes zen-rescate-reveal {
  to { opacity: 1; transform: none; translate: none; rotate: none; scale: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    
    .reveal:not(.in):not(.title-phase-1):not(.title-phase-2),
    .stagger:not(.in) > * {
      animation: zen-rescate-reveal 1ms linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 68%;
    }

    
    .hero .reveal:not(.title-phase-1):not(.title-phase-2),
    .hero .rev-auto:not(.title-phase-1):not(.title-phase-2) {
      animation: none;
    }
  }
}







@media (max-width: 1023px) {
  
  .hero .hero3d.sin-sitio {
    opacity: var(--nube-o, .28);
    pointer-events: none;
  }

  
  .hero .hero3d.viva { transform: none; }
  .hero .hero3d.viva img { transform: none; rotate: none; }
}






@media (max-width: 1023px) {
  
  .rc .rc-fc-ficha { display: block; }

  
  .rc .rc-ic-detalles { display: block; }

  
  .rc .rc-ic-cliente { display: grid; }

  
  .rc-pd .rc-pd-tabs span:nth-child(n+3) { display: block; }
}



@media (max-width: 767px) {
  .rc-figura .rc[class] { overflow: hidden; }
  .rc-figura .rc > [class] { min-width: 0; }
}



@media (max-width: 767px) {
  .rc .rc-cuerpo {
    flex-direction: column;
    min-height: 0;              
  }

  
  .rc .rc-pane { flex: 0 0 auto; }

  
  .rc .rc-col {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--rc-linea);
  }

  
  .rc .rc-cuerpo > :last-child { border-bottom: 0; }

  
  .rc .rc-rail {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .rc .rc-rail::-webkit-scrollbar { display: none; }
  .rc .rc-rail-i { flex: none; }

  
  .rc .rc-fc-rail2 {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 8px;
    border-left: 0;
    border-top: 0;
  }
}



@media (max-width: 767px) {
  
  .rc .rc-cab.fila { flex-wrap: wrap; row-gap: 8px; }

  
  .rc-hubspot .rc-top { flex-wrap: wrap; row-gap: 8px; }
  .rc-hubspot .rc-search { order: 5; flex: 1 0 100%; max-width: none; }

  
  .rc-fc .rc-fc-top { flex-wrap: wrap; row-gap: 8px; }
  .rc-fc .rc-fc-top .rc-search {
    order: 5; flex: 1 0 100%; max-width: none; margin-left: 0;
  }

  
  .rc-fd .rc-fd-cab { flex-wrap: wrap; row-gap: 8px; }

  
  .rc-halo .rc-halo-tabs { flex-wrap: wrap; row-gap: 8px; }
  .rc-halo .rc-halo-acc { margin-left: 0; flex: 1 0 100%; flex-wrap: wrap; }
  .rc-halo .rc-halo-filtros { flex-wrap: wrap; gap: 16px; }

  
  .rc-sf .rc-sf-tools { justify-content: flex-start; gap: 8px; }

  
  .rc-fresh .rc-fs-tools,
  .rc-fresh .rc-fs-formato,
  .rc-fresh .rc-fs-pie { flex-wrap: wrap; row-gap: 8px; }
}



@media (max-width: 767px) {
  .rc .rc-zl-nav,
  .rc .rc-ss-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rc .rc-zl-nav::-webkit-scrollbar,
  .rc .rc-ss-nav::-webkit-scrollbar { display: none; }

  
  .rc .rc-zl-marca,
  .rc .rc-ss-navmarca {
    flex: none;
    padding: 0 8px 0 0;
    border-right: 1px solid var(--rc-linea);
  }

  
  .rc .rc-zl-sec,
  .rc .rc-ss-navsec { flex: none; padding: 0; }

  .rc .rc-zl-item,
  .rc .rc-ss-navitem { flex: none; padding: 8px; scroll-snap-align: start; }

  
  .rc .rc-zl-item b,
  .rc .rc-ss-navitem b { margin-left: 8px; }

  
  .rc-fresh .rc-fs-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .rc-fresh .rc-fs-nav li { flex: 0 1 auto; }
}



@media (max-width: 767px) {
  .rc-hubspot .rc-hs-grid { grid-template-columns: 1fr; }
  .rc-hubspot .rc-hs-agenda,
  .rc-hubspot .rc-hs-acciones { grid-column: auto; grid-row: auto; }

  
  .rc-hubspot .rc-hs-tareas { flex-direction: column; gap: 16px; }
  .rc-hubspot .rc-hs-cifras {
    flex-direction: row;
    justify-content: flex-start;
    gap: 32px;
  }

  
  .rc-hubspot .rc-hs-accion { flex-wrap: wrap; }
  .rc-hubspot .rc-hs-meta {
    flex: 1 0 100%;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
}



@media (max-width: 767px) {
  
  .rc-fd .rc-fd-tour {
    position: static;
    width: auto;
    margin-top: 16px;
    box-shadow: none;
  }

  
  .rc-sf .rc-sf-historial {
    position: static;
    width: auto;
    margin: 16px;
    box-shadow: none;
    border: 1px solid var(--rc-linea);
  }

  
  .rc-sf .rc-sf-enriq { margin: 16px; }

  
  .rc-rl .rc-rl-prompt {
    position: static;
    width: auto;
    margin-top: 16px;
    box-shadow: none;
    border: 1px solid var(--rc-linea);
  }
}



@media (max-width: 767px) {

  
  .rc-zl .rc-zl-tabla { overflow-x: auto; }
  .rc-zl .rc-zl-th,
  .rc-zl .rc-zl-tr { min-width: 480px; }

  
  .rc-sf .rc-sf-tabla { overflow-x: auto; scroll-snap-type: x proximity; }
  .rc-sf .rc-sf-cab,
  .rc-sf .rc-sf-row { min-width: 800px; scroll-snap-align: start; }

  
  .rc-halo .rc-halo-tabla { overflow-x: auto; }
  .rc-halo .rc-halo-tabla table { min-width: 440px; }

  
  .rc-halo .rc-halo-pie-wrap { gap: 16px; flex-wrap: wrap; }

  
  .rc-rl .rc-rl-lienzo { padding: 16px; }
  .rc-rl .rc-rl-doc {
    margin-right: 0;
    border-radius: 10px;
    overflow-x: auto;
  }
  .rc-rl .rc-rl-tabla { min-width: 420px; }

  
  .rc-pt .rc-pt-grafico { overflow-x: auto; }
  .rc-pt .rc-pt-bars { min-width: 408px; }

  
  .rc-pd .rc-pd-tabs {
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .rc-pd .rc-pd-tabs::-webkit-scrollbar { display: none; }
  .rc-pd .rc-pd-tabs span { flex: none; scroll-snap-align: start; }
  .rc-pd .rc-pd-lupa { margin-left: 0; }
}



@media (max-width: 767px) {

  
  .rc .rc-rail,
  .rc .rc-zl-nav,
  .rc .rc-ss-nav,
  .rc-pd .rc-pd-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }

  
  .rc-zl .rc-zl-tabla,
  .rc-sf .rc-sf-tabla,
  .rc-halo .rc-halo-tabla,
  .rc-rl .rc-rl-doc,
  .rc-pt .rc-pt-grafico,
  .app-window .aw-body,
  .app-window .aw-kanban {
    background-image:
      linear-gradient(90deg,  rgb(255 255 255) 0%, rgb(255 255 255 / 0) 100%),
      linear-gradient(270deg, rgb(255 255 255) 0%, rgb(255 255 255 / 0) 100%),
      linear-gradient(90deg,  rgb(12 26 40 / .14) 0%, rgb(12 26 40 / 0) 100%),
      linear-gradient(270deg, rgb(12 26 40 / .14) 0%, rgb(12 26 40 / 0) 100%);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: #fff;
  }
}



@media (max-width: 767px) {
  
  .app-window .aw-kpis { grid-template-columns: repeat(2, 1fr); }

  
  .rc-pt .rc-pt-kpis { grid-template-columns: repeat(2, 1fr); }

  
  .rc-pd .rc-pd-rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .app-window .aw-kpis { grid-template-columns: 1fr; }
  .rc-pt .rc-pt-kpis { grid-template-columns: 1fr; }
  .rc-zl .rc-zl-kpis { grid-template-columns: 1fr; }
  .rc-ss .rc-ss-kpis { grid-template-columns: 1fr; }

  .rc-halo .rc-halo-grid { grid-template-columns: 1fr; }
  .rc-halo .rc-halo-linea,
  .rc-halo .rc-halo-pastel,
  .rc-halo .rc-halo-fb,
  .rc-halo .rc-halo-tabla { grid-column: auto; }
}



@media (max-width: 767px) {
  .rc-intercom .rc-ic-cliente { padding: 16px; }
  .rc-intercom .rc-ic-tarjeta { max-width: 320px; margin-inline: auto; }
}



@media (max-width: 767px) {
  
  .app-window .aw-bar-item {
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }
  .app-window .aw-bar-item .lbl { grid-column: 1; grid-row: 1; white-space: normal; }
  .app-window .aw-bar-item .pct { grid-column: 2; grid-row: 1; }
  .app-window .aw-bar-item .track { grid-column: 1 / -1; grid-row: 2; height: 8px; }

  
  .app-window .aw-kanban {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .app-window .aw-col { flex: 0 0 176px; scroll-snap-align: start; }

  
  .app-window .aw-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-window .aw-body > table { min-width: 460px; }
}



@media (max-width: 479px) {
  .timeline .tl-item { grid-template-columns: 44px 1fr; gap: 16px; }
}



@media (prefers-reduced-motion: reduce) {
  .rc .rc-zl-nav,
  .rc .rc-ss-nav,
  .rc-pd .rc-pd-tabs,
  .rc-sf .rc-sf-tabla,
  .app-window .aw-kanban { scroll-snap-type: none; }
}





.modal-backdrop {
  z-index: 100000;
  overscroll-behavior: contain;
}


.modal { max-height: calc(100vh - 128px); }
.modal { max-height: calc(100dvh - 128px); }

@media (max-width: 767px) {

  
  .modal-backdrop:not(.galeria) {
    align-content: start;
    align-items: start;
    overflow-y: auto;
    padding: 88px var(--gutter) 48px;
  }

  
  .modal-backdrop:not(.galeria) .modal {
    max-height: none;
    padding: 64px 24px 32px;
  }
  

  
  .modal-backdrop:not(.galeria) .modal-close { top: 16px; right: 16px; }
}


@media (max-width: 767px) {
  body .modal-backdrop:not(.galeria) { padding-top: 88px; }
}


@media (max-width: 767px) {
  html:has(.modal-backdrop.open),
  html:has(.mobile-menu.open) { overflow-y: hidden; }
}

@media (max-width: 767px) {

  
  .field input, .field select, .field textarea,
  .hs-form-wrap input[type=text],
  .hs-form-wrap input[type=email],
  .hs-form-wrap input[type=tel],
  .hs-form-wrap input[type=number],
  .hs-form-wrap select,
  .hs-form-wrap textarea { font-size: 1rem; }

  
  .hs-form-wrap .hs-field-desc,
  .hs-form-wrap .hs-error-msg,
  .hs-form-wrap .hs-error-msgs label,
  .hs-form-wrap .legal-consent-container,
  .hs-form-wrap .hs-richtext { font-size: .8125rem; }

  
  .hs-form-wrap .hs-form-booleancheckbox-display input[type=checkbox] {
    width: 20px; height: 20px; flex: none;
  }

  
  .modal-alt { font-size: .8125rem; margin-top: 16px; }
  .modal-alt a { display: inline-flex; align-items: center; min-height: 44px; }

  
  .modal .eyebrow { font-size: .75rem; }
}




@media (max-width: 767px) {
  .filter-bar button {
    min-height: 44px;
    padding-block: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}


.filter-bar button.on {
  background: linear-gradient(135deg, var(--zen-green-600), var(--zen-green-700));
}

@media (max-width: 767px) {

  

  
  .aw-kpi .k, .aw-kpi .d { font-size: .75rem; }

  
  .aw-bar-item .lbl, .aw-bar-item .pct { font-size: .75rem; }

  
  .aw-live, .aw-chip { font-size: .6875rem; }

  

  
  .plan-tier { font-size: .75rem; }

  
  .marca-lockup-sub, .marca-lockup-cred { font-size: .75rem; }
}
@media (min-width: 561px) and (max-width: 767px) {
  .marca-lockup-sep {
    display: block;
    width: 4px; height: 4px;
    border-radius: var(--r-pill);
    align-self: center;
    background: rgba(255, 255, 255, .45);
  }
  .hero-light .marca-lockup-sep,
  .hero-claro .marca-lockup-sep { background: var(--line-strong); }
}





@media (max-width: 1023px) {
  
  .hero { position: relative; }
  
  .hero > .container { position: relative; z-index: 1; }

  
  .hero .hero3d {
    
    display: block;
    position: absolute;
    
    z-index: 0;
    
    top: 6%;
    left: -14%;
    right: auto;
    bottom: auto;
    translate: none;
    width: 62%;
    max-width: none;
    
    --nube-o: .26;
  }

  
  .hero .hero3d-b {
    
    display: block;
    position: absolute;
    z-index: 0;
    
    top: 20%;
    right: -18%;
    left: auto;
    bottom: auto;
    translate: none;
    width: 52%;
    max-width: none;
    margin-block-start: 0;
    --nube-o: .2;
  }
  
  .hero .hero3d-b img { scale: -1 1; }

  
  .hero .hero3d img {
    width: 100%;
    height: auto;
    aspect-ratio: 677 / 324;
  }


  .hero .hero3d { opacity: var(--nube-o); }
}


@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .hero .hero3d.viva {
    transform: none;
    animation: nube-flota 9s ease-in-out infinite;
  }
  .hero .hero3d-b.viva {
    animation: nube-flota-b 13s ease-in-out infinite;
  }
}



@media (max-width: 767px) {
  .hero .hero3d { width: 66%; }
  .hero .hero3d-b { width: 56%; }
}
@media (max-width: 479px) {

  .hero .hero3d { width: 70%; --nube-o: .34; }
  .hero .hero3d-b { width: 60%; --nube-o: .26; }
}


@media (max-width: 1023px) {
  .hero-centro .hero-grid { justify-items: center; }
  .hero-centro .hero-grid > div { width: 100%; }

  
  .hero-centro .hero-grid > div:first-child {
    position: relative;
    text-align: center;
    max-width: 850px;
    margin-inline: auto;
  }

  
  .hero-centro .hero-grid > div:last-child {
    max-width: 980px;
    margin-inline: auto;
  }

  
  .hero-centro .hero-cta,
  .hero-centro .hero-tags,
  .hero-centro .hero-meta { justify-content: center; }
  .hero-centro .eyebrow { margin-inline: auto; }

  
  .hero .tira-logos { justify-content: center; }
}



@media (max-width: 767px) {
  
  .orbit-w[data-orbit] {
    display: block;
    
    aspect-ratio: 1430 / 1900;
    
    width: calc(100% - 32px);
    
    max-width: 420px;
  }
  
  .orbit-item { width: 40px; height: 40px; }
  
  .orbit-core img { width: 56px; }
  
  .orbit-core .oc-t { margin-top: 8px; }
}
@media (max-width: 479px) {
  
  .orbit-item { width: 32px; height: 32px; }
  .orbit-core img { width: 40px; }
}



@media (max-width: 767px) {
  .modal-backdrop:not(.galeria) { padding: 88px 24px 48px; }
}
@media (max-width: 479px) {
  .modal-backdrop:not(.galeria) { padding-inline: 16px; }
}



@media (max-width: 479px) {
  header.nav .nav-actions { gap: 8px; }
  header.nav .nav-actions .btn { padding-inline: 8px; }
}



@media (max-width: 767px) {
  
  
  .hero-visual-col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-visual-col > .app-window { width: 100%; }
  .float-card {
    display: inline-flex;
    position: static;
    animation: none;
    
    translate: none;
    margin: 8px 0 0;
    max-width: 100%;
    text-align: start;
    white-space: normal;
  }
  
  .float-card .fc-t,
  .float-card .fc-s { white-space: normal; }
}




@media (max-width: 767px) {

  .topbar .sep { display: none; }


  .tb-slide { gap: 8px; }
  .topbar-inner { padding-inline-end: 46px; }

  .topbar .tb-close {
    position: relative; right: auto; top: auto; transform: none;
    grid-area: 1 / 2 / 2 / 3; justify-self: end; align-self: start;
    margin-inline-start: 6px; min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}


@media (max-width: 767px) {
  .topbar .tb-tag { font-size: .75rem; }   
  .float-card .fc-s { font-size: .75rem; } 
  .tl-phase { font-size: .75rem; }         
  .ev-estado { font-size: .75rem; }        
  .pc-n { font-size: .75rem; }             
  .cred-et { font-size: .75rem; }          
}


@media (max-width: 767px) {
  .ev-capa-x { width: 44px; height: 44px; }
  .ev-gal-ant, .ev-gal-sig { width: 44px; height: 44px; }
  
  .tabs-nav button { min-height: 44px; }
}


@media (hover: none) {
  .card-hover:hover,
  .card:hover,
  .plan:hover,
  .quote-card:hover,
  .partner-tile:hover,
  .event-card:hover,
  .ev-card:hover,
  .orbit-item:hover,
  .flow-step:hover .fs-ico,
  .stat:hover .n {
    transform: none;
    scale: none;
    translate: none;
    box-shadow: none;
  }
}


@media (max-width: 767px) {
  .rc-zl-tabla, .rc-sf-tabla, .rc-halo-tabla,
  .aw-kanban, .rc-pt-grafico, .rc-pd-tabs, .rc-rl-doc {
    touch-action: pan-x;
  }
}


.ev-capa { z-index: 100000; }


@media (max-width: 767px) {
  .btn-lg { padding-inline: 24px; }
  .btn {
    white-space: normal;
    text-wrap: balance;
  }
}


/* =========================================================================
   PARCHE DE MEMORIA PARA iOS — anadido al final a proposito
   =========================================================================

   Sintoma: en un iPhone 13, Safari cierra la pestana al navegar entre
   paginas. No es el hosting ni la conexion: es memoria. Safari mantiene viva
   la pagina anterior para el boton "atras", asi que por un momento hay dos
   documentos a la vez; si cada uno pide cientos de MB, la pestana muere.

   Todo lo de aqui va al FINAL del archivo a proposito: las reglas posteriores
   ganan en la cascada y los nombres de @keyframes son globales por documento,
   asi que redefinirlos aqui pisa a los de arriba. Nada del CSS original se
   toca. Para revertir, se borra este bloque entero y queda como estaba.

   El diseno no cambia en escritorio. En movil se apagan efectos que ahi no se
   perciben y que cuestan la pestana.
   ========================================================================= */

/* --- 1. will-change: reservaba capas de GPU que nunca se liberaban ------
   will-change no "optimiza": reserva memoria por adelantado y la mantiene
   toda la vida de la pagina. En las palabras de titular eran hasta 84 capas
   por pagina, a 3x de densidad. Y no hacen falta: el navegador promociona
   solo cualquier elemento que este animando transform u opacity. */
.sw > span,
.sw-media > span,
.reveal {
  will-change: auto;
}

@media (hover: hover) {
  /* Estas solo animan al pasar el raton. En tactil no hay hover, asi que la
     capa se reservaba para algo que nunca iba a ocurrir. */
  .partner-tile, .gal-item, .quote-card, .plan, .event-card { will-change: transform; }
}
@media (hover: none) {
  .partner-tile, .gal-item, .quote-card, .plan, .event-card,
  [data-esc] { will-change: auto; }
}

/* --- 2. El revelado del titular, sin repintar --------------------------
   clip-path obliga a repintar cada palabra en cada fotograma, y ese revelado
   se dispara justo cuando el titular entra en pantalla: mientras se scrollea.
   La mascara .sw ya recorta con overflow:hidden; solo hacia falta que la
   palabra bajase un poco mas para salir del padding que deja sitio a las
   colas de la p y la g. 110% -> 120% y el recorte sobra.
   Mismo movimiento, ahora solo con transform y opacity. */
@keyframes split-clip-reveal {
  0%  { transform: translateY(120%); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}
.sw > span {
  transform: translateY(120%);
  clip-path: none;
}

/* --- 3. El hundido de seccion, sin desenfoque --------------------------
   Este keyframe corre en cada seccion, ligado al scroll, o sea que se
   recalcula en cada fotograma. transform y opacity los compone la GPU; el
   filter: blur(2px) obligaba a rasterizar una seccion de 2.000 a 3.500 px de
   alto en un bufer aparte, sesenta veces por segundo. Se quita el blur y el
   efecto se mantiene. */
@keyframes zen-hundir {
  to { transform: scale(.93) translateY(-40px); opacity: .45; }
}

/* --- 4. Los orbes del fondo ------------------------------------------
   Ya son un radial-gradient que se desvanece a transparente al 68%: el halo
   lo da el degradado. El blur(90px) encima era redundante y obligaba a
   reservar un bufer mucho mayor que el propio elemento, ademas re-rasterizado
   sin parar porque los tres se animan en bucle. */
.aurora i { filter: none; }
@media (hover: none) {
  .aurora i { animation: none; will-change: auto; }
}

/* --- 5. backdrop-filter: lo mas caro que hay en iOS -------------------
   Para CADA elemento que lo lleva, Safari captura lo pintado detras, lo
   desenfoca y lo recompone: una lectura de vuelta de la GPU por elemento, y
   el doble de memoria porque guarda tambien la captura. Son 21 declaraciones
   repartidas por la hoja.
   Se apaga entero en tactil. Todos los elementos que lo llevaban tienen ya un
   background rgba() propio, asi que no queda nada transparente y sobre las
   secciones oscuras la diferencia apenas se ve. En escritorio se conserva. */
@media (hover: none) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Sin el desenfoque detras, .88 dejaria transparentarse el texto que pasa
     por debajo de la barra fija. Sube a .96 y se lee como barra solida. */
  header.nav { background: rgba(255,255,255,.96); }
}

/* --- 6. No dibujar lo que esta fuera de pantalla -----------------------
   Las paginas miden entre 17.000 y 27.000 px. content-visibility permite al
   navegador saltarse el layout Y el pintado de cada seccion mientras no se
   ve: de trece secciones solo se procesan la visible y sus vecinas.

   Se excluyen las dos primeras (el hero se ve de entrada y la segunda entra
   casi enseguida; saltarlas solo daria un parpadeo).

   contain-intrinsic-size lleva la palabra `auto`: la primera vez que una
   seccion se dibuja, el navegador guarda su alto real y lo reutiliza, asi la
   barra de desplazamiento no da saltos. 1800px es la mediana medida del alto
   real de estas secciones.

   Dentro de @supports: donde no exista, no aplica y la pagina queda igual. */
/* RETIRADO tras probarlo en un iPhone real.

   content-visibility: auto aplica contain: layout style paint a la seccion.
   Mientras esta fuera de pantalla su contenido NO se maqueta, asi que el
   IntersectionObserver que reparte la clase .in no llega a observar lo que hay
   dentro. Y como .reveal arranca en opacity:0 y solo se muestra con .in, al
   bajar aparecian secciones en blanco: el contenido estaba, pero invisible.

   No hace falta. El ahorro de memoria vino de las imagenes —195 MB a 70 MB al
   decodificar—, no de esto. */


/* =========================================================================
   PARCHE 2 — LA CAUSA REAL DEL CIERRE EN iPHONE
   =========================================================================

   Medido con el arbol completo, contando TODO lo que obliga a una capa de
   composicion (no solo will-change y filtros, que es lo que miraba antes):

     /es/halo/    416 MB      de los cuales 225 MB son elementos con
     /hubspot/    327 MB      animacion y 114 MB elementos con transform
     /            242 MB

   Eso es lo que mata la pestana. Dos mecanismos:

   1. .reveal arranca con transform: translateY(22px). Un transform obliga a
      una capa propia POR ELEMENTO. Con 30 a 40 tarjetas por pagina aun sin
      revelar, son mas de 100 MB reservados por un desplazamiento de 22 px que
      el usuario todavia no ha visto.

   2. Las animaciones de entrada con animation-timeline: view() llevan
      fill: both, asi que mantienen el elemento compuesto de forma permanente,
      lo haya visto o no. En una pagina de 26.000 px eso es casi todo el
      documento compuesto a la vez.

   Ambas cosas se apagan SOLO en tactil. En escritorio, donde hay memoria de
   sobra, no cambia nada.

   Lo que se conserva en movil: las nubes del hero, la aparicion de los
   elementos (ahora por opacidad, que es lo que de verdad se percibe en una
   pantalla de seis pulgadas), la orbita, el menu y todo el diseno. */

@media (hover: none) {

  /* 1. El revelado, solo con opacidad. El desplazamiento de 22 px es lo que
        reserva la capa; la aparicion se sigue viendo igual. */
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .stagger > *, .rev-fan, .rev-auto {
    transform: none !important;
  }

  /* 2. Fuera las entradas ligadas al scroll. La aparicion la sigue dando
        .reveal con su transicion de opacidad, que es de una sola vez y libera
        la capa al terminar. Se deja fuera zen-rescate-reveal, que es el
        salvavidas de 1 ms que garantiza que nada quede invisible. */
  @supports (animation-timeline: view()) {
    .grid > .card, .grid > article, .cards-grid > .card-item,
    .hero-tags .pill, .tag-row .pill,
    .section:not(.hero):not(.sec-domo),
    .section.bg-soft, .section.bg-mesh, .sec-domo,
    .pc-img img, .ev-photo img, .shot img {
      animation: none !important;
    }
  }

  /* 3. Las escenas de scroll que quedan tampoco necesitan capa permanente. */
  [data-esc], [data-parallax] {
    will-change: auto !important;
  }
}


/* =========================================================================
   PARCHE 3 — apagado total de animacion en tactil, salvo las nubes
   =========================================================================

   El parche 2 quito los transform y las entradas de tarjetas, pero la memoria
   apenas bajo: los grandes consumidores eran OTROS elementos. Medido en
   /es/halo/, los mayores eran un DIV.reveal de 31 MB, una SECTION de 30 MB y
   un tab-panel de 29 MB — todos con una animacion encima.

   El mecanismo es siempre el mismo: cualquier elemento que anime obtiene una
   capa de composicion DEL TAMANO DEL ELEMENTO. En contenedores de miles de
   pixeles de alto, cada uno cuesta decenas de MB, y da igual que la animacion
   dure 1 ms: con fill: both la capa se mantiene.

   Asi que en tactil se apagan todas y se restauran a mano solo las nubes del
   hero, que es lo unico que se pidio conservar y que ademas son elementos
   pequenos.

   Lo que dependia de una animacion para VERSE pasa a su estado final, para que
   no quede nada invisible. La aparicion de los bloques la sigue dando .reveal
   con su TRANSICION de opacidad, que no es una animacion: es de una sola vez y
   libera la capa al terminar.

   En escritorio no cambia absolutamente nada. */

@media (hover: none) {

  *, *::before, *::after { animation: none !important; }

  /* --- Las nubes, restauradas una por una ---------------------------- */
  .hero .hero3d            { animation: nube-flota 9s ease-in-out infinite !important; }
  /* Marquesina de logos de clientes: se restaura en tactil. Es solo transform,
     la compone la GPU (una capa de ~4.600x60 px, ~10 MB a 3x) y sin ella el
     movil solo llegaba a ver los 3 primeros logos: el resto quedaba recortado. */
  .marquee-track           { animation: slide var(--dur-marquee, 38s) linear infinite !important; }
  .hero .hero3d img        { animation: nube-mece 46s ease-in-out infinite !important; }
  .hero .hero3d-b          { animation: nube-flota-b 13s ease-in-out infinite !important; }
  .hero .hero3d-b img      { animation: nube-mece 38s ease-in-out infinite reverse !important; }
  /* Cuando el JS las marca "viva" las gobierna el, no el CSS. */
  .hero .hero3d.viva, .hero .hero3d.viva img,
  .hero .hero3d-b.viva, .hero .hero3d-b.viva img { animation: none !important; }

  /* --- Lo que necesitaba su animacion para ser visible --------------- */
  .sw > span, .sw-media > span {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .tab-panel.on, .tab-panel { opacity: 1 !important; }
  .line-reveal > span, .split-ready .sw > span { opacity: 1 !important; transform: none !important; }
}


/* --- Y el contenido, visible desde el principio en tactil ---------------

   Ya te paso dos veces que aparecieran secciones en blanco al bajar. La causa
   era siempre la misma: .reveal arranca en opacity:0 y depende de que el JS le
   ponga la clase .in. Hay dos redes para eso —un IntersectionObserver y un
   barrido en cada scroll— pero ambas son JS, y si el JS tropieza el contenido
   queda invisible. Es el modo de fallo numero 1 de este proyecto.

   En una pantalla de seis pulgadas el desvanecido de entrada apenas se
   percibe, asi que no compensa arriesgar el contenido por el. En movil todo
   nace visible y no depende de nada.

   En escritorio el revelado sigue intacto. */
@media (hover: none) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .stagger > *, .rev-fan, .rev-auto, [data-lines] .sw > span {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    visibility: visible !important;
  }
}

/* --- Barra de acciones movil (MOV-005): visible tras 600 px de scroll, oculta con menu o modal abiertos --- */
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940; display: none; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line, #E5E9F0); box-shadow: 0 -8px 24px rgba(11,20,38,.08);
  transform: translateY(110%); transition: transform .32s var(--ease-out, ease); }
.barra-accion.visible { transform: translateY(0); }
.barra-accion .btn { flex: 1; min-height: 48px; padding: 12px 16px; font-size: .9375rem; }
@media (max-width: 767px) { .barra-accion { display: flex; } body.con-barra-accion .arriba { bottom: 78px; } }
@media (max-width: 767px) { .barra-accion.visible ~ .arriba { bottom: 78px; } }
html:has(.mobile-menu.open) .barra-accion, html:has(.modal-backdrop.open) .barra-accion { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .barra-accion { transition: none; } }

/* Si el usuario pide menos movimiento, la marquesina no gira pero se puede desplazar con el dedo */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: none; -webkit-mask-image: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none !important; }
}

/* ============================================================
   AVISO DE COOKIES (.ck)
   Lo crea bannerCookies() en zen.js; aqui no hay marcado que mantener.
   z-index 970: por encima de .barra-accion (940) y del menu movil (950),
   por debajo del modal. Sombra sin borde, como el resto de superficies
   elevadas del sistema. La entrada es un desplazamiento, nunca un fundido
   desde opacity:0, para que el aviso siga siendo legible si algo fallase.
   ============================================================ */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 970;
  background: var(--surface); box-shadow: var(--sh-xl);
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  /* Con el panel de categorias abierto, en una pantalla de 667 px el aviso medía 712 y
     se salia por arriba: el titulo quedaba fuera y no habia forma de alcanzarlo.
     dvh y no vh: en iOS, 100vh es la altura con la barra del navegador retraida, o sea
     mas alto que el hueco real. El vh queda de respaldo para navegadores sin dvh. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Visible por defecto y entrada por @keyframes, que el navegador ejecuta solo.
     Nunca al reves: si el banner naciera oculto esperando a que JS le pusiera una
     clase, un rAF pausado -pestana en segundo plano- lo dejaria invisible para
     siempre. Es el modo de fallo nro 1 del proyecto; aqui no se repite. */
  animation: ck-entra .32s var(--ease-out) both;
}
@keyframes ck-entra { from { transform: translateY(110%); } to { transform: translateY(0); } }
/* Salida: JS anade .ck-fuera al decidir. */
.ck.ck-fuera { animation: none; transform: translateY(110%); transition: transform .32s var(--ease-out); }
.ck:focus { outline: none; }
.ck:focus-visible { outline: 2px solid var(--zen-green-600); outline-offset: -4px; }

.ck-in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.ck-txt { flex: 1 1 380px; min-width: 0; }

.ck-t {
  margin: 0 0 8px; font-size: 1.0625rem; font-weight: 500; line-height: 1.3;
  color: var(--ink); letter-spacing: -.01em;
}
.ck-d {
  margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--body);
  max-width: 68ch;
}
.ck-d a { color: var(--zen-green-700); text-decoration: underline; text-underline-offset: 2px; }
.ck-d a:hover { color: var(--zen-green); }

.ck-btns { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ck-btns .btn { min-height: 44px; }

/* Panel de categorias: solo aparece al pulsar "Configurar" */
.ck-panel {
  max-width: 1200px; margin: 24px auto 0; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px;
}
/* [hidden] solo vale display:none en la hoja del user-agent: la clase de arriba
   lo pisa, asi que hay que decirlo explicitamente o el panel nace abierto. */
.ck-panel[hidden] { display: none; }
.ck-fila {
  display: flex; align-items: flex-start; gap: 16px;
  font-size: .9375rem; line-height: 1.55; color: var(--body); cursor: pointer;
}
.ck-fila input {
  flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--zen-green-600); cursor: pointer;
}
.ck-fila strong { display: block; font-weight: 700; color: var(--ink); }
.ck-fija { cursor: default; opacity: .72; }
.ck-fija input { cursor: not-allowed; }
.ck-btns-panel { justify-content: flex-start; }

/* El aviso y la barra de acciones movil comparten el borde inferior: mientras
   haya decision pendiente, manda el aviso. Mismo patron que ya usan el menu y
   el modal unas lineas mas arriba. */
html:has(.ck) .barra-accion { transform: translateY(110%); }

@media (max-width: 767px) {
  .ck { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .ck-in { gap: 16px; }
  .ck-t { font-size: 1rem; }
  .ck-d { font-size: .875rem; }
  /* Rejilla, no flex-wrap: asi "Rechazar" y "Aceptar" miden exactamente lo mismo
     por construccion. Con wrap, "Aceptar" caia solo en su fila y salia al doble de
     ancho -rechazar debe costar lo mismo que aceptar, no mas. */
  .ck-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .ck-btns .btn { width: 100%; justify-content: center; }
  .ck-btns [data-ck="cfg"] { grid-column: 1 / -1; order: -1; }
  .ck-btns-panel { grid-template-columns: 1fr; }
  .ck-panel { margin-top: 16px; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck { animation: none; }
  .ck.ck-fuera { transition: none; }
}

/* =====================================================================
   CLOBI sobre la plantilla de Zen.
   La estructura, el espaciado y el movimiento son los de itzen.io; el COLOR es
   el de Clobi. Los valores de Zen quemados en su hoja (rgba(34,163,74) verde,
   rgba(56,189,248) celeste, superficies calidas) se sustituyen en el build
   con clobi-zen/paleta.py; aqui se fijan los tokens y lo propio de Clobi.

   Paleta Clobi (de su home original): navy #1A2F5A · navy-dark #0F1E3D ·
   azul #2563B0 · azul claro #4A90D9 · verde #2E8B5A · verde acento #52D68A
   ===================================================================== */
:root {
  /* el color de accion de Clobi es el AZUL (en Zen era el verde) */
  --zen-green: #2563B0; --zen-green-600: #1E4F93; --zen-green-700: #17407A;
  --zen-green-300: #52D68A;                     /* verde acento: solo sobre navy */
  --zen-green-100: #DCEAF8; --zen-green-50: #F1F6FC;
  --zen-navy: #1A2F5A; --zen-navy-600: #2563B0;
  --zen-sky: #4A90D9; --zen-sky-600: #2563B0;
  /* fondos oscuros: navy de Clobi, no el azul-negro de Zen */
  --dark: #0F1E3D; --dark-2: #14264B; --dark-3: #1A2F5A;
  /* tinta y superficies: frias y azuladas (las de Zen eran neutras calidas) */
  --ink: #1A2F5A; --ink-2: #24365F; --body: #4A607A; --muted: #5A7090;
  --surface-2: #F4F7FB; --surface-3: #E8EEF6; --line: #E3EAF3; --line-strong: #C8D6E8;
  --on-dark: #EEF3FA; --on-dark-muted: #B3C6E0; --on-dark-soft: #8DA5C4;
  --tint-navy: #EEF2FB; --tint-navy-line: #DAE3F4;
  --tint-sky: #EEF5FD; --tint-sky-2: #DDEBFA; --tint-sky-line: #CFE1F6;
  --tint-green: #E7F6EE;
  --sh-brand: 0 10px 30px rgba(37,99,176,.28);
  --ring: 0 0 0 3px rgba(37,99,176,.28); --ring-0: 0 0 0 0 rgba(37,99,176,0);
  /* verdes propios de Clobi, para donde Clobi si usa verde */
  --cl-verde: #2E8B5A; --cl-verde-cta: #27794E; --cl-verde-acento: #52D68A;
}

/* bandas oscuras: el hero de Clobi eran orbes azules sobre navy */
.hero-dark {
  background: radial-gradient(1200px 620px at 8% -12%, rgba(0,112,243,.30), transparent 60%),
              radial-gradient(1000px 560px at 96% 6%, rgba(37,99,176,.26), transparent 58%),
              radial-gradient(760px 420px at 60% 108%, rgba(82,214,138,.10), transparent 62%),
              linear-gradient(160deg, #0B1730 0%, #0F1E3D 45%, #1A2F5A 100%);
}
.bg-dark {
  background: radial-gradient(1100px 560px at 10% -10%, rgba(0,112,243,.22), transparent 60%),
              radial-gradient(900px 520px at 95% 10%, rgba(37,99,176,.18), transparent 58%),
              linear-gradient(165deg, #0F1E3D 0%, #14264B 60%, #1A2F5A 100%);
}
.cta-band {
  background: radial-gradient(900px 420px at 12% 0%, rgba(0,112,243,.34), transparent 60%),
              radial-gradient(700px 380px at 92% 100%, rgba(82,214,138,.14), transparent 58%),
              linear-gradient(160deg, #0B1730 0%, #0F1E3D 55%, #1A2F5A 100%);
}
footer.site-footer { background: linear-gradient(170deg, #0B1730 0%, #0F1E3D 60%, #14264B 100%); }

/* acento del titulo: azul sobre claro, verde Clobi sobre navy (como en su home).
   Solo background-image: el atajo background reiniciaria background-clip y el texto
   se volveria invisible. */
.text-grad { background-image: linear-gradient(100deg, #2563B0 0%, #4A90D9 50%, #2563B0 100%); }
.hero-dark .text-grad, .bg-dark .text-grad, .cta-band .text-grad,
.hero-dark .title-phase-1 em, .cta-band h2 em {
  background-image: linear-gradient(135deg, #52D68A 0%, #7BE9AA 50%, #52D68A 100%);
}
/* el boton de demo del hero es verde en la web de Clobi; el resto de acciones, azul */
.hero .hero-cta .btn-primary { background: linear-gradient(135deg, #2E8B5A 0%, #27794E 100%); box-shadow: 0 10px 30px rgba(46,139,90,.30); }
.hero .hero-cta .btn-primary:hover { background: linear-gradient(135deg, #27794E 0%, #1F6B43 100%); }
.pill-green, .chip-green { background: #E7F6EE; color: #1F6B43; border-color: #BFE6CE; }
.aw-live { color: #1F6B43; background: #E7F6EE; }

.f-logo-clobi { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.brand img { height: 44px; width: auto; }
.hero .hero3d { opacity: .55; mix-blend-mode: normal; }
.hero .hero3d-b { opacity: .38; }

/* hero sin columna visual (Modulos, Precios): texto centrado */
.hero-solo .hero-grid { grid-template-columns: 1fr; }
.hero-solo .hero-phase-1-group { max-width: 760px; margin-inline: auto; text-align: center; }
.hero-solo .hero-cta, .hero-solo .hero-tags { justify-content: center; }
.hero-solo .eyebrow { margin-inline: auto; }

/* bloques originales conservados dentro del hero (maquetas de producto, filas de pasos):
   eran columnas de pagina completa; aqui son un bloque bajo el titulo, sin sus rellenos ni alturas */
.hero .c-orig { position: relative; max-width: 980px; margin-inline: auto; }
.hero .c-orig > [class] { padding: 0 !important; min-height: 0 !important; height: auto !important; background: transparent !important; border: 0 !important; }
.hero .c-orig > [class]::before, .hero .c-orig > [class]::after { display: none !important; }
.hero .c-orig img { max-width: 100%; height: auto; }
.hero-tags .pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #EEF3FA; }

/* ventana de app con la captura real */
.app-window .aw-body img.ui-shot { display: block; width: 100%; height: auto; }
.aw-url { min-height: 18px; flex: 1; background: var(--surface-3); border-radius: 6px; }

/* bloques conservados dentro de las secciones */
.c-inner { position: relative; }
.section .c-inner > .reveal + .reveal { margin-top: clamp(24px, 3vw, 40px); }
.section .sec-head + .c-inner { margin-top: 0; }
.plan .plan-tier { margin-bottom: 8px; }
.card .c-ico { margin-bottom: 14px; }
.card > h3, .card > h4 { margin-bottom: 8px; }
.card .check-list { margin-top: 14px; }
.check-list li { list-style: none; }
.cta-band .cta-extra { margin-top: 28px; }
.cta-band .cta-note { margin-top: 18px; font-size: .8125rem; color: var(--on-dark-soft); }

/* tablas y bloques anchos: nunca desbordan la pantalla */
.c-inner table { max-width: 100%; }
.c-inner { overflow-x: clip; }
@media (max-width: 767px) {
  .hero .c-orig { margin-top: 8px; }
  .c-inner { overflow-x: auto; }
}

/* ---- ajustes tras la auditoria de contraste ---- */
.footer-bottom, .footer-bottom span, .footer-bottom p { color: #A9B7CC; }
.hero .lead strong, .hero .lead b, .hero .lead em { color: #FFFFFF; }
.hero .eyebrow * { color: inherit; }
.hero-tags .pill, .hero-tags .pill * { color: #EEF3FA; }
.plan .plan-tier, .plan .plan-tier * { color: #FFFFFF; }
/* .marquee-inner salio de aqui: pintar el interior de la cinta de Contabilidad
   de claro, dentro de una franja azul, la partia en "azul y blanco" -en el
   original de clobi.io es una sola banda azul con el texto claro-. La
   devuelve a su color el bloque BW de pase-diseno.css. */
.feat-tabs { background: var(--surface-2) !important; }
.tier-card.tier-gold .tier-card-header { background: linear-gradient(135deg, #FFF8E7 0%, #FBEBC4 100%) !important; }
.tier-card.tier-gold .tier-card-header h3, .tier-card.tier-gold .tier-card-header p { color: var(--ink) !important; }
.rf-new { color: #A85A12 !important; }
/* plan destacado: tarjeta navy (como la traia la home), texto claro, boton blanco */
.plan.hot { background: radial-gradient(600px 300px at 10% 0%, rgba(37,99,176,.45), transparent 60%), linear-gradient(160deg, #0F1E3D 0%, #16305A 100%) !important; border-color: transparent !important; color: #EEF3FA !important; }
.plan.hot :not(.btn):not(.btn *):not(.plan-tier):not(.plan-tier *) { color: #EEF3FA !important; }
.plan.hot p, .plan.hot li, .plan.hot span:not(.plan-tier *) { color: rgba(238,243,250,.86) !important; }
.plan.hot .btn, .plan.hot .btn-primary, .plan.hot .btn-ghost { background: #FFFFFF !important; color: var(--zen-navy) !important; border-color: transparent !important; }
.plan.hot .btn *, .plan.hot .btn-primary * { color: var(--zen-navy) !important; }
.plan.hot [class*="box"], .plan.hot [class*="addon"] { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.16) !important; }
.plan .plan-tier { background: var(--tint-navy) !important; color: var(--zen-navy) !important; border-color: var(--tint-navy-line) !important; }
.plan.hot .plan-tier, .plan.hot .plan-tier * { background: var(--zen-green-600) !important; color: #FFFFFF !important; }
.plan.hot .plan-tier * { background: transparent !important; }

.hero .eyebrow + .eyebrow { margin-left: 14px; }
.hero-phase-1-group > .eyebrow { margin-bottom: 14px; }

/* las secciones conservadas nunca ensanchan la pagina (galerias en marquesina, tablas) */
.section > .container { overflow-x: clip; }
.section > .container > [class*="track"], .section > .container > [class*="scroller"] { overflow-x: hidden; }

/* ---- contraste: piezas puntuales detectadas en la auditoria ---- */
.cta-band .eyebrow, .cta-band .section-label { color: var(--zen-green-300); }
.cta-band .eyebrow::after, .cta-band .eyebrow::before { background: currentColor; opacity: .5; }
.cmp-table .icon-no, .comp-table .icon-no, span.icon-no { color: #8DA5C4; }
.steps-row .step-dot, .hero .step-dot { background: #52D68A; color: #0F1E3D; }
.hero .step-label, .steps-row .step-label { color: #B3C6E0; }
.mora-90, .aps-mora.mora-90 { color: #B42318; }
.acc-mora.mora-31 { color: #E5484D; }

/* ---- segunda pasada de contraste (la hoja de cada pagina se carga despues, hace falta !important) ---- */
.cta-band .eyebrow, .cta-band .section-label, .cta-band [class*="tag"] { color: #52D68A !important; }
.hero .step-dot, .steps-row .step-dot, .hero [class*="step-num"] { background: #52D68A !important; color: #0F1E3D !important; }
.hero .step-label:not(:where(.cl-pa *)), .steps-row .step-label:not(:where(.cl-pa *)) { color: #C3D4E8 !important; }
.cmp-table .icon-no, .comp-table .icon-no, span.icon-no, td .icon-no { color: #5A7090 !important; }
.comp-table th, .cmp-table th, table thead th { color: #4A607A !important; }
.sm-badge, [class*="badge"].smb-dash { color: #1A4C8C !important; }

/* etiquetas dentro de las maquetas de producto del hero (esas si siguen sobre navy) */
.hero .c-orig :is([class*="-lbl"], [class*="-label"], [class*="-sub"], [class*="-period"], small):not(:where(.cl-pa *)) { color: #C3D4E8; }

/* ---- tercera pasada: los ultimos detalles de la auditoria ---- */
/* numeros de marca de agua (01, 02, 03): decorativos, pero que se lean como diseno */
:is(.feat-number, .bc-num, .fi-num, .fc-num, .si-num) { color: rgba(37,99,176,.18); }
/* estas SI son cifras de contenido, no marca de agua */
:is(.stat-num, .ws-num, .cs-num, .cf-bal-num, .fac-step-num, .kpi-num, .num) { color: #1A2F5A; }
.hero :is(.stat-num, .ws-num, .cf-bal-num) { color: #FFFFFF; }
.tl-num, .onb-num { color: #6D5BC9; }
.bc-tag, [class*="-tag"]:not(.hero-tag) { color: #1E4F93; }
/* texto dentro de las maquetas del hero (siguen sobre navy) */
.hero .c-orig :is(strong, span, p, small, li):not(:where(.cl-pa *)) { color: #C3D4E8; }
/* El :not() excluye el calco de las pantallas: es una captura del producto
   sobre fondo BLANCO metida dentro del hero oscuro, y este color -pensado
   para texto claro sobre navy- dejaba los nombres de cliente a 1,11:1. */
.hero .c-orig :is(h1, h2, h3, h4, b):not(.cl-pa *):not(.cl-ui *) { color: #EEF3FA; }
.hero .c-orig :is(.fc-v, [class*="-val"], [class*="-total"], [class*="-monto"]):not(:where(.cl-pa *)) { color: #FFFFFF; }
.acc-mora.mora-31, .mora-31 { color: #FF9B9B; }
/* parrafos apagados sobre navy en Partners */
.tier-preview-card p, .tier-preview-header p, .hero .stat-caption:not(:where(.cl-pa *)), .hero [class*="-desc"]:not(:where(.cl-pa *)) { color: #C3D4E8; }

/* ultimos ajustes de legibilidad */
.hero .cp-tag:not(:where(.cl-pa *)), .hero [class*="-tag"]:not(:where(.cl-pa *)), .hero .cp span:not(:where(.cl-pa *)) { color: #D6E6F7; }
.tier-preview-card p, .tier-preview-header p { color: #D3E0EF; }
.tier-num-badge { color: #33456A; }
.tier-gold .tier-num-badge, .tier-card.tier-gold .tier-num-badge { color: #8A4A08; }
/* la hoja de cada pagina se carga despues de esta: los tres ultimos necesitan prioridad */
.tl-num, .timeline .tl-num { color: #1A4C8C !important; }
.hero .c-orig :is(p, span, small, li):not(:where(.cl-pa *)) { color: #C3D4E8 !important; }
.tier-card .tier-num-badge, .tier-silver .tier-num-badge { color: #33456A !important; }

/* tablas: se desplazan dentro de su caja, nunca ensanchan la pagina ni se cortan */
.c-tabla { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) { .c-tabla { margin-inline: calc(var(--gutter) * -0.5); padding-inline: calc(var(--gutter) * 0.5); } }

/* =========================================================
   Iconos propios (sustituyen a los emojis) y banderas
   ========================================================= */
.ico { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.17em; color: inherit;
       stroke: currentColor; fill: none; stroke-width: 1.7; }
.bandera { width: 1.5em; height: 1em; flex: none; display: inline-block; vertical-align: -.12em; border-radius: 2px;
           box-shadow: 0 0 0 1px rgba(26,47,90,.12); }
/* en las cajas de icono de las tarjetas, el icono manda */
.c-ico .ico, .module-icon .ico, [class*="-icon"] > .ico, [class*="-ico"] > .ico { width: 24px; height: 24px; }
.c-ico, .module-icon, .fc-icon, .rc-icon, .iso-icon, .ob-icon, .ai-card-icon {
  display: grid; place-items: center; color: var(--zen-sky-600);
  background: linear-gradient(140deg, var(--tint-sky), var(--tint-sky-2));
  border: 1px solid var(--tint-sky-line); border-radius: var(--r-md);
}
.card:hover .c-ico, .module-card:hover .module-icon, .ai-card:hover .ai-card-icon { color: #fff; background: linear-gradient(140deg, #2563B0, #1E4F93); border-color: transparent; }
.hero .ico, .bg-dark .ico, .cta-band .ico, footer .ico { color: var(--zen-green-300); }
/* Tamano del icono dentro de un chip o pildora. OJO: el margin-right de .1em
   (1,1 px a cuerpo 11 px) tiene especificidad (0,2,0) y gana a cualquier
   regla de elemento escrita despues; el bloque AO de pase-diseno.css le pasa
   por encima con :is(...) > svg.ico, que es (0,3,1). No subir este .1em: los
   chips sanos no dependen de el, su aire sale de su propio gap (module-chip
   gap 8px = 0,727 em de tinta a tinta). */
.pill .ico, [class*="chip"] .ico, [class*="badge"] .ico, [class*="tag"] .ico { width: 1em; height: 1em; margin-right: .1em; }
/* ...pero ese margen solo tiene sentido si hay algo a la derecha de lo que
   separarse. Cuando el icono va SOLO dentro de su azulejo -el trofeo de los
   sellos ISO, el candado, el rayo- el azulejo centra con place-items:center
   contando el margen, asi que empuja el dibujo media medida a la izquierda:
   margin-right computado 3,456 px, desvio medido -1,73 px en X y 0,00 en Y.
   Es exactamente el "esta un poquito mas a la izquierda" que reporto Nicolas.

   PRIMER INTENTO, y por que no vale: `:only-child`. Parecia la condicion
   exacta -"que no haya hermano del que separarse"- pero :only-child cuenta
   ELEMENTOS y no nodos de texto. En `.pricing-badge` el icono es el unico
   elemento y aun asi lleva texto al lado, asi que la regla le quitaba los
   3,456 px y lo pegaba a la palabra: justo el defecto contrario, y justo el
   que Nicolas pidio no volver a cometer. Medido: dx -62,69 px, o sea alineado
   a la izquierda de una caja ancha, que es lo correcto ahi.

   Asi que se nombran los contenedores que de verdad llevan el icono SOLO y
   centrado. Es una lista, con el coste de mantenerla, pero no puede pegar un
   icono a un texto por accidente.

   Especificidad (0,2,0) igual que la regla de arriba, y va despues: gana por
   orden, sin escalar a !important. */
:is(.iso-icon, .c-ico, .module-icon, .fc-icon, .rc-icon, .ob-icon) > .ico { margin-right: 0; }
/* El sitio no declaraba fondo en ninguna parte: ni html, ni body, ni .section.
   Las 17 paginas se apoyaban en que el lienzo del navegador fuera blanco, que es
   el valor por defecto... salvo cuando el sistema esta en modo oscuro, donde el
   lienzo es casi negro. Medido en la pagina de privacidad, que usa `.section`
   pelada: texto #4B5563 sobre el lienzo oscuro del navegador, ilegible. En las
   otras 14 no se veia porque sus secciones traen .bg-mesh o .bg-dark y pintan su
   propio fondo encima; la primera pagina que use una seccion sin clase de fondo
   se cae. Se declara el fondo una vez, en el sitio donde no puede faltar.
   El hero oscuro sigue pintando el suyo por encima: esto es solo el suelo. */
html { background: #FFFFFF; }
body { background: transparent; }

/* logo */
.brand .c-logo { height: 42px; }
@media (max-width: 560px) { .brand .c-logo { height: 34px; } }
.footer-brand .c-logo { height: 44px; margin-bottom: 14px; }

/* --- Sin JavaScript no se esconde nada ------------------------------------
   Las animaciones de entrada esconden el bloque y lo revelan por JS. Si ese JS
   no llega a correr, el contenido no aparece nunca: es el fallo que deja una
   pagina en blanco. La cabecera marca <html class="cl-js"> antes de cargar esta
   hoja, asi que el estado oculto solo existe cuando el JS esta vivo.          */
html:not(.cl-js) :is(.reveal, .reveal-left, .reveal-right, .reveal-scale, .rev-fan, .rev-auto,
  .stagger > *, [data-lines] .sw > span, .c-prep, .card-item, .module-card, .float-card, .ui-shot) {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  clip-path: none !important;
  visibility: visible !important;
  animation: none !important;
}

/* --- AO. Los titulos de tarjeta suben de h4 a h3 y no se les nota ---------
   22 titulos de tarjeta venian como <h4> colgando de un <h2> -o del propio
   <h1>- sin ningun <h3> por medio: un indice con agujeros. build_zen.py les
   cambia la etiqueta a h3 y les pone la clase cl-t4. Pero las reglas que les
   daban su tamano apuntan al selector de ETIQUETA h4, asi que al renombrar
   dejaban de aplicar: medido, pasaban de 14-16 px a 18,7-23 px y el margen
   inferior de 2-10 px a 18,7 px. Aqui se les devuelve exactamente el valor
   que tenian, medido con estilo computado sobre la pagina construida.
   La clase en el compuesto (0,2,1) basta para ganar a `.card h3` (0,1,1) y a
   `h3` (0,0,1): no hace falta !important porque no compite con ningun
   style= en linea.                                                          */
.country-card h3.cl-t4 {
  font-size: 15px;
  line-height: 19.5px;
  margin-bottom: 3px;
  letter-spacing: -0.375px;
}
.iso-badge h3.cl-t4 {
  font-size: 16px;
  line-height: 17.92px;
  margin-bottom: 4px;
  letter-spacing: -0.4px;
}
.comp-feats .feat-body h3.cl-t4 {
  font-size: 16px;
  margin-bottom: 7px;
  letter-spacing: -0.2px;
}
.pillar-row h3.cl-t4 {
  font-size: 15px;
  margin-bottom: 4px;
}
.flow-step h3.cl-t4 {
  font-size: 14px;
  margin-bottom: 8px;
}
.faq-item h3.cl-t4 {
  font-size: 15px;
  margin-bottom: 10px;
}
.addon-inline-text h3.cl-t4 {
  font-size: 0.88rem;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------- hero de Nomina
   El hero de Nomina mete TRES pantallas recalcadas en una sola fila de 980 px:
   la destacada queda a 371 px y las otras dos a 285 px, o sea al 41% y al 32%
   del tamano al que se dibujo la captura (900x562). A esa escala el texto de la
   interfaz no se lee y el conjunto parece un borron. En la misma pagina, el
   carrusel "Nomina en pantalla" las muestra a 518 px (58%): ese es el estandar
   del propio sitio. Se pasa a dos filas -destacada arriba a todo el ancho, las
   otras dos debajo a la mitad- y quedan a 980 px (109%) y 481 px (53%).
   El :has() acota la regla al unico hero que lleva .hs-card, el de Nomina, sin
   necesidad de una clase por pagina.                                          */
.hero .c-orig:has(.hs-card) > [class] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.hero .c-orig:has(.hs-card) .hs-card.featured { grid-column: 1 / -1; }
.hero .c-orig:has(.hs-card) .cl-pa-marco { width: 100%; }

/* =========================================================
   PASE DE DISENO: presencia comercial y detalle fino
   ========================================================= */

/* --- 1. Hero con mas fuerza --------------------------------------------- */
.hero .title-phase-1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.05rem); letter-spacing: -.05em; line-height: 1.02; }
.hero .lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); max-width: 60ch; }
.hero-centro .hero-phase-1-group > .lead { margin-inline: auto; }
.hero .hero-cta { margin-top: 30px; gap: 14px; }
.hero .hero-cta .btn { padding: 15px 30px; font-size: 1.0625rem; }
.hero-dark .btn-primary { box-shadow: 0 12px 34px rgba(46,139,90,.34); }
.hero-dark .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(46,139,90,.42); }
/* la captura del producto, mas grande y con mas luz detras */
.hero-visual-col > .app-window { box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10), 0 0 120px rgba(37,99,176,.28); }
/* tarjetas flotantes: el bloque original traia su propia posicion absoluta y se perdia */
.float-card > .hero-float, .float-card > [class*="float"] { position: static !important; inset: auto !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.float-card { padding: 13px 17px !important; border-radius: 14px; background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 44px rgba(6,16,36,.34); }
.float-card :is(p, span, div) { color: var(--body) !important; font-size: .75rem; margin: 0 0 3px; line-height: 1.3; }
.float-card strong { color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .float-card { animation: c-flotar 7s ease-in-out infinite; }
  .float-card:nth-of-type(odd) { animation-duration: 8.5s; animation-direction: reverse; }
}
@keyframes c-flotar { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-9px,0); } }
@media (max-width: 900px) {
  .float-card { position: static !important; display: inline-flex; gap: 10px; align-items: baseline; margin: 8px 8px 0 0; animation: none; }
}

/* --- 2. Planes: tarjetas con presencia comercial ------------------------- */
.plans { gap: clamp(20px, 2.2vw, 28px); align-items: stretch; }
.plans .plan, .onb-card, .plan-card, .pricing-card, .tier-card {
  border-radius: 22px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,47,90,.05), 0 14px 34px rgba(26,47,90,.07);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s ease;
  overflow: visible; display: flex; flex-direction: column;
}
.plans .plan > .card-body, .onb-card > .card-body, .plan-card > .card-body { padding: clamp(26px, 2.6vw, 38px); display: flex; flex-direction: column; flex: 1; }
.plans .plan:hover, .onb-card:hover, .plan-card:hover, .tier-card:hover { transform: translateY(-7px); box-shadow: 0 30px 66px rgba(26,47,90,.16); border-color: var(--tint-navy-line); }
.plan.hot, .onb-card.pro, .pricing-card.featured { border-color: transparent; box-shadow: 0 2px 4px rgba(15,30,61,.2), 0 30px 70px rgba(15,30,61,.26); }
@media (min-width: 900px) {
  .plan.hot, .onb-card.pro { transform: scale(1.035); z-index: 2; }
  .plan.hot:hover, .onb-card.pro:hover { transform: scale(1.035) translateY(-7px); }
}
/* el plan destacado va en navy, como la tarjeta de precio de la home */
.onb-card.pro, .plan.hot:not(.pricing-card) { background: radial-gradient(620px 320px at 12% 0%, rgba(37,99,176,.42), transparent 62%), linear-gradient(162deg, #0F1E3D 0%, #16305A 100%) !important; }
.onb-card.pro :is(h2, h3, h4, strong, .card-title) { color: #FFFFFF !important; }
.onb-card.pro :is(p, li, span, .card-desc) { color: #C9D9EE !important; }
.onb-card.pro .icon-chip, .onb-card.pro [class*="chip"] { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.18) !important; color: #EEF3FA !important; }
.onb-card.pro .ico { color: var(--zen-green-300) !important; }
.onb-card.pro .btn, .onb-card.pro .btn-primary { background: #FFFFFF !important; color: var(--zen-navy) !important; }
.onb-card.pro .btn *, .onb-card.pro .btn-primary * { color: var(--zen-navy) !important; }
.onb-card.pro .check-list li::before { background: var(--zen-green-300) !important; color: #0F1E3D !important; border-color: transparent !important; }
/* la cinta "mas elegido" no se corta */
.plans, .pricing-grid, .onboarding-grid, .tiers-grid { padding-top: 16px; }
.plan [class*="badge"]:first-child, .card-band + .card-body > [class*="badge"], .popular, [class*="ribbon"] { z-index: 3; }
/* el CTA de cada plan manda: ancho completo y grande */
.plans .plan .btn, .onb-card .btn, .plan-card .btn, .pricing-card .btn:not(.btn-sm) {
  margin-top: auto; width: 100%; justify-content: center; padding: 15px 24px; font-size: 1rem; border-radius: 14px;
}
/* una sola marca por linea: si la lista ya traia su punto, se quita */
.check-list li > span:empty, .check-list li > .dot, .check-list li > i:empty { display: none !important; }
.check-list li { align-items: flex-start; gap: 10px; }

/* --- 3. Pasos del hero: dejaron de pisarse ------------------------------- */
.steps-row { gap: clamp(26px, 5vw, 72px) !important; row-gap: 20px !important; flex-wrap: wrap; }
.step-item { gap: 12px !important; }
.step-label { white-space: nowrap; letter-spacing: .06em !important; }

/* --- 4. Capturas de producto: mas grandes y ordenadas -------------------- */
[class*="gallery-item"], .gal-item, [class*="shot-card"], .screen-card {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(26,47,90,.10); background: var(--surface);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
[class*="gallery-item"]:hover, .gal-item:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(26,47,90,.18); }
[class*="gallery-item"] img, .gal-item img, .screen-card img { width: 100%; height: auto; display: block; }
[class*="gallery-caption"] { padding: 12px 16px; font-size: .8125rem; color: var(--body); border-top: 1px solid var(--line); background: var(--surface-2); }

/* --- 5. Tarjetas de modulo: icono con mas peso --------------------------- */
.module-card, .feature-card, .feat-card, .report-card { border-radius: 18px; }
.c-ico, .module-icon, .fc-icon, .rc-icon { width: 52px; height: 52px; margin-bottom: 18px; }
.module-card:hover, .feature-card:hover, .feat-card:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(26,47,90,.14); }

/* --- 6. Tabla comparativa con mas jerarquia ------------------------------ */
.c-tabla table { border-collapse: collapse; width: 100%; }
.c-tabla thead th { background: var(--surface-2); color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; padding: 16px 18px; border-bottom: 2px solid var(--line-strong); }
.c-tabla td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.c-tabla tbody tr:hover { background: var(--tint-sky); }

/* --- 7. Remates finos de las tarjetas de plan ---------------------------- */
/* el punto propio de la lista sobra cuando ya hay check */
.check-list li > [class*="dot"], .check-list li > span:empty, .check-list li > i:empty { display: none !important; }
/* etiquetas dentro del plan destacado en navy: antes quedaban invisibles */
.onb-card.pro :is([class*="badge"], .tier-badge) { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.28) !important; color: #FFFFFF !important; }
.onb-card.pro .popular-badge, .pricing-card.featured [class*="badge"]:first-child { background: var(--zen-green-300) !important; border-color: transparent !important; color: #0F1E3D !important; font-weight: 800; }
/* ninguna cinta o etiqueta se corta contra el borde de su tarjeta */
.plans, .onboarding-grid, .pricing-grid, .tiers-grid { overflow: visible; }
.pricing-card, .plan-card, .onb-card { overflow: visible !important; }
.pricing-card > *:first-child, .plan-card > *:first-child { border-radius: 22px 22px 0 0; }
/* las etiquetas no se estiran dentro de la tarjeta (la columna flex las estiraba) */
.plans .plan > .card-body > :is([class*="badge"], [class*="tier"], .pill, .eyebrow),
.onb-card > .card-body > :is([class*="badge"], [class*="tier"], .pill),
.plan-card > :is([class*="badge"], [class*="tier"], .pill),
.pricing-card > :is([class*="badge"], [class*="tier"], .pill) { align-self: flex-start; width: auto; display: inline-flex; }

/* --- 8. Piezas que no deben depender de ninguna animacion para verse ------ */
.float-card, .hero-visual-col, .hero-visual-col > .app-window { opacity: 1 !important; }
/* la captura manda en la seccion de pantallas (antes iba al 50% y se veia pequena) */
.screen-panel.active { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important; gap: clamp(28px, 3vw, 52px) !important; align-items: center; }
.screen-image img, .screen-panel img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 60px rgba(26,47,90,.18); border: 1px solid var(--line); }
/* galerias de capturas: piezas mas grandes y con aire */
[class*="gallery-item"], .gal-item { min-width: clamp(260px, 30vw, 400px); }
[class*="gallery-track"] { gap: clamp(16px, 1.6vw, 24px); }
/* palabras destacadas dentro del parrafo del hero: menta, no azul (sobre navy no se leia) */
.hero-dark p :is(span, em, strong, b):not(.btn *):not([class*="badge"]):not([class*="chip"]):not(.cl-ui *):not(.cl-pa *):not(.cl-mazo-chip *) { color: #7BE9AA !important; }

/* =========================================================
   PROFUNDIDAD: la pagina se veia plana (bandas claras, tarjetas sin relieve)
   ========================================================= */
/* --- tarjetas con cuerpo, no solo un borde --- */
/* acotada a .section: dentro del hero viven las maquetas de producto (.aging-card,
   .payroll-card...) que tienen su propio fondo oscuro. Al anadir exclusiones, este
   selector subio de especificidad y les pisaba el fondo, dejando texto claro sobre
   claro. Cada :not() suma la especificidad de lo que lleva dentro.                */
.section :is(.card, .module-card, .feature-card, .feat-card, .report-card, .ob-card, .bento-card,
[class*="-card"]:not(.float-card):not(.card-band):not([class*="-icon"]):not([class*="-ico"])) {
  background: linear-gradient(170deg, #FFFFFF 0%, #FBFCFE 60%, #F7FAFD 100%);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(26,47,90,.04), 0 10px 26px rgba(26,47,90,.07);
}
.card:hover, .module-card:hover, .feature-card:hover, .feat-card:hover, .report-card:hover {
  box-shadow: 0 2px 4px rgba(26,47,90,.06), 0 28px 60px rgba(26,47,90,.16);
  border-color: var(--tint-sky-line);
}
/* un filo de color arriba, como las tarjetas de Zen */
.card, .module-card, .feature-card, .feat-card, .report-card { position: relative; overflow: hidden; }
.card::before, .module-card::before, .feature-card::before, .feat-card::before, .report-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #2563B0, #4A90D9 55%, #52D68A);
  opacity: 0; transition: opacity .3s ease;
}
.card:hover::before, .module-card:hover::before, .feature-card:hover::before, .feat-card:hover::before, .report-card:hover::before { opacity: 1; }

/* --- iconos: azulejos con color, no todos iguales --- */
.c-ico, .module-icon, .fc-icon, .rc-icon, .iso-icon, .ob-icon, .ai-card-icon { border-radius: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(26,47,90,.10); }
.grid > *:nth-child(4n+1) :is(.c-ico, .module-icon, .fc-icon, .rc-icon),
.plans > *:nth-child(4n+1) :is(.c-ico, .module-icon) { background: linear-gradient(140deg, #EEF5FD, #DDEBFA); border-color: #CFE1F6; color: #1E4F93; }
.grid > *:nth-child(4n+2) :is(.c-ico, .module-icon, .fc-icon, .rc-icon) { background: linear-gradient(140deg, #E9F7EF, #D6F0E2); border-color: #BFE6CE; color: #1F6B43; }
.grid > *:nth-child(4n+3) :is(.c-ico, .module-icon, .fc-icon, .rc-icon) { background: linear-gradient(140deg, #EEF2FB, #E0E7F8); border-color: #D3DDF3; color: #2A3D77; }
.grid > *:nth-child(4n+4) :is(.c-ico, .module-icon, .fc-icon, .rc-icon) { background: linear-gradient(140deg, #FEF6E7, #FBECD0); border-color: #F5DFB2; color: #8A5A12; }
.card:hover :is(.c-ico, .module-icon, .fc-icon, .rc-icon) { transform: scale(1.06) rotate(-3deg); transition: transform .35s var(--ease-out); }

/* --- la banda navy del medio: que respire y tenga textura --- */
.section.bg-dark { position: relative; }

/* --- la onda curva entre bandas --- */
.shape-band { top: -1px; }
.shape-band svg { display: block; width: 100%; height: 100%; }
.section.has-shape > .container { position: relative; z-index: 1; }

/* --- el resplandor de fondo, un poco mas presente --- */
.aurora i { opacity: .55; }
/* En el telefono la aurora son tres capas fijas con filter: blur(90px) y
   will-change: transform, animadas en bucle -26 s, 32 s y 38 s- por detras
   de TODA la pagina, y encima la cabecera pegajosa lleva backdrop-filter:
   saturate(1.8) blur(16px). Esa pareja es la que hace saltar el scroll en
   Safari de iOS: cada fotograma vuelve a rasterizar el desenfoque. A 390 px
   cada mancha mide 46vw = 179 px y el desenfoque la extiende a ~449 px de
   lado. Se detiene el movimiento y se rebaja el radio: la aurora sigue ahi,
   quieta. Es lo mismo que ya ocurre con prefers-reduced-motion.             */
@media (max-width: 720px) {
  .aurora i { animation: none; will-change: auto; filter: blur(56px); }
}

/* --- la onda no puede comerse el titulo: la seccion abre mas abajo --------- */
.shape-band { height: clamp(120px, 14vw, 230px) !important; }
.section.has-shape { padding-top: clamp(130px, 15vw, 250px); }
.section.has-shape > .container { position: relative; z-index: 2; }

/* --- banda navy: solo se aclara lo que se apoya DIRECTAMENTE en ella --------
   (todo lo que va dentro de una tarjeta o maqueta tiene su propio fondo claro y
   conserva su tinta; por eso aqui no se usa ninguna regla amplia)              */
.section.bg-dark > .container > :is(h1, h2, h3, h4, h5),
.section.bg-dark > .container > .c-inner > :is(h1, h2, h3, h4, h5),
.section.bg-dark .sec-head :is(h1, h2, h3, h4, h5),
.section.bg-dark > .container > [class*="header"] :is(h1, h2, h3, h4):not(:where(.cl-pa *)) { color: #FFFFFF; }

.section.bg-dark > .container > :is(p, ul, ol, dl),
.section.bg-dark > .container > .c-inner > :is(p, ul, ol, dl),
.section.bg-dark .sec-head :is(p, .lead, .section-sub, .section-desc),
.section.bg-dark > .container > [class*="header"] :is(p, .section-desc):not(:where(.cl-pa *)) { color: #B3C6E0; }

.section.bg-dark .sec-head :is(.eyebrow, .section-label),
.section.bg-dark > .container > :is(.eyebrow, .section-label),
.section.bg-dark > .container > [class*="header"] :is(.eyebrow, .section-label, [class*="label"]):not(:where(.cl-pa *)) { color: #86C3F7; }
.section.bg-dark :is(.eyebrow, .section-label) :is(span, em) { color: inherit; }
.section.bg-dark .sec-head :is(.text-grad, em, span.accent) { background-image: linear-gradient(135deg, #86C3F7, #4A90D9 55%, #2563B0); }

/* pestanas y bloques de texto que el original deja sueltos sobre el fondo */
.section.bg-dark [class*="screen-info"] :is(h2, h3, h4):not(:where(.cl-pa *)) { color: #FFFFFF; }
.section.bg-dark [class*="screen-info"] :is(p, li):not(:where(.cl-pa *)) { color: #B3C6E0; }
.section.bg-dark > .container :is(.tab-btn, button[class*="tab"]) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #D6E6F7; }
.section.bg-dark > .container :is(.tab-btn.active, button[class*="tab"].active) { background: #FFFFFF; border-color: #FFFFFF; color: var(--zen-navy); }
.section.bg-dark > .container :is(.tab-btn.active, button[class*="tab"].active) * { color: var(--zen-navy); }

/* las tarjetas siguen blancas sobre el navy: es justo el contraste que buscamos */
.section.bg-dark .card, .section.bg-dark [class*="-card"]:not([class*="-icon"]):not([class*="-ico"]) {
  background: linear-gradient(170deg, #FFFFFF, #F7FAFD);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 26px 60px rgba(0,0,0,.34);
}
.section.bg-dark .card:hover { box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 36px 76px rgba(0,0,0,.42); border-color: rgba(255,255,255,.5); }
/* capturas sobre la banda */
.section.bg-dark > .container > img, .section.bg-dark [class*="screen-image"] img { border-radius: 14px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
/* ultimos textos sueltos sobre la banda navy */
.section.bg-dark :is(p, [class*="-desc"], [class*="-sub"], [class*="-right"], [class*="-left"]):not(:is(.card, [class*="card"], [class*="mock"], [class*="window"], [class*="gallery"], .c-claro) *):not(:where(.cl-pa *)) { color: #B3C6E0; }
.section.bg-dark :is(h1, h2, h3, h4) :is(span, em, b, strong):not(:is(.card, [class*="card"]) *):not(.cl-pa *) { color: var(--zen-green-300); }
.section.bg-dark [class*="arrow"]:not(:is(.card, [class*="card"]) *):not(:where(.cl-pa *)) { color: var(--zen-green-300); }
.section.bg-dark .rf-new, .rf-new { color: #FFFFFF !important; background: #A85A12 !important; }
/* etiqueta vertical del hero de Quienes somos */
.hero-r-label { color: rgba(214,230,247,.55) !important; }
/* --- remates finales de legibilidad ------------------------------------- */
/* las tarjetas flotantes tienen fondo blanco: el verde claro del hero no entra ahi */
/* los <span> que envuelven cada palabra del titular NO son acentos sueltos:
   son el andamiaje del revelado, y esta regla pintaba el titular entero de verde */
.hero-dark :is(p, div, li):not(.c-orig *):not(.float-card *):not(.cl-mazo-chip *):not(.cl-ui):not(.cl-ui *):not(.cl-pa *) :is(span, em, b, strong):not(.btn *):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]):not(.float-card *):not(.cl-mazo-chip *):not(.sw):not(.sw *):not(h1 *):not(h2 *):not(.cl-ui *):not(.cl-pa *):not(h3 *) { color: #7BE9AA !important; }
.section :is(.wv-title, .wv-count, .hs-card-label, [class*="hs-card"] [class*="label"]):not(.hero *) { color: var(--ink) !important; }
.section.bg-dark p.lead:not(:where(.cl-pa *)), .section.bg-dark .lead:not(:where(.cl-pa *)) { color: #B3C6E0 !important; }
/* la tarjeta "ancha" del catalogo de modulos ocupa la fila entera, como pedia su diseno */
.grid > :is(.module-card, .card).wide, [class*="grid"] > :is(.module-card, .card).wide { grid-column: 1 / -1; }
.module-card.wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.module-card.wide .mc-screen { height: 100%; min-height: 260px; }
.module-card.wide > :last-child { padding: clamp(24px, 2.4vw, 36px); }
@media (max-width: 900px) {
  .grid > :is(.module-card, .card).wide { grid-column: auto; }
  .module-card.wide { grid-template-columns: 1fr; }
  .module-card.wide .mc-screen { min-height: 200px; }
}
.module-card.wide, .card.wide { grid-column: 1 / -1 !important; }
@media (max-width: 900px) { .module-card.wide, .card.wide { grid-column: auto !important; } }
/* la rejilla de tarjetas de Zen es flex, no grid: la tarjeta ancha necesita las dos formas */
.module-card.wide, .card.wide { grid-column: 1 / -1 !important; flex: 0 0 100% !important; max-width: 100% !important; }
@media (max-width: 900px) { .module-card.wide, .card.wide { grid-column: auto !important; } }

/* --- 9. La tarjeta ancha ocupa la fila entera ---------------------------------
   El contenedor de tarjetas de Zen es flex, no grid: hay que darle la base flex. */
.module-card.wide, .card.wide { grid-column: 1 / -1 !important; flex: 0 0 100% !important; max-width: 100% !important; }
@media (max-width: 900px) { .module-card.wide, .card.wide { grid-column: auto !important; } }

/* --- 10. Cifras con presencia (antes eran texto normal) ------------------- */
.stat-band, [class*="stats-bar"], [class*="stats-row"], [class*="stat-strip"] { border-radius: var(--r-lg); }
:is(.stat, [class*="stat-item"], [class*="stat-block"]) :is(strong, .n, [class*="-num"], [class*="-big"]) {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1;
}
.bg-dark :is(.stat, [class*="stat-item"]) :is(strong, .n) ,
.hero :is(.stat, [class*="stat-item"]) :is(strong, .n) {
  background: linear-gradient(135deg, #7BE9AA, #52D68A 55%, #4A90D9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* --- 11. Titulos de seccion con mas peso -------------------------------- */
.sec-head h2, .section-title, .section > .container > h2 { font-size: clamp(1.95rem, 1.4rem + 2.1vw, 2.9rem); letter-spacing: -.045em; }
.sec-head { max-width: 780px; }
.sec-head .lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.18rem); }
/* remates: cifras de las tarjetas flotantes y acentos sueltos */
.float-card strong, .float-card :is(strong, b) { color: var(--ink) !important; }
.hero-dark :is(span, em, b):not(.btn *):not([class*="badge"]):not([class*="chip"]):not([class*="pill"]):not(.c-orig *):not(.float-card *):not(.cl-mazo-chip *):not(.cl-ui *):not(.cl-pa *) { color: #7BE9AA; }
.hs-card-label, [class*="hs-card"] [class*="label"] { color: var(--ink) !important; }

/* --- 12. Red de seguridad del titular ------------------------------------
   Las palabras del <h1> nacen invisibles y solo se animan cuando el JS anade
   .in al [data-lines]. En movil ya estan a salvo (@media hover:none) y con
   reduced-motion tambien. Esto cubre escritorio: si a los 2,5 s el JS no ha
   llegado, aparecen igual. Los dos selectores son excluyentes (:not(.in)),
   asi que cuando el revelado normal funciona esta regla ni se aplica.       */
@keyframes cl-titular-a-salvo { to { opacity: 1; transform: none; clip-path: inset(-100% 0 -20%); } }
[data-lines]:not(.in) .sw > span { animation: cl-titular-a-salvo .35s ease-out 2.5s both; }

/* --- 13. La onda de transicion, al derecho ------------------------------
   zen.js dibuja el relleno de la onda en la MITAD DE ABAJO de la banda. Pasarle
   el navy como relleno dejaba una franja navy suelta entre dos zonas claras.
   Se invierte: el navy es el FONDO de la banda (baja desde la seccion oscura de
   arriba) y el relleno es el color de la propia seccion, que es lo que la curva
   deja ver. El degradado del mesh se apaga solo en estas secciones para que no
   se note la costura entre la onda y el resto.                              */
.section.has-shape { background: var(--surface); }
.section.has-shape.bg-soft { background: var(--surface-2); }
/* el navy plano dejaba una costura contra el degradado del hero: la banda repite
   la rampa de color del borde inferior del hero y se apaga hacia el navy liso */
.section.has-shape > .shape-band.top {
  background:
    linear-gradient(180deg, rgba(15,30,61,0), var(--dark) 74%),
    linear-gradient(100deg, #112142, #1A2E59);
}
.section.has-shape > .shape-band.top path { fill: var(--surface) !important; }
.section.has-shape.bg-soft > .shape-band.top path { fill: var(--surface-2) !important; }

/* --- 14. Iconos con volumen ----------------------------------------------
   El glifo era fino y pequeno dentro de un azulejo plano: se veia timido. Ahora
   el trazo se controla desde CSS (el sprite ya no lo fija), el glifo ocupa mas
   azulejo y el azulejo tiene relieve real: brillo arriba, anillo del color del
   icono y sombra en su propio tono, no gris.                                */
.c-ico .ico, .module-icon .ico, .fc-icon .ico, .rc-icon .ico, .iso-icon .ico, .ob-icon .ico, .ai-card-icon .ico {
  width: 26px; height: 26px; stroke-width: 1.85;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
.c-ico, .module-icon, .fc-icon, .rc-icon, .iso-icon, .ob-icon, .ai-card-icon {
  position: relative; isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 8px 18px -6px rgba(26,47,90,.28);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), background .4s var(--ease);
}
/* halo del mismo tono, solo al pasar el cursor */
.c-ico::after, .module-icon::after, .fc-icon::after, .rc-icon::after {
  content: ''; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 68%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover .c-ico::after, .card:hover .module-icon::after,
.module-card:hover .module-icon::after { opacity: .16; }

.card:hover :is(.c-ico, .module-icon, .fc-icon, .rc-icon) {
  transform: translateY(-3px) scale(1.07) rotate(-3deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -8px rgba(37,99,176,.5);
}
.card:hover :is(.c-ico, .module-icon) .ico { filter: none; }

/* --- 15. Azulejo del icono: relieve de verdad ----------------------------
   Antes: pastel plano, glifo pequeno y timido. Ahora el azulejo tiene brillo
   arriba, anillo del mismo tono y sombra en su color, no gris; el glifo pesa
   mas y se separa del fondo.                                                */
.c-ico, .module-icon, .fc-icon, .rc-icon, .iso-icon, .ob-icon, .ai-card-icon {
  width: 56px; height: 56px; border-radius: 17px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -6px 12px -8px rgba(26,47,90,.35),
    0 10px 22px -9px rgba(26,47,90,.42);
}
.c-ico .ico, .module-icon .ico, .fc-icon .ico, .rc-icon .ico, .iso-icon .ico, .ob-icon .ico, .ai-card-icon .ico {
  width: 27px; height: 27px; stroke-width: 1.9;
}

/* --- 15 bis. El azulejo tiene que centrar de verdad ----------------------
   Tesoreria y Cuentas por Pagar arrastran de la web original un <style> de
   la epoca en que la ficha llevaba un emoji: .fc-emoji{display:block} y
   .fc-icon{display:block}. Ese bloque va dentro de la pagina, despues de
   clobi.css, asi que con un solo punto de clase le gana al display:grid del
   azulejo y de paso anula su place-items: el glifo se va a la esquina de
   arriba a la izquierda. Medido: 12 azulejos de 56 px con el icono a
   -13,50 px en X y a -11,61 px (Tesoreria) / -13,50 px (Cuentas por Pagar)
   en Y, un 24% del lado. Con dos puntos de clase se recupera el centrado;
   no se escala a !important porque no compite contra un style= en linea.  */
.c-ico.c-ico, .module-icon.module-icon, .fc-icon.fc-icon, .rc-icon.rc-icon,
.iso-icon.iso-icon, .ob-icon.ob-icon, .ai-card-icon.ai-card-icon {
  display: grid; place-items: center;
}
/* brillo diagonal: el azulejo deja de ser un color plano */
.c-ico::before, .module-icon::before, .fc-icon::before, .rc-icon::before, .ai-card-icon::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,0) 52%);
}

/* --- 16. Los vistos de las listas ---------------------------------------
   Eran un anillo palido azulado (el token verde de Zen cae en azul al traducir
   la paleta). Ahora es una marca verde de Clobi, nitida y con anillo.        */
.check-list li::before {
  width: 21px; height: 21px;
  font-size: .78rem; font-weight: 800;
  color: #1F6B43; background: linear-gradient(145deg, #EAF8F0, #D8F0E4);
  box-shadow: inset 0 0 0 1px rgba(46,139,90,.28), 0 1px 2px rgba(26,47,90,.10);
}
.bg-dark .check-list li::before, .onb-card.pro .check-list li::before {
  color: #0F1E3D; background: linear-gradient(145deg, #7BE9AA, #52D68A) !important;
  box-shadow: inset 0 0 0 1px rgba(123,233,170,.5);
}
.card:hover .check-list li::before { box-shadow: inset 0 0 0 1px rgba(46,139,90,.45), 0 2px 5px rgba(46,139,90,.22); }

/* --- 17. Ultimos remates de contraste ------------------------------------ */
/* el acento del titular de la banda CTA iba en azul de marca sobre navy: no se leia */
/* el acento de la banda CTA iba en verde, pero el verde esta reservado a los
   estados de exito: una llamada a la accion no es un exito, es una invitacion.
   Sobre navy, el azul claro destaca igual y la reserva sigue significando algo. */
.cta-band h2 :is(span.t, span.accent, em, .text-grad) {
  background: linear-gradient(135deg, #86C3F7, #4A90D9 60%, #2563B0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* los numeros gigantes de fondo (01, 02...) son decoracion: se dibujan como
   contorno, que ademas se ve mas fino que un relleno palido */
/* SOLO las cuatro marcas de agua de verdad: numeros enormes en la esquina de una
   tarjeta, pura decoracion. El selector amplio anterior tambien vaciaba el precio,
   las estadisticas y los numeros de paso, que son CONTENIDO. */
.bc-num, .fc-num, .feat-number, .si-num {
  color: transparent; -webkit-text-stroke: 1.8px #CBDCF0;
}

/* --- 18. Las capturas de cada modulo, como mini ventanas de producto ------
   Estaban a opacity .85 dentro de una caja baja: se veian lavadas y pequenas.
   Ahora van a color pleno, con barra de ventana (como el hero) y un pelo mas
   de alto, y se acercan al pasar el cursor.                                 */
.mc-screen, [class*="-screen"]:not([class*="hero"]):has(> img) {
  position: relative; height: 216px; padding-top: 24px; box-sizing: border-box;
  background: linear-gradient(180deg, #F7FAFD, #E8EEF6);
  border-bottom: 1px solid rgba(15,30,61,.08);
  overflow: hidden;
}
.mc-screen > img, [class*="-screen"]:not([class*="hero"]) > img {
  opacity: 1 !important; height: 100%; width: 100%; object-fit: cover; object-position: 50% 0;
  transition: transform .5s var(--ease-out);
}
/* barra de ventana: los tres puntos van en el MISMO pseudoelemento que la barra.
   El ::after de .mc-screen ya lo usa la pagina para el velo inferior; tocarlo lo rompia. */
.mc-screen::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 24px; z-index: 2;
  border-bottom: 1px solid rgba(15,30,61,.09);
  background:
    radial-gradient(circle 4px at 17px 12px, #FF5F57 97%, transparent 100%),
    radial-gradient(circle 4px at 30px 12px, #FEBC2E 97%, transparent 100%),
    radial-gradient(circle 4px at 43px 12px, #28C840 97%, transparent 100%),
    linear-gradient(180deg, #FFFFFF, #F1F5FA);
}
.module-card:hover .mc-screen > img, .card:hover .mc-screen > img { transform: scale(1.05); }
/* el numero del modulo, sobre la barra y con mas presencia */
.mc-screen [class*="num"], .module-card [class*="mc-num"] { z-index: 4; }

/* el icono de la tarjeta de modulo iba suelto junto a su etiqueta: mismo azulejo
   que en el resto del sitio, a menor tamano para que no compita con la captura */
.mc-icon {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(140deg, #EEF5FD, #DDEBFA);
  border: 1px solid #CFE1F6; color: #1E4F93;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 5px 12px -6px rgba(26,47,90,.4);
  transition: transform .4s var(--ease-out), background .4s var(--ease);
}
.mc-icon .ico { width: 21px; height: 21px; stroke-width: 1.85; }
.mc-icon-row { display: flex; align-items: center; gap: 12px; }
.module-card:hover .mc-icon { transform: translateY(-2px) scale(1.06) rotate(-3deg); background: linear-gradient(140deg, #2563B0, #1E4F93); color: #fff; border-color: transparent; }

/* en el hero de Nomina la fila de pantallas es oscura entera: sus etiquetas no
   pueden heredar la tinta navy que se fuerza para las tarjetas claras */
.hero-dark :is(.hs-card, [class*="hs-card"]) :is(.hs-card-label, [class*="label"]),
.hero :is(.hs-card, [class*="hs-card"]) :is(.hs-card-label, [class*="label"]):not(:where(.cl-pa *)) { color: #C7DCF2 !important; }

/* la etiqueta del plan (Basic/Pro/Advanced) se estiraba a todo el ancho al volver
   la tarjeta una columna flexible. En la home la clase es .ob-tier y en Onboarding
   .tier-badge: se cubren las dos familias. */
:is(.ob-card, .onb-card, .plan) :is(.ob-tier, .tier-badge, .plan-tier) {
  align-self: flex-start; display: inline-flex; align-items: center; width: auto; max-width: max-content;
}

/* --- 19. La banda de cifras: simetria y margen ---------------------------
   Venia con cuatro columnas fijas aunque la pagina tuviera tres cifras, asi que
   quedaba un cuarto vacio a la derecha; y al vivir fuera de una <section> se
   pegaba a los bordes de la pantalla, sin el margen del resto del contenido.
   Ahora hay tantas columnas como cifras y la banda respeta el contenedor.    */
.numbers, [class*="num-grid"], [class*="stats-grid"] {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}
/* el simbolo gigante de fondo se salia por abajo y se veia como un borron */
.num-cell { position: relative; overflow: hidden; }
.num-ghost {
  bottom: 6px !important; right: 10px !important;
  font-size: clamp(40px, 4vw, 58px) !important;
  line-height: 1 !important;
}

/* --- 20. Columnas de flujo: se acaba el hueco de la izquierda -------------
   En "Del pedido al pago" la columna izquierda mide 136 px y la derecha 608:
   quedaba medio metro de blanco a la izquierda. Ahora acompana al listado en
   vez de quedarse arriba sola.                                              */
@media (min-width: 981px) {
  .flow-left, [class*="flow-"] > [class*="-left"]:first-child {
    position: sticky;
    top: 104px;
    align-self: start;
  }
}
/* el numero del paso era casi invisible (15% de opacidad): es una referencia
   que se lee, no una marca de agua */
/* el numero del paso es una referencia que se lee, no una marca de agua:
   #6E90BE llega a 3:1 sobre blanco, que es lo que pide AA para texto grande */
.fi-num, .flow-item [class*="-num"] { color: #6E90BE !important; }
/* estos otros son pastillas pequenas sobre fondo claro: texto pequeno pide 4,5:1 */
.cs-num, .fac-step-num { color: var(--ink, #1A2F5A) !important; }

/* --- 21. Tinta legible dentro de las tarjetas claras ----------------------
   El CSS de las paginas originales venia de un tema oscuro y dejaba titulos y
   textos en blanco. Al pasar las tarjetas a fondo claro esos textos quedaban
   invisibles -blanco sobre blanco- en Inicio, Quienes somos, Inventario y
   Reportes. Se acota a .section para no tocar las maquetas del hero, que si
   conservan su fondo oscuro.                                                */
.section :is(.card, [class*="-card"], .wv-cell, .comp-map, .c-row, .country-card)
  :is(h2, h3, h4, h5, [class*="-name"], [class*="-title"], .map-header) {
  color: var(--ink) !important;
}
.section :is(.card, [class*="-card"], .wv-cell, .comp-map, .c-row, .country-card)
  :is(p, li, [class*="-desc"], [class*="-sub"], [class*="-meta"]) {
  color: var(--body, #4A607A) !important;
}
/* las que SI son oscuras a proposito recuperan su tinta clara */
.section :is(.onb-card.pro, .pro, .featured, [class*="-dark"]) :is(h2, h3, h4, h5, [class*="-title"], [class*="-name"]) { color: #FFFFFF !important; }
.section :is(.onb-card.pro, .pro, .featured, [class*="-dark"]) :is(p, li, [class*="-desc"], [class*="-sub"]) { color: #C7DCF2 !important; }

/* las pastillas de estado se quedaban a un pelo del minimo AA (4,2-4,4:1) */
.c-badge.live, [class*="badge"].live { color: #17694A !important; }
.c-badge.soon, [class*="badge"].soon { color: #1A4C8C !important; }

/* --- 22. Simbolos de fondo y pastillas flotantes --------------------------
   Medido en las 15 paginas: el simbolo gigante de cada celda de cifra se salia
   de su caja (se veia como un borron cortado) y ademas se cruzaba con la
   etiqueta. Y las pastillas flotantes de las maquetas caian justo encima del
   titulo del panel que decoran.                                              */
.stat-cell, [class*="stat-cell"] { position: relative; overflow: hidden; }
/* OJO con el selector por subcadena: [class*="-ghost"] tambien casa .btn-ghost,
   y el boton "Iniciar sesion" acababa a 37 px, medio transparente, en posicion
   absoluta y sin poder pulsarse. Solo los simbolos decorativos de fondo.      */
.stat-ghost, .num-ghost, [class*="-ghost"]:not(.btn):not([class*="btn"]) {
  position: absolute !important; right: 12px !important; bottom: 8px !important;
  top: auto !important; left: auto !important; z-index: 0 !important;
  font-size: clamp(26px, 2.6vw, 40px) !important; line-height: 1 !important;
  opacity: .5; pointer-events: none;
}
.stat-cell > :not([class*="-ghost"]) { position: relative; z-index: 1; }

/* la pastilla se apoya en la esquina de la tarjeta, no sobre su cabecera */
.float-chip, .float-badge, .device-badge {
  top: -40px !important; z-index: 3;
}

/* --- 23. Las tres cifras del hero de Quienes somos ------------------------
   El bloque iba en posicion absoluta sobre una caja de 160 px, pero sus tres
   filas suman 363: el hero, que recorta, se comia las dos ultimas. Vuelve al
   flujo normal y la columna crece con su contenido.                          */
.hero .stats-stack {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
}
.hero .stats-stack .stat-row { padding-block: 20px; }
.hero .stats-stack .stat-row:first-child { padding-top: 0; }

/* --- 24. Simetria: filas que no dejan huecos -----------------------------
   Una rejilla de tres columnas con ocho tarjetas dejaba un hueco del tamano de
   una tarjeta en la ultima fila. Al poder crecer, la fila incompleta reparte el
   ancho y la retícula cierra siempre.                                        */
.cards-grid { display: flex !important; flex-wrap: wrap; align-items: stretch; }
.cards-grid > *:not(.wide) { flex: 0 1 calc(33.3333% - 18.6667px); min-width: 280px; }
/* la fila incompleta se centra: las filas llenas ocupan el ancho exacto y no se
   mueven, y el hueco deja de leerse como una tarjeta que falta */
.cards-grid, [class*="-grid"].cards-grid { justify-content: center; }

/* --- 25. Los botones de los planes, todos a la misma altura --------------
   Con listas de distinto largo, el CTA de una tarjeta subia 60 px respecto a
   las otras. Ahora la tarjeta es una columna y el boton se ancla al pie.     */
:is(.onb-card, .ob-card, .plan, .plan-card, .tier-card) { display: flex; flex-direction: column; }
:is(.onb-card, .ob-card, .plan, .plan-card, .tier-card) > :is(a, button).btn:last-child,
:is(.onb-card, .ob-card, .plan, .plan-card) > [class*="cta"]:last-child { margin-top: auto; }

/* --- 26. Banda de confianza del hero -------------------------------------
   Cinco elementos rompian en 4 + 1 y dejaban un separador colgando al final de
   la primera fila. Se quitan los separadores y manda el aire.                */
.trust-sep { display: none !important; }
.trust-bar, [class*="trust"][class*="row"], [class*="trust"][class*="bar"] {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 3vw, 46px);
}

/* --- 27. La banda de cifras deja ver sus esquinas ------------------------
   Iba a sangre completa con radios redondeados: los radios quedaban cortados
   contra el borde de la pantalla y se veian muescas.                         */
.stats-bar { max-width: 1360px; margin-inline: auto; }

/* --- 28. Fuera la tarjeta dentro de la tarjeta ---------------------------
   Un contenedor con borde y radio envolvia otras dos casi del mismo blanco:
   dos marcos concentricos sin jerarquia, acabado de plantilla.               */
.right-col { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.right-col > * + * { margin-top: 24px; }

/* --- 29. Los semanticos: un tono para cada fondo -------------------------
   El rojo y el verde funcionan como relleno de barra, pero como texto pequeno
   se quedan cortos. Y ojo: estas cifras viven en dos sitios muy distintos -las
   maquetas oscuras del hero y las tarjetas claras del cuerpo-, asi que cada
   fondo pide su tono. Medido: sobre navy hacen falta claros; sobre blanco,
   oscuros.                                                                    */
.section :is([class*="-amount"], [class*="-val"], [class*="-amt"], [class*="-num"]):is(.red, .neg, .mora, .vencido) { color: #A32E2E !important; }
.section :is([class*="-amount"], [class*="-val"], [class*="-amt"]):is(.green, .ok, .pos, .al-dia) { color: #1F6B43 !important; }
.section :is(.perk-check, .cf-live) { color: #17694A !important; }

.hero :is([class*="-amount"], [class*="-val"], [class*="-amt"], [class*="-num"]):is(.red, .neg, .mora, .vencido):not(:where(.cl-pa *)) { color: #FF9B9B !important; }
.hero :is([class*="-amount"], [class*="-val"], [class*="-amt"]):is(.green, .ok, .pos, .al-dia):not(:where(.cl-pa *)) { color: #7BE9AA !important; }
.hero :is(.perk-check, .cf-live, [class*="-live"]):not(:where(.cl-pa *)) { color: #7BE9AA !important; }

/* --- 30. La raya de 1 px que cruzaba la pagina ---------------------------
   No era un borde: era el filo antialiasado de la onda. El relleno de la curva
   termina justo en el borde inferior de la banda y esa ultima fila quedaba a
   medio camino entre el navy y el blanco (#878F9E exacto). Con 2 px de mas, el
   filo cae fuera de la banda y desaparece.                                   */
.shape-band svg { height: calc(100% + 2px) !important; }

/* --- 31. La banda de cifras respira -------------------------------------
   Se apoyaba justo sobre la seccion navy siguiente: se veia una costura entre
   dos azules y las esquinas redondeadas de abajo quedaban comidas.           */
.stats-bar { margin-bottom: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   DIRECCION "EL HILO DEL DOCUMENTO"
   El relato de Clobi es el recorrido de un documento hasta que el SII lo acepta.
   Cuatro movimientos: escala, hilo, profundidad y ritmo. Nada de esto toca el
   contenido: es presentacion.
   ========================================================================== */

/* --- A. Escala: que el titular mande ------------------------------------
   Estaba en 65 px de maximo, corto para un hero que tiene que dominar. La
   diferencia entre "limpio" y "premium" esta casi siempre en el contraste de
   escala, no en anadir elementos.                                           */
.hero .title-phase-1,
.hero h1 {
  /* Medido en la web de Zen a 1440 px: su titular es de 56 px, no de 78 ni de 99.
     Lo que la hace ver profesional no es el tamano, es la contencion. Se copia su
     escala exacta: 56 px, peso 500, interlineado 1.045, tracking -0.048em.       */
  font-size: clamp(2.35rem, 1.5rem + 2.6vw, 3.5rem) !important;
  font-weight: 500;
  letter-spacing: -.048em;
  line-height: 1.045;
  /* un interlineado tan cerrado luce en un titular grande, pero necesita aire
     abajo: sin el, la ultima linea rozaba el parrafo en seis paginas */
  margin-bottom: clamp(22px, 2.4vw, 38px);
  padding-bottom: .06em;
}
.hero .lead, .hero-centro .lead {
  font-size: clamp(1.06rem, .98rem + .45vw, 1.35rem);
  max-width: 62ch;
}
.sec-head h2, .section-title, .section > .container > h2 {
  font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.5rem) !important;
  font-weight: 500;
  letter-spacing: -.042em;
  line-height: 1.02;
}
.sec-head .eyebrow, .eyebrow {
  letter-spacing: .16em;
  font-size: .74rem;
}

/* --- B. (retirado) --------------------------------------------------------
   Aqui vivia 'el hilo': un nodo de 8 px y un tramo de linea de 2 px colgados de
   cada .sec-head con left:50%. Medido en las 15 paginas: lo llevaban las 45
   cabeceras, y en las 8 que van alineadas a la izquierda el punto quedaba entre
   406 y 499 px a la derecha del antetitulo, suelto al lado del texto. Retirado
   por completo, con su color sobre navy y su animacion. Los dos pseudo-elementos
   eran position:absolute, asi que no ocupaban sitio: al quitarlos el alto de las
   15 paginas y la posicion de todas sus secciones no se mueven ni 1 px.        */

/* --- C. Profundidad: vidrio de verdad sobre el navy ----------------------
   Las sombras grises planas son lo que hace que un bloque oscuro parezca un
   rectangulo pintado. Un panel sobre navy necesita anillo de luz, brillo
   interior y un halo detras.                                                */
.hero-dark .app-window,
.bg-dark .app-window,
.hero-dark [class*="-card"]:not(.float-card),
.hero .c-orig > [class*="panel"] {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 30px 60px -20px rgba(0,0,0,.55),
    0 0 140px -30px rgba(37,99,176,.55);
}
.hero-visual-col { position: relative; }
.hero-visual-col::before {
  content: '';
  position: absolute; inset: -12% -8% -18% -8%;
  /* el halo se dibuja solo con el degradado: un blur(30px) sobre un area grande
     es una capa cara en movil y aqui no aporta nada que el degradado no de ya */
  background: radial-gradient(58% 52% at 50% 45%, rgba(37,99,176,.34), rgba(37,99,176,.12) 45%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* --- D. Ritmo: que no todas las secciones pesen igual --------------------
   El aire alterna en vez de repetirse, y la seccion que abre despues de un
   capitulo oscuro entra con mas presencia.                                  */
.section { padding-block: clamp(56px, 6.2vw, 92px); }
.section.bg-dark { padding-block: clamp(64px, 7vw, 100px); }
.sec-head { margin-bottom: clamp(34px, 3.6vw, 54px); }

/* --- E. Reserva cromatica ------------------------------------------------
   El verde solo para el exito: "Aceptado por el SII", "Conciliado", los vistos.
   Si aparece en todas partes deja de querer decir algo.                      */
.hero-dark .eyebrow, .bg-dark .eyebrow { color: var(--zen-sky, #4A90D9); }

/* --- F. El titular manda, y manda en blanco ------------------------------
   El revelado parte el titular en palabras envueltas en <span>, y una regla
   mia para acentos sueltos del hero las pintaba todas de verde: el titular
   entero salia en el verde de Zen. El titular va en blanco y solo la palabra
   destacada lleva degradado; y ese degradado es AZUL, porque el verde queda
   reservado a los estados de exito.                                         */
.hero-dark :is(h1, h2, h3) .sw,
.hero-dark :is(h1, h2, h3) .sw > span,
.hero-dark :is(h1, h2, h3) > span:not(.text-grad):not(em) { color: inherit !important; }

.hero-dark .title-phase-1 :is(em, .text-grad),
.hero-dark h1 :is(em, .text-grad) {
  background-image: linear-gradient(135deg, #4A90D9, #86C3F7 48%, #2563B0) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- G. La ventana como dispositivo de marca ----------------------------
   El hero muestra el producto dentro de una ventana; las tarjetas de modulo
   tambien. Que las galerias y las capturas grandes NO la tengan es lo que hacia
   que se leyeran como fotos sueltas pegadas. Mismo marco en todas: es lo que
   convierte un conjunto de piezas en un sistema.                            */
:is(.gallery-item, .screen-main, .screen-float, .pc-img, .shot):has(> img) {
  position: relative;
  padding-top: 26px;
  background: linear-gradient(180deg, #FFFFFF, #F4F7FB);
  border: 1px solid rgba(15,30,61,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,30,61,.05), 0 26px 52px -22px rgba(15,30,61,.42);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
:is(.gallery-item, .screen-main, .screen-float, .pc-img, .shot):has(> img)::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 26px; z-index: 2;
  border-bottom: 1px solid rgba(15,30,61,.09);
  background:
    radial-gradient(circle 4px at 18px 13px, #FF5F57 97%, transparent 100%),
    radial-gradient(circle 4px at 31px 13px, #FEBC2E 97%, transparent 100%),
    radial-gradient(circle 4px at 44px 13px, #28C840 97%, transparent 100%),
    linear-gradient(180deg, #FFFFFF, #F1F5FA);
}
:is(.gallery-item, .screen-main, .screen-float, .pc-img, .shot) > img {
  display: block; width: 100%; height: auto; border-radius: 0;
}
:is(.gallery-item, .pc-img, .shot):has(> img):hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(15,30,61,.06), 0 38px 70px -24px rgba(37,99,176,.5);
}
/* el pie de la galeria, como cartela editorial y no como etiqueta suelta */
.gallery-caption {
  border-top: 1px solid rgba(15,30,61,.07);
  padding: 14px 18px;
  font-size: .9rem;
  color: var(--body, #4A607A);
}

/* --- H. La reserva del verde, aplicada sin excepciones -------------------
   El verde de Clobi queda para una sola cosa: que algo salio bien -el visto de
   una lista, "SII Conectado", "Conciliado"- y para el boton principal, que es
   la accion que queremos que ocurra. En titulares y antetitulos manda el azul.
   Un color que aparece en todas partes deja de decir nada.                   */
.section.bg-dark :is(.sec-head, [class*="header"]) :is(.eyebrow, .section-label, [class*="-label"]):not(:where(.cl-pa *)) { color: #86C3F7 !important; }
.section.bg-dark :is(h2, h3) :is(em, .text-grad, span.t, span.accent) {
  background-image: linear-gradient(135deg, #86C3F7, #4A90D9 55%, #2563B0) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- I. Lo que hace profesional a Zen: contencion -------------------------
   Medido en su propia web: sus tarjetas NO llevan sombra, solo borde; su rejilla
   respira 28 px; y su movimiento vive entre 0,2 y 0,42 s. Clobi tenia sombra en
   todas las tarjetas y transiciones de 0,9 s, que se sienten lentas. La
   profundidad la ponen los capitulos oscuros y el panel del hero, no una sombra
   debajo de cada caja.                                                        */
.section .card,
.section [class*="-card"]:not(.float-card):not([class*="-icon"]) {
  box-shadow: none;
}
.section :is(.card, [class*="-card"]):not(.float-card):not([class*="-icon"]):hover {
  box-shadow: 0 10px 28px -14px rgba(26,47,90,.30);
}
.grid, [class*="-grid"], .cards-grid { gap: 28px; }

/* el movimiento, al tempo de Zen: nada por encima de 0,42 s */
.card, .module-card, [class*="-card"], .gallery-item, .shot, .pc-img,
.c-ico, .module-icon, .mc-icon, .btn, .pill, .plan, .onb-card {
  transition-duration: .28s !important;
}
:is(.card, [class*="-card"], .gallery-item):hover { transition-duration: .22s !important; }

/* --- J. Ganarle al CSS de la pagina --------------------------------------
   La hoja propia de cada pagina se carga DESPUES de esta, asi que gana los
   empates de especificidad. Los valores del sistema -los de Zen, medidos- se
   imponen aqui de forma explicita.                                          */
.section :is(.card, .module-card, [class*="-card"]):not(.float-card):not([class*="-icon"]):not([class*="-ico"]) {
  box-shadow: none !important;
}
.section :is(.card, .module-card, [class*="-card"]):not(.float-card):not([class*="-icon"]):not([class*="-ico"]):hover {
  box-shadow: 0 10px 28px -14px rgba(26,47,90,.30) !important;
}
/* la rejilla respira los 28 px de Zen */
:is(.grid, .cards-grid, [class*="-grid"]):not(.feat-grid) { gap: 28px !important; }

/* El revelado tardaba 0,9 s; el de Zen dura 0,42. Casi medio segundo de
   diferencia es lo que separa "fluido" de "pesado" al bajar por la pagina.   */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .rev-fan, .rev-auto,
.stagger > *, .card-item, .module-card {
  transition-duration: .42s !important;
}
[data-lines] .sw > span { animation-duration: .52s !important; }

/* la seccion que lleva onda necesita hueco para la curva, pero 214 px era el
   doble de lo que usa Zen en cualquier seccion */
.section.has-shape { padding-top: clamp(104px, 11vw, 158px) !important; }

/* --- K. Movil: la simetria se rompia en los botones ----------------------
   Medido contra Zen a 375 px: su boton de cabecera mide 115x44 en una linea y
   sus dos CTA del hero miden 48 de alto. Los de Clobi median 94x65 -el texto
   partia en dos lineas y el boton crecia a lo alto, comiendose la cabecera- y
   los del hero tenian anchos distintos (248 y 184), que es lo que se lee como
   desorden. Tipografia y aire ya coincidian; el problema era este.           */
@media (max-width: 720px) {
  /* OJO: .btn-desktop va oculto en movil. Forzar display aqui lo resucitaba y
     desbordaba la cabecera tapando el menu. Se excluye explicitamente.       */
  header .btn:not(.btn-desktop),
  .nav .btn:not(.btn-desktop),
  .nav-actions .btn:not(.btn-desktop) {
    white-space: nowrap;
    padding: 0 15px;
    height: 44px;
    min-height: 44px;              /* no baja del area tactil recomendada */
    font-size: .8125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* los dos CTA del hero, mismo ancho y mismo alto: una columna centrada */
  .hero-cta, .hero .hero-cta, .hero [class*="cta-row"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .hero-cta .btn, .hero .hero-cta .btn {
    width: 100%;
    max-width: 288px;
    height: 48px;
    min-height: 48px;
    padding-inline: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
}

/* --- L. Movil: una sola caja de tarjeta -----------------------------------
   Medido a 375 px, Zen usa UNA anchura de tarjeta (318) y practicamente UN
   padding (24). Clobi llegaba con cinco anchuras -335, 273, 177, 154, 147- y
   seis paddings -40, 36, 32, 20, 17, 13-. Es exactamente lo que se lee en el
   telefono como "no esta simetrico": cada bloque empieza y termina en un sitio
   distinto. Aqui se reduce a una sola caja.

   El alcance es .section a proposito: las dos .float-card que flotan sobre la
   ventana de producto viven en .hero y deben conservar su tamano libre, igual
   que en Zen.                                                                */
@media (max-width: 720px) {

  /* .plan es unas veces la tarjeta misma -.pricing-card.featured.plan- y otras
     un envoltorio que CONTIENE una .pricing-card. Acolchar las dos sumaba los
     dos rellenos y la de dentro se quedaba en 273 de 335. El envoltorio pone
     la anchura y nada mas; el relleno lo pone la tarjeta.
     Va ANTES de la lista a proposito: cuando un elemento es las dos cosas las
     dos reglas empatan en especificidad y gana la ultima, que debe ser la del
     relleno.                                                                 */
  .section .plan {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
  /* OJO: aqui NO se toca ni el fondo ni el borde. .pricing-card.featured.plan
     es una tarjeta oscura con texto casi blanco; al quitarle el fondo se
     quedaba el texto claro sobre el blanco de la seccion -contraste 1.08, es
     decir, ilegible-. El envoltorio solo cede anchura y relleno.            */

  .section .card,
  .section .card-item,
  .section .module-card,
  .section .pricing-card,
  .section .ob-card,
  .section .partner-tier,
  .section .feat-card,
  .section .step-card,
  /* la forma generica, pero sin morder el azulejo del icono ni las banderas:
     [class*="-card"] ya nos costo un icono estirado a todo lo ancho          */
  .section [class*="-card"]:not(.country-card):not([class*="card-icon"]):not([class*="-card-"]) {
    width: 100% !important;
    /* min-width, no solo width: muchas de estas tarjetas son items de un flex
       en fila, y ahi el tamano lo decide flex-basis -280px heredados del
       escritorio-, no width. min-width actua sobre el eje horizontal sea cual
       sea la direccion del flex, asi que sirve para los dos casos y no rompe
       las que cuelgan de una columna.                                       */
    min-width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 24px !important;
    border-radius: 20px !important;
  }

  /* las filas que las contienen dejan de centrar cajas estrechas             */
  .section .pricing-grid,
  .section .plans,
  .section [class*="-grid"]:not(.countries-grid) {
    width: 100%;
    align-items: stretch;
  }

  /* la rejilla de paises SI queda a dos columnas: son fichas cortas con
     bandera y se leen mejor emparejadas, como en el escritorio              */
  .section .country-card { padding: 18px !important; border-radius: 14px !important; }

  /* aire vertical de seccion: Zen mide 64 en el telefono, Clobi daba 56      */
  .section:not(.has-shape):not(.bg-dark) { padding-block: 64px !important; }
}

/* --- M. Movil: las tres piezas que seguian rotas -------------------------- */
@media (max-width: 720px) {

  /* La galeria de capturas es una cinta de seis piezas duplicadas que en el
     escritorio avanza sola. En el telefono la animacion esta apagada a
     proposito -es el interruptor tactil que protege el rendimiento en iOS- y
     el resultado medido era una cinta de 6268 px recortada por un contenedor
     de 375: se veia UNA captura a medias y las once restantes eran
     inalcanzables. Aqui la cinta pasa a ser un carrusel que se desliza con el
     dedo, con anclaje por pieza.                                             */
  .gallery-track {
    width: 100% !important;
    max-width: 100% !important;
    animation: none !important;          /* que nada empuje mientras se desliza */
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .gallery-track::-webkit-scrollbar { display: none; }
  /* 78vw dejaba la captura en 292 px de los 375 del telefono y la centraba,
     con lo que ni coincidia con el carril del texto -20 px- ni aprovechaba el
     ancho: 43 px perdidos en cada pieza. Como el contenido de estas capturas
     es la interfaz del ERP con textos de 6 px, cada punto porcentual de ancho
     cuenta.

     Ahora la cinta sale del .container -margen negativo- y lo devuelve como
     padding: la pieza mide justo el carril de texto (335 px a 375), empieza
     EXACTAMENTE donde empieza el parrafo de arriba, y la siguiente asoma por
     el borde derecho, que es lo que avisa de que hay mas. El anclaje pasa de
     center a start por el mismo motivo: centrar rompia la alineacion con el
     texto. Medido: 292 -> 335 px, +14,7 %. */
  .gallery-track:not(.cl-cinta-hero) {
    margin-inline: -20px;
    /* el ancho tiene que crecer lo mismo que se sale por los lados. Sin esto
       la regla `width: 100% !important` de arriba lo deja en el ancho del
       .container -335 px-, y al correrlo 20 px a la izquierda la cinta
       terminaba en 335 y dejaba 40 px muertos contra el borde derecho: la
       misma asimetria que se venia a arreglar, cambiada de lado. */
    width: calc(100% + 40px) !important;
    max-width: none !important;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .gallery-track > * {
    flex: 0 0 calc(100vw - 40px) !important;
    width: calc(100vw - 40px) !important;
    scroll-snap-align: start;
  }
  /* La cinta del hero cuelga de contenedores que se ajustan a su contenido
     -se lo daba la <img> que sustituyo el calco-, asi que su `width: 100%`
     se medía contra un padre sin ancho propio. Medido en el telefono:
     Contabilidad daba una cinta de 480 px que se salia 125 px por la derecha
     (dos de las tres piezas quedaban fuera de la pantalla y no habia forma de
     llegar a ellas), y Nomina una de 159 px con 197 px muertos al lado.

     Se le da el ancho en vw -medida firme, no depende del padre- y se deja
     donde esta, que es el carril de 20 px. No se saca a pantalla completa:
     `margin-inline: calc(50% - 50vw)` da el ancho correcto pero solo cae en su
     sitio si el padre esta centrado, y estos no lo estan; medido en Nomina,
     dejaba la cinta corrida 88 px fuera de la pantalla por la izquierda. */
  .hero .gallery-track.cl-cinta-hero {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-inline: 0 !important;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .gallery-track.cl-cinta-hero > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: start;
  }
  /* Las capturas de telefono son 900x1948: a 335 px de ancho medirian 725 de
     alto y se comerian una pantalla entera de 812. Se les da el ancho con el
     que el telefono dibujado cabe junto a su titulo. */
  .gallery-track.cl-cinta-hero > :has(.cl-pa-marco.es-movil) {
    flex: 0 0 210px !important;
    width: 210px !important;
  }
  .gallery-track img { width: 100% !important; height: auto !important; }
  /* Medido a 390 px: el build marca con data-dup TODO menos el primer hijo
     -ventas, 10 hijos, 9 con data-dup, 5 capturas distintas-, asi que esta
     regla no ocultaba la mitad repetida sino 4 capturas distintas ademas de
     las repetidas: en el telefono se veia 1 de 5. Se muestran todas y la
     cinta se desliza con el dedo; la repeticion del final es la misma
     costura que ya usa el bucle del escritorio.
     El overflow-x: auto de arriba lo pisa una regla posterior -medido:
     computa hidden-, por eso aqui se declara ganando.                        */
  .gallery-track > [data-dup] { display: block !important; }
  .gallery-track { overflow-x: auto !important; }

  /* Habia DOS contenedores con margen propio: .container pone 20 y .wrap pone
     otros 24, y .wrap vive dentro de .container. Los bloques que usan .wrap
     empezaban en x=45 y los demas en x=20: bajando por la pagina el contenido
     se desalineaba de un bloque al siguiente. El anidado deja de sumar.
     Una .wrap suelta -sin .container encima- conserva su margen.             */
  .container .wrap,
  .container .c-inner { padding-inline: 0 !important; }

  /* En iOS, un campo con menos de 16 px hace que Safari amplie la pagina al
     enfocarlo y la deje desplazada. En el sitio construido no hay ni un
     <input> propio -medido: 0 en las 15 paginas-: los pone HubSpot al cargar
     su formulario dentro de nuestro DOM. Esto es solo un suelo de tamano de
     letra; no toca ni los campos, ni sus nombres, ni el envio.             */
  .hs-form input, .hs-form select, .hs-form textarea,
  input.hs-input, select.hs-input, textarea.hs-input { font-size: 16px; }

  /* Los KPI venian en una rejilla de dos columnas de anchura DISTINTA -203 y
     208- que sumaba 427 sobre un contenedor de 335: la columna derecha salia
     cortada. Una sola columna, como el resto de tarjetas.                    */
  .kpi-overlay {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Medido a 390 px: estas etiquetas caen entre 9,9 y 11,5 px cuando el
     cuerpo por defecto del iPhone es 17. Solo se sube el tamano: ni el
     texto, ni el color, ni el fondo cambian. El prefijo body es para
     ganarle al <style> de cada pagina, que carga despues de esta hoja.     */
  body .bc-tag, body .fc-tag, body .fi-tag, body .si-tag,
  body .tier-pill, body .tier-badge, body .c-badge,
  body .aph-kpi-lbl, body .hero-r-label, body .flow-title-small,
  body .s-eyebrow-txt, body .step-label, body .plan-badge {
    font-size: 12px; line-height: 1.35;
  }

  /* La tabla se sangra con margenes negativos para que la sombra del scroll no
     se recorte, pero su max-width: 100% no contaba ese sangrado: quedaba a 10
     de la izquierda y 30 de la derecha. En el telefono no hace falta sangrar. */
  .c-tabla {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    max-width: none !important;
  }

  /* Minimo tactil de Apple: 44x44. Medido en el telefono, los chips de modulo
     dan 95x39 en nueve paginas y el boton de subir 38x38 a 12 px del borde
     inferior, justo donde iOS pone su barra. Solo cambia el alto y el area
     de toque; el ancho y el texto se quedan igual. El prefijo body es para
     ganarle al <style> de cada pagina, que carga despues de esta hoja.     */
  body .module-chip { min-height: 44px; display: inline-flex; align-items: center; }
  body .arriba, body button.arriba {
    width: 44px; height: 44px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- N. Las dos lineas atenuadas de la tarjeta de precio ------------------
   El diseno original las baja a 0.7 y 0.6. Medido sobre la zona MAS CLARA de
   la tarjeta destacada -lleva un velo azul al 45% sobre el navy- eso deja el
   texto de 15 px en 3.52 y el de 13 px en 2.99, por debajo del 4.5 que pide
   AA para texto pequeno. Se sube la atenuacion lo justo para cruzar el umbral
   en el peor caso, conservando la jerarquia: siguen mas suaves que el titulo. */
.price, .price-note { opacity: .92 !important; }
/* Las dos al mismo valor: la jerarquia la llevan el tamano -22, 15 y 13 px-
   y el peso, no una atenuacion que dejaba el texto mas pequeno por debajo
   del umbral justo cuando mas legible tenia que ser.                     */

/* --- O. El sello propio: orbitas en lugar de nubes ------------------------
   Zen abre su hero con nubes 3D. Clobi comparte plantilla y con la misma nube
   las dos webs se leian como la misma web. Estas orbitas son geometria pura
   -ni una peticion de red- y recogen el punto verde del logotipo: dan a Clobi
   una firma que Zen no tiene, sin salirse del sistema.                      */
.hero .cl-orbitas {
  position: absolute;
  left: 88%; top: 19%;
  width: min(330px, 26vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
}
.hero .cl-orbitas-b { left: 11%; top: 46%; width: min(240px, 19vw); }

.hero .cl-orbita {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(122, 178, 240, .30);
}
.hero .cl-orbita-1 { inset: 0; }
.hero .cl-orbita-2 { inset: 17%; border-color: rgba(122, 178, 240, .20); }
.hero .cl-orbita-3 { inset: 34%; border-color: rgba(82, 214, 138, .26); }

/* el punto que recorre el anillo exterior: el mismo verde del logotipo */
.hero .cl-punto {
  position: absolute;
  top: 50%; left: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #52D68A;
  box-shadow: 0 0 0 5px rgba(82, 214, 138, .14);
}
.hero .cl-orbitas-b .cl-punto { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #7AB2F0; box-shadow: 0 0 0 4px rgba(122, 178, 240, .14); }

/* Gira solo donde girar sale gratis: con raton y sin peticion de menos
   movimiento. En tactil queda quieto, igual que el resto de la pagina.     */
@keyframes cl-gira { to { rotate: 360deg; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero .cl-orbitas   { animation: cl-gira 52s linear infinite; }
  .hero .cl-orbitas-b { animation: cl-gira 74s linear infinite reverse; }
}
@media (max-width: 720px) {
  .hero .cl-orbitas   { left: 86%; top: 15%; width: 190px; opacity: .7; }
  .hero .cl-orbitas-b { left: 8%;  top: 52%; width: 140px; opacity: .55; }
}

/* --- P. Pie: redes y contacto --------------------------------------------- */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr 1.05fr; }

.f-rrss { display: flex; gap: 10px; margin-top: 20px; }
.f-rrss a {
  display: inline-flex; align-items: center; justify-content: center;
  /* 40x40 medido en las 15 paginas: por debajo del minimo tactil de Apple,
     que son 44x44. El icono de dentro no cambia de tamano.                 */
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(179, 198, 224, .45);
  color: #B3C6E0;
  transition: color .2s, border-color .2s, background-color .2s;
}
.f-rrss a:hover,
.f-rrss a:focus-visible {
  color: #fff;
  border-color: rgba(122, 178, 240, .55);
  background: rgba(37, 99, 176, .22);
}
/* el pie general desplaza sus enlaces al pasar por encima; en un boton
   cuadrado de icono ese salto lateral se ve como un temblor              */
footer .f-rrss a:hover { transform: none; }

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

/* --- Q. Bandas a sangre: el fondo llega al borde, el contenido no ---------
   Medido a 1440, seis familias de bandas -trust-bar, stats-row, stats-band,
   stats-strip, legal-strip y la tira de "otros modulos"- no cuelgan de ningun
   .container: nadie les pone tope de ancho y se estiran de borde a borde. De
   ahi las cajas larguisimas de cuatro celdas y las lineas de texto de 180
   caracteres.

   El arreglo no toca el marcado: un relleno lateral que vale 20 px cuando la
   pantalla es estrecha y crece hasta centrar el contenido en 1240 px cuando
   sobra sitio. La banda conserva su fondo a sangre -que es lo que la hace
   banda- y su contenido se alinea con el resto de la pagina.               */
.trust-bar,
.stats-row,
.stats-band,
.stats-strip,
.legal-strip,
.modules-section,
.modules-nav {
  padding-inline: max(20px, calc((100% - 1240px) / 2)) !important;
  box-sizing: border-box;
}

/* --- R. Medida de lectura -------------------------------------------------
   Una linea de 180 caracteres obliga al ojo a saltar de un extremo a otro y
   se pierde el renglon. La tipografia clasica pide entre 60 y 80; aqui se
   fija el tope en 72 para los textos descriptivos que corrian a lo ancho.  */
.fi-desc, .fc-desc, .rf-desc, .bc-desc, .si-desc, .wv-desc {
  max-width: 72ch;
}

/* El acordeon no tiene lista que lo envuelva: cada pregunta cuelga directa
   del .container y por eso medía 1280 de ancho por 62 de alto, una regleta y
   no una tarjeta. Se estrecha cada pieza y, centradas, forman la columna que
   faltaba: 720 px dejan la respuesta en unos 90 caracteres por linea.      */
.faq-item { max-width: 720px; margin-inline: auto; }
.faq-a { max-width: 68ch; }        /* ~88 caracteres por linea, no 180 */

/* --- S. La ventana de producto toma la forma de su captura ----------------
   El cuerpo de la ventana tenia una proporcion fija de 1,53 y la captura del
   tablero mide 2,28. Con object-fit: contain la imagen se dibujaba a 1008x442
   dentro de una caja de 1008x658: 108 px de BLANCO arriba y otros 108 abajo,
   dentro de un hero navy. En vez de recortar la captura -se perderia la barra
   lateral o los indicadores- la ventana adopta la forma de lo que muestra.

   La regla no fija ninguna proporcion concreta: cada pagina trae una captura
   distinta y asi cada ventana se ajusta a la suya.                          */
.hero .app-window .aw-body {
  height: auto !important;
  aspect-ratio: auto !important;
  background: #0F1E3D;            /* si algo sobrara, que sobre en navy */
}
.hero .app-window .ui-shot {
  display: block;
  width: 100% !important;
  height: auto !important;
  /* La captura llevaba aspect-ratio: 16/10 impuesto -978/611,25 es 1,6 clavado-
     y con eso height:auto seguia dando 611 px en vez de los 429 que pide su
     forma real. Liberada la proporcion, cada ventana toma la de su imagen y
     no hay ni franja blanca ni estiramiento.                                */
  aspect-ratio: auto !important;
  object-fit: contain;
}

/* --- T. Insignias flotantes: por delante, no por detras -------------------
   Medido con elementFromPoint sobre una malla de 3x3 dentro de cada insignia:
   .popular-badge ("Mas elegido" y "Completo", en Onboarding) salia 100%
   cubierta por .card-body, es decir, invisible del todo; y .screen-badge
   ("Demo disponible ahora", en Ventas) un 33% por detras de la ventana de
   producto. Las tres estaban en position:absolute sin z-index, asi que
   decidia el orden del DOM y ganaba el vecino, que va despues.

   Dos elementos pueden taparse sin que ninguno se salga de nada: por eso no
   lo veia el chequeo de recortes y hubo que preguntarle al navegador quien
   pinta encima en cada punto.                                               */
.popular-badge,
.screen-badge,
.hero-badge,
.trust-badge,
.tier-badge { z-index: 3; }

/* --- U. La cinta de capturas: una imagen vertical estiraba las ocho -------
   El hueco mas grande del sitio -1440x860 en Reportes- no era una altura en vh
   ni un bloque oculto: de las ocho piezas de la cinta, siete son capturas
   apaisadas de 900x562 y UNA es una captura de telefono de 900x1948. La cinta
   es flex con align-items: stretch, asi que esa unica pieza estiraba las ocho
   a 1247 px de alto y dejaba 860 px de tarjeta vacia debajo de cada apaisada.

   Se fija el hueco de imagen a la proporcion de las apaisadas, y a la vertical
   se le da su propia proporcion y su propio ancho para que llene su caja en vez
   de dejar dos bandas muertas a los lados: con object-fit: contain a secas el
   medidor daba el visto bueno -un <img> cuenta como tinta pinte lo que pinte-
   pero quedaban 198x348 de blanco a cada lado del telefono.
   Medido: cinta de 1247 a 422 px, y el telefono se sigue viendo al mismo
   tamano exacto (161x348), sin perder un pixel de legibilidad.              */
.gallery-track > :is(.gi, .gallery-item) > img {
  aspect-ratio: 900 / 562;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: var(--surface-2);
}
/* El @media es imprescindible: por debajo de 721 px manda la regla movil que
   pone las piezas a min(78vw, 300px), y sin la guarda el telefono volvia a
   estirar la cinta a 685 px, el defecto de origen.                          */
@media (min-width: 721px) {
  .gallery-track > .gi:has(> img[alt="Mobile"]) { width: 163px; }
  .gallery-track > .gi:has(> img[alt="Mobile"]) > img { aspect-ratio: 900 / 1948; }
}

/* La galeria de Reportes no lleva <img> sino paneles vivos, y uno de ellos es
   un telefono -900/1948-: en una cinta de una sola fila su altura mandaba
   sobre todas. Medido: fila de 1248 px con paneles apaisados de 348,4, o sea
   899,6 px de tarjeta vacia debajo de cada uno, tres veces. Pasa a rejilla de
   dos columnas: el telefono entero a un lado ocupando las tres filas y las
   tres apaisadas apiladas al otro, que es como se lee un comparativo.
   Medido despues: 566+566, columna izquierda hasta y=5766 y derecha hasta
   y=5781 -15 px de diferencia-, bloque de 1463,9 px frente a 1451 de antes y
   ni un hueco muerto. La cinta deja de avanzar sola en esta galeria: con las
   piezas ordenadas el movimiento ya no aporta y solo desalinea la rejilla.
   Por debajo de 721 px no se toca: ahi manda el carrusel tactil del bloque M. */
@media (min-width: 721px) {
  .gallery-track:has(> .gi > .cl-pa-marco.es-movil) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
    width: 100%;
    max-width: 100%;
    animation: none;
    transform: none;
  }
  .gallery-track:has(> .gi > .cl-pa-marco.es-movil) > .gi {
    width: auto;
    flex: none;
    align-self: start;
  }
  /* la segunda mitad de la cinta solo existia para cerrar el bucle */
  .gallery-track:has(> .gi > .cl-pa-marco.es-movil) > .gi:nth-child(n+5) { display: none; }
  .gallery-track:has(> .gi > .cl-pa-marco.es-movil) > .gi:has(> .cl-pa-marco.es-movil) {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* --- V. Rejillas de DOS tarjetas: se comian un tercio del ancho -----------
   zen.js anade .cards-grid en caliente a toda rejilla con dos o mas tarjetas.
   El bloque 24 de esta misma hoja fija ahi una base de TRES columnas con
   flex-grow: 0, asi que una rejilla de dos ocupaba solo dos tercios y
   justify-content: center repartia el tercio sobrante en dos carriles muertos,
   uno a cada lado: la franja vacia de 320x2140 de Partner.

   Las dos caras del selector piden explicitamente que haya exactamente dos
   tarjetas. Sin esa guarda, una rejilla de tres con .g-2 quedaria en 2+1 con
   la ultima centrada, que es justo el defecto que se esta corrigiendo.      */
.cards-grid.g-2 > *:not(.wide):nth-child(-n+2):nth-last-child(-n+2),
.cards-grid:has(> *:nth-child(2)):not(:has(> *:nth-child(3))) > *:not(.wide) {
  flex: 1 1 calc(50% - 14px);
  max-width: calc(50% - 14px);
}
/* Al ensancharse las tarjetas, el adorno de circulos de #tiers queda a 8 px de
   su borde y pinta despues en el arbol: se les da capa propia para que no las
   pueda tapar (punto 4 de la regla de diseno).                              */
.tiers-grid > *, .partner-tiers > * { position: relative; z-index: 1; }

/* --- W. El hero: textura de verdad y cromo que no canta -------------------
   (a) EL FONDO. La clase grid-lines prometia una rejilla fina, pero su
   ::before lo reescribe despues otro ::before de esta misma hoja con el mismo
   peso: del hero solo quedaban el degradado navy y dos manchas. De ahi el "no
   me mata". La textura se devuelve en el fondo del PROPIO elemento, no en un
   pseudo ya ocupado: una malla de puntos a 32 px y una rejilla a 128 px, las
   dos a menos del 15% de opacidad, mas una vinieta que hunde los bordes y
   empuja la mirada al centro, que es donde esta el titular.

   Se reconstruye sobre el degradado VIVO -el que termina en #1A2F5A, regla
   posterior de la hoja- y no sobre el primero, que esta muerto: calibrar la
   vinieta contra el navy equivocado la habria dejado como una mancha negra.
   Todo son capas de pintura: ni una peticion de red, ni una animacion mas.   */
.hero-dark {
  background-image:
    /* 1. vinieta: hunde los bordes y empuja la mirada al titular */
    radial-gradient(ellipse 74% 60% at 50% 36%, transparent 24%, rgba(8, 16, 34, .55) 90%),
    /* 2-5. haces de luz (variante D). Van por encima de la malla y por debajo
       de la vinieta: se leen como luz entrando en la escena, no como rayas
       pegadas encima. La intensidad baja un punto respecto a la maqueta -de
       .07 a .055- porque ahora comparten fondo con la curva del logotipo y
       no deben competir con ella. El haz verde queda al minimo: el verde
       sigue reservado al exito.                                            */
    linear-gradient(104deg, transparent 17%, rgba(122, 178, 240, .10) 19.4%, transparent 21.6%),
    linear-gradient(104deg, transparent 37%, rgba(122, 178, 240, .075) 39.6%, transparent 42%),
    linear-gradient(104deg, transparent 61%, rgba(82, 214, 138, .055) 63%, transparent 65.4%),
    linear-gradient(104deg, transparent 77%, rgba(122, 178, 240, .085) 79.2%, transparent 81.6%),
    /* 6-8. la textura: malla de puntos y rejilla fina */
    radial-gradient(rgba(176, 206, 242, .14) 1px, transparent 1.6px),
    linear-gradient(rgba(176, 206, 242, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176, 206, 242, .04) 1px, transparent 1px),
    /* 9-12. el degradado de marca, el que manda en la hoja */
    radial-gradient(1200px 620px at 8% -12%, rgba(0, 112, 243, .30), transparent 60%),
    radial-gradient(1000px 560px at 96% 6%, rgba(37, 99, 176, .26), transparent 58%),
    radial-gradient(760px 420px at 60% 108%, rgba(82, 214, 138, .10), transparent 62%),
    linear-gradient(160deg, #0B1730 0%, #0F1E3D 45%, #1A2F5A 100%);
  background-size:
    auto, auto, auto, auto, auto,
    32px 32px, 128px 128px, 128px 128px,
    auto, auto, auto, auto;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat,
    no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0;
}
/* en pantalla estrecha y a 2x, la malla de 32 px se lee como ruido detras del
   parrafo: se separa para que siga siendo textura. La lista tiene que traer
   las doce capas: si falta una, el navegador recicla desde el principio y la
   rejilla se desalinea.                                                     */
@media (max-width: 720px) {
  .hero-dark {
    background-size:
      auto, auto, auto, auto, auto,
      38px 38px, 152px 152px, 152px 152px,
      auto, auto, auto, auto;
  }
}

/* Las orbitas ganan un halo para leerse como fuente de luz y no como dos
   circunferencias de alambre. El azul lleva la voz: el verde queda reservado
   al exito -es el mismo criterio por el que se apagan los puntos de la
   ventana- y solo asoma al 10% junto al punto del logotipo.                 */
.hero .cl-orbitas::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(82, 214, 138, .10), rgba(37, 99, 176, .12) 42%, transparent 66%);
}
.hero .cl-orbitas-b::before {
  background: radial-gradient(circle at 50% 50%, rgba(122, 178, 240, .15), rgba(37, 99, 176, .09) 42%, transparent 68%);
}
.hero .cl-orbita-1 { border-color: rgba(122, 178, 240, .40); }

/* (b) EL CROMO BLANCO. La ventana de producto dibuja una barra de navegador
   en rgb(244,247,251) y un cuerpo blanco. Sobre el navy del hero eso es un
   recorte de papel, y ademas la captura que muestra es oscura: el marco
   claro la enmarca como si fuera de otro sitio. Pasa a vidrio oscuro.       */
:is(.hero-dark, .bg-dark) .app-window {
  background: #0B1730;
  border-color: rgba(255, 255, 255, .12);
}
:is(.hero-dark, .bg-dark) .aw-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  border-bottom-color: rgba(255, 255, 255, .10);
}
:is(.hero-dark, .bg-dark) .aw-url {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
}
:is(.hero-dark, .bg-dark) .aw-body,
:is(.hero-dark, .bg-dark) .aw-tabs,
:is(.hero-dark, .bg-dark) .aw-kpi,
:is(.hero-dark, .bg-dark) .aw-row { background: #0B1730; }
/* Los tres puntos de macOS son el unico rojo y el unico ambar del hero y
   compiten con la captura; neutros siguen leyendose como afordancia.        */
:is(.hero-dark, .bg-dark) .aw-bar .aw-dots i { background: rgba(255, 255, 255, .20); }
/* Y el filo blanco que barre el borde superior de la ventana: es cromo claro
   del mismo sitio, animado ademas. Se apaga.                                */
.hero-dark .app-window::after { opacity: 0; animation: none; }

/* --- X. Bandas a dos columnas: el encabezado baja a la reticula -----------
   Ocho bandas (bg-soft y bg-dark de contabilidad, cobrar, pagar, nomina,
   tesoreria, reportes, inventario y ventas) comparten componente:
   .sec-head.center centrado a 780 px, y debajo una rejilla de dos columnas.
   El parrafo lleva max-width: 380px en el atributo style, asi que el unico
   elemento ancho que pinta mide 380 y deja 520 px muertos a un lado. Siempre
   520: no es casualidad, es la resta.

   El encabezado deja de ir centrado y pasa a la MISMA reticula de dos
   columnas que el cuerpo: titular a la izquierda, entradilla a la derecha.
   Con eso la banda se lee como una composicion y no como un texto suelto
   flotando sobre medio lienzo vacio.                                        */
@media (min-width: 961px) {
  .section > .container > .sec-head.center:has(+ .ledger-inner, + .collection-inner, + .process-inner, + .cycle-inner, + .factoring-inner, + .suite-inner, + .flow-inner, + .fiscal-inner) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 80px);
    align-items: start;
    text-align: left;
    margin-bottom: clamp(30px, 3.2vw, 48px);
  }
  .section > .container > .sec-head.center:has(+ .ledger-inner, + .collection-inner, + .process-inner, + .cycle-inner, + .factoring-inner, + .suite-inner, + .flow-inner, + .fiscal-inner) > .eyebrow {
    grid-column: 1; grid-row: 2; justify-self: start; margin-bottom: 14px;
  }
  /* el margin-top va en el ATRIBUTO style en 7 de las 8 paginas: sin
     !important la entradilla arrancaba 16 px por encima del titular        */
  .section > .container > .sec-head.center:has(+ .ledger-inner, + .collection-inner, + .process-inner, + .cycle-inner, + .factoring-inner, + .suite-inner, + .flow-inner, + .fiscal-inner) > :is(h2, h3) {
    grid-column: 1; grid-row: 3; margin-top: 0 !important; margin-bottom: 0;
  }
  .section > .container > .sec-head.center:has(+ .ledger-inner, + .collection-inner, + .process-inner, + .cycle-inner, + .factoring-inner, + .suite-inner, + .flow-inner, + .fiscal-inner) > .lead {
    /* Arranca en la fila del ANTETITULO, no en la del titular: si empieza en
       la 3 queda la columna derecha vacia a la altura del antetitulo y sale un
       hueco de unos 320x220 pegado arriba. Midiendolo aparecio en tres
       paginas, y era consecuencia de este mismo bloque.                     */
    grid-column: 2; grid-row: 2 / span 2; align-self: start;
    max-width: none !important; margin: 0 !important;
  }

  /* las dos columnas del cuerpo cierran a la misma altura */
  .section > .container > :is(.ledger-inner, .collection-inner, .process-inner, .cycle-inner, .factoring-inner, .suite-inner, .flow-inner, .fiscal-inner) {
    align-items: stretch !important;
  }
  .section > .container > :is(.ledger-inner, .collection-inner, .process-inner, .cycle-inner, .factoring-inner, .suite-inner, .flow-inner, .fiscal-inner) > .reveal + .reveal {
    margin-top: 0;
  }
  .section > .container > :is(.ledger-inner, .collection-inner, .process-inner, .cycle-inner, .factoring-inner, .suite-inner, .flow-inner, .fiscal-inner) > * {
    align-self: stretch; height: auto;
    display: flex; flex-direction: column; justify-content: center;
  }

  /* La columna de fichas reparte su alto, pero NO se estira a lo ancho: una
     pastilla de 600 px con el texto pegado a la izquierda y el 70% de fondo
     plano es el defecto 3 de la regla, no su arreglo. Conservan su ancho
     natural y se distribuyen en vertical.                                   */
  :is(.ledger-inner, .collection-inner) > :first-child > [style*="flex-wrap"] {
    flex: 1;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    justify-content: space-evenly;
    margin-top: 0 !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
  }

  /* la captura de Reportes medía 216 px contra 534 de su hermana */
  .suite-inner > .suite-screen { max-height: 420px; }
  .suite-inner > .suite-screen > img { height: 100%; object-fit: cover; object-position: top; }
}

/* --- Y. La banda de cierre, de losa vacia a panel -------------------------
   La ultima seccion de casi todas las paginas es `.cta-band`: un eyebrow, un
   titular, una entradilla y dos botones, todo centrado, dentro de una caja
   que se estira a 1280x499. Con 96 px de relleno arriba y abajo para 232 px
   de contenido, el resultado medido es un 13-16% de tinta: se lee como una
   losa de color vacia, no como un cierre.

   Se le pone tope y se le baja el relleno: pasa a ser un PANEL contenido, con
   canto propio para que se despegue del fondo. Los tres bloques de texto
   comparten la medida de .sec-head (780 px), que es la que usa el resto del
   sitio, en vez de que el titular ocupe 1165 y la entradilla 743 y arranquen
   en verticales distintas.

   El ancho de 1080 es una decision de diseno -el cierre se lee como panel y
   no como una seccion mas-, no un numero elegido para contentar al medidor.  */
.section .cta-band {
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(40px, 4.4vw, 60px) clamp(24px, 4vw, 56px);
  box-shadow:
    inset 0 0 0 1px rgba(122, 178, 240, .16),
    0 34px 70px -44px rgba(6, 12, 22, .85);
}
.section .cta-band > :is(h2, p, .row) {
  max-width: 780px;
  margin-inline: auto;
}

/* --- Z. Columnas hermanas que cierran a la misma altura -------------------
   El patron que el cliente describe como "espacios vacios con texto a un
   costado que se ven raros" es una fila de dos columnas donde una mide 136 px
   y la otra 608. La causa no es falta de contenido: la rejilla alinea al
   centro en vez de estirar, y la columna corta no reparte su alto.

   NO se incluyen aqui dos reglas que proponia el diagnostico sobre
   div[style*="flex-wrap"] con !important: se comprobo que ese patron casa con
   DOS bloques, no uno, y el segundo -los chips de Contabilidad- salia danado.
   Tampoco la que tocaba el primer hijo de cada pastilla de pais, porque ese
   primer hijo es la bandera en unas paginas y el texto en otras: habria roto
   la simetria entre ellas en vez de arreglarla.                             */
@media (min-width: 981px) {

  .section .c-inner > [class^="reveal"] .cards-grid > *:not(.wide) {
    flex: 1 1 calc(50% - 14px); min-width: 0;
  }

  /* las dos columnas ocupan el alto de la fila */
  .section .c-inner:has(> [class^="reveal"]),
  .flow-layout.c-inner, .feat-row, .why-grid, .screen-panel.active { align-items: stretch; }

  .section .c-inner > [class^="reveal"],
  .section .c-inner > .flow-left {
    display: flex; flex-direction: column; position: static; align-self: stretch;
  }
  .section .c-inner > [class^="reveal"] > :only-child,
  .section .c-inner > .flow-left > :last-child { flex: 1 0 auto; }

  .section .c-inner:has(> [class^="reveal"]) > .reveal:not([class^="reveal"]):not([class*="-screen"]):not(.grid) {
    display: flex; flex-direction: column;
  }
  .section .c-inner:has(> [class^="reveal"]) > .reveal:not([class^="reveal"]):not([class*="-screen"]):not(.grid) > :only-child {
    flex: 1 0 auto; justify-content: space-between;
  }
  .section .c-inner:has(> [class^="reveal"]) > .reveal:not([class^="reveal"]):not([class*="-screen"]):not(.grid) > :nth-child(n+2):nth-last-child(n+2) {
    flex: 1 0 auto;
  }

  /* La fila de paises deja de ser una hilera de pastillas sueltas junto a un
     parrafo tres veces mas ancho: pasa a columna de filas iguales, que es la
     forma que pide el punto 3 de la regla de diseno.                        */
  .section .c-inner :is(.flag-row, .country-badges) {
    display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(52px, 1fr); gap: 10px;
  }
  .section .c-inner :is(.flag-pill, .country-badge) {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 14px; border-radius: 10px; padding-inline: 20px;
  }

  /* la captura acompana la altura de su hermana en vez de quedarse corta */
  .section .c-inner > [class*="-screen"]:has(> img),
  .feat-row > [class*="-screen"]:has(> img) { height: auto; align-self: stretch; }
  .section .c-inner > [class*="-screen"]:has(> img) > img,
  .feat-row > [class*="-screen"]:has(> img) > img { height: 100%; object-fit: cover; object-position: 50% 0; }

  /* en la portada, la ficha de texto del visor era 178 frente a 424 */
  .screen-panel.active > .screen-info {
    align-self: stretch; display: flex; flex-direction: column; justify-content: center;
    padding: 32px;
  }
}
/* La superficie de esa ficha va FUERA del @media: dentro, la tarjeta tenia
   fondo en escritorio y ninguno en el telefono, y el comparador de pintura lo
   marcaba -con razon: es el mismo patron por el que una tarjeta se quedo sin
   fondo con su texto claro encima-. Misma superficie en los dos anchos.     */
.screen-panel.active > .screen-info {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
}

/* --- AA. Modulos: ritmo visual y una fila que no se planta en el centro ---
   (a) GEOMETRIA. El catalogo parece una rejilla pero no lo es: zen.js le anade
   .cards-grid en caliente y el bloque 24 la vuelve flex centrada con
   flex-grow: 0. Con nueve tarjetas -ocho normales y una ancha- las ocho
   envuelven en 3+3+2, y la fila de dos se planta en el centro dejando 218 px
   muertos a cada lado. Dejandolas crecer, la fila incompleta reparte.

   (b) RITMO. Nueve tarjetas identicas en fila, todas con el mismo azulejo azul
   y la misma etiqueta azul: informacion buena, lectura plana. Cada modulo
   recibe uno de cuatro acentos que la hoja YA usa para .c-ico y .module-icon
   -y que se salto en .mc-icon-, rotando de cuatro en cuatro para que no haya
   dos vecinas del mismo color. No se anade nada: se le da a cada modulo el
   color que el sistema ya tenia previsto.

   NO se incluye la tarjeta destacada a doble ancho que proponia el
   diagnostico: se comprobo que su cuerpo a dos columnas incumple la propia
   regla de simetria (35% de desviacion entre hermanas).                     */
.section .cards-grid.modules-grid:has(> .module-card.wide) > .module-card:not(.wide) {
  flex-grow: 1;
  max-width: none;
}

.section .modules-grid > *:nth-child(4n+1) { --acento-modulo: #1E4F93; --acento-modulo-a: #EEF5FD; --acento-modulo-b: #DDEBFA; --acento-modulo-borde: #CFE1F6; }
.section .modules-grid > *:nth-child(4n+2) { --acento-modulo: #1F6B43; --acento-modulo-a: #E9F7EF; --acento-modulo-b: #D6F0E2; --acento-modulo-borde: #BFE6CE; }
.section .modules-grid > *:nth-child(4n+3) { --acento-modulo: #17407A; --acento-modulo-a: #EEF2FB; --acento-modulo-b: #E0E7F8; --acento-modulo-borde: #D3DDF3; }
.section .modules-grid > *:nth-child(4n+4) { --acento-modulo: #8A5A12; --acento-modulo-a: #FEF6E7; --acento-modulo-b: #FBECD0; --acento-modulo-borde: #F5DFB2; }

/* el :not(:hover) es obligatorio: sin el, el azulejo se queda con su acento
   al pasar por encima y se pierde la respuesta de la tarjeta               */
.section .modules-grid > .module-card:not(:hover) .mc-icon {
  background: linear-gradient(140deg, var(--acento-modulo-a), var(--acento-modulo-b));
  border-color: var(--acento-modulo-borde);
  color: var(--acento-modulo);
}
.section .modules-grid > .module-card .mc-tag {
  background: var(--acento-modulo-a);
  color: var(--acento-modulo);
}

/* --- AB. El hero de Contabilidad: un par pegado a la izquierda ------------
   .hero-right es una fila de 980 px con dos piezas -una insignia de 158 y el
   montaje de capturas de 480- alineadas al principio: 342 px muertos a la
   derecha, que es el hueco de 320x540 del informe. Centrando el par, ese aire
   se reparte a los dos lados y pasa a ser margen simetrico.
   La insignia sube a la capa de las demas (bloque T) por si en algun ancho
   llega a rozar la captura.                                                 */
@media (min-width: 1200px) {
  .hero .hero-right {
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 32px);
  }
}
.hero-chip { z-index: 3; }

/* --- AC. Las dos galerias, un solo sistema --------------------------------
   El bloque G daba el marco de ventana -con su semaforo- y la cartela
   editorial solo a .gallery-item / .gallery-caption. Pero seis de las ocho
   paginas con galeria usan .gi / .gi-cap, que son exactamente lo mismo con
   otro nombre: quedaban como fotos sueltas pegadas al lado de las otras, dos
   galerias distintas dentro del mismo sitio. Misma ceguera de nombre que
   dejaba una captura fuera del telefono.                                    */
.gallery-track > .gi:has(> img) {
  position: relative;
  padding-top: 26px;
  background: linear-gradient(180deg, #FFFFFF, #F4F7FB);
  border: 1px solid rgba(15, 30, 61, .10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 30, 61, .05), 0 26px 52px -22px rgba(15, 30, 61, .42);
}
.gallery-track > .gi:has(> img)::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 26px; z-index: 2;
  border-bottom: 1px solid rgba(15, 30, 61, .09);
  background:
    radial-gradient(circle 4px at 18px 13px, #FF5F57 97%, transparent 100%),
    radial-gradient(circle 4px at 31px 13px, #FEBC2E 97%, transparent 100%),
    radial-gradient(circle 4px at 44px 13px, #28C840 97%, transparent 100%),
    linear-gradient(180deg, #FFFFFF, #F1F5FA);
}
.gi-cap {
  border-top: 1px solid rgba(15, 30, 61, .07);
  padding: 14px 18px;
  font-size: .9rem;
  color: var(--body, #4A607A);
}

/* --- AD. Las bandas bg-soft que seguian con medio cuerpo vacio ------------
   (a) CONTABILIDAD y CUENTAS POR COBRAR. La pagina declara la rejilla a
   1fr 1fr, o sea una columna izquierda de 600 px, y lo unico que vive ahi es
   una fila de pastillas de 160-188 px. Desde el borde de la pastilla mas ancha
   hasta la tarjeta hermana habia 492 px muertos por toda la altura.

   El diagnostico proponia encoger la pista a fit-content(340px), pero eso
   descuadraba el encabezado: el bloque X ya lo reparte en dos columnas iguales,
   y con el cuerpo a 187/1012 la entradilla quedaba flotando sobre el centro de
   la tarjeta. Se conserva la reticula y se llenan las pastillas en DOS
   columnas: ocupan su sitio sin que ninguna se estire a 600 px, que es lo que
   el propio bloque X evitaba a proposito.                                    */
@media (min-width: 961px) {
  .section > .container > :is(.ledger-inner, .collection-inner) > :first-child > [style*="flex-wrap"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: space-evenly;
    gap: 12px !important;
  }
  .section > .container > :is(.ledger-inner, .collection-inner) > :first-child > [style*="flex-wrap"] > * {
    display: flex; align-items: center; justify-content: flex-start;
  }

  /* (b) REPORTES y TESORERIA. La lista de modulos no pinta: no tiene fondo y
     su unico borde es inferior, asi que la columna se quedaba sin suelo. Se le
     da superficie de panel, que es lo que ya tienen sus hermanas.            */
  .section > .container > :is(.suite-inner, .factoring-inner) > * > :is(.suite-modules, .fac-flow) {
    margin-top: 0;
  }
  .section > .container > .suite-inner > * > .suite-modules {
    padding: 6px 20px;
  }
  .section > .container > .suite-inner > * > .suite-modules > .suite-mod { padding-block: 10px; }
}
/* La superficie del panel va FUERA del @media: dentro, la lista tenia fondo en
   escritorio y ninguno en el telefono, y el comparador de pintura lo marca -con
   razon, es el mismo patron por el que una tarjeta se quedo sin fondo con su
   texto claro encima-. Misma superficie en los dos anchos.                   */
.section > .container > .suite-inner > * > .suite-modules {
  background: linear-gradient(170deg, #FFFFFF 0%, #FBFCFE 60%, #F7FAFD 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 47, 90, .04), 0 10px 26px rgba(26, 47, 90, .07);
}

/* --- AE. Bandas bg-mesh: columnas que no cierran y carriles muertos -------
   La hoja de pagina anula por empate el stretch que la base ya queria, asi que
   en las rejillas de dos tarjetas cada una conserva su altura natural: en
   Partners, 996 contra 605. Estirarlas no basta -quedaria la de la derecha
   medio vacia-, asi que su contenido reparte el alto recuperado.

   Los dos cortes de media query van a 721 px, no a 969: por encima de 720 ya
   manda la maquetacion de escritorio y con 969 quedaba una franja de 248 px
   -tablet en horizontal- con el defecto sin corregir.                        */
@media (min-width: 721px) {
  .section .cards-grid:has(> *:nth-child(2)):not(:has(> *:nth-child(3))) { align-items: stretch; }

  /* el carril derecho de Precios reparte los 247 px que le sobraban */
  .section .cards-grid > .right-col > * {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  }
  /* guarda obligatoria: al volver flex la ficha, su enlace se estiraba de 188
     a 552 px y dejaba de leerse como boton                                   */
  .section .cards-grid > .right-col > * > :is(a, button) { align-self: flex-start; }

  /* las cinco pestanas de Inventario sumaban 763 px en una barra de 1280 y
     dejaban 517 de carril muerto. El tope evita que al estrecharse la barra la
     quinta caiga sola a una segunda fila.                                    */
  .section .feat-tabs > .ftab { flex: 1 1 auto; max-width: 33%; }

  /* la columna visual de Partners, ya estirada, se rellena con lo que tiene */
  .section .why-grid > .why-visual > .eco-row {
    flex: 1 1 auto; grid-template-columns: 1fr; grid-auto-rows: 1fr;
  }
  .section .why-grid .eco-mini { display: flex; flex-direction: column; justify-content: center; }
  /* AS. El lado derecho de "un ecosistema de partners". Medido a 1400px: las
     dos tarjetas de .why-grid miden 606x996 cada una, pero la izquierda llena
     sus 996px con contenido propio (18,5 + 130,1 + 106,4 + 79,8 + pilares de
     115,7/115,7/134,8) y la derecha solo tiene .eco-card de 166,2 y .eco-row.
     Con la regla de arriba esa .eco-row queda en una sola columna de 536px y
     grid-auto-rows:1fr, asi que sus cuatro .eco-mini se estiran a 172,9px
     -536x172,9, proporcion 3,1:1- para tapar el hueco: 57,2px mas altos
     (+49%) que el .pillar-row equivalente de la izquierda, que mide 115,7px
     con la misma clase de contenido. Se devuelve la rejilla 2x2 que pide la
     hoja de la pagina, los azulejos vuelven a medir lo que miden y la tarjeta
     se centra en lugar de estirarse. align-self en el hijo gana a
     align-items:stretch del padre sin pelear especificidad.               */
  .section .why-grid > .why-visual > .eco-row {
    flex: 0 0 auto; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content;
  }
  /* ...pero centrarla parte el sobrante en dos. Medido despues de la regla de
     arriba: la columna de texto mide 996 px y la visual 559, asi que centrada
     deja 218 px de vacio ARRIBA y otros 218 ABAJO. Dos huecos simetricos en
     mitad de la seccion se leen como un agujero; uno solo al final se lee como
     margen. Se ancla arriba y el sobrante se va entero al pie.

     Y ya que se queda arriba, se pega: mientras se leen los tres pilares de la
     izquierda la tarjeta de la derecha sigue a la vista, que es justo para lo
     que esta ahi. `top` sale de la altura de la cabecera pegajosa (72 px) mas
     el aire de una linea. */
  .section .why-grid > .why-visual {
    align-self: flex-start;
    position: sticky;
    top: 96px;
  }
}
/* En pantallas cortas una columna pegajosa mas alta que la ventana se queda
   trabada a media altura y no deja ver su final. Por debajo de 700 px de alto
   -y en cualquier movil, donde las dos columnas ya van apiladas- no se pega. */
@media (max-height: 700px), (max-width: 900px) {
  .section .why-grid > .why-visual { position: static; }
}

/* La banda de cifras de Quienes Somos es el TERCER hijo de una rejilla de dos
   columnas: caia en la celda inferior izquierda dejando su gemela vacia.     */
.section .who-inner > .who-stats { grid-column: 1 / -1; }

/* --- AF. Lightbox disponible en todas las paginas ------------------------
   Las capturas del producto viajan a 900x562 y se muestran entre el 22% y el
   66% de su tamano: el texto de dentro de la plataforma no se lee. Diez
   paginas ya traian lightbox en su hoja propia; la portada y Modulos no, y
   ahi habia once capturas que no habia forma de ampliar. Estas reglas viven en
   la hoja compartida, asi que sirven de base en todas; donde la pagina
   declare las suyas, ganan las suyas por orden.                             */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8, 16, 34, .92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease, ease);
  padding: 24px;
}
.lightbox.open, .lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 94vw; max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55);
}
.lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* la captura ampliable se anuncia como tal */
[data-ampliable] { cursor: zoom-in; }
[data-ampliable]:focus-visible { outline: 2px solid var(--azul-claro, #4A90D9); outline-offset: 3px; }

/* --- AG. El sello de Clobi: la curva del logotipo, no unos anillos --------
   Los anillos concentricos eran geometria neutra: no decian nada de Clobi ni
   de un ERP. El logotipo, en cambio, YA tiene un gesto propio -una linea que
   sube con nodos y remata en el punto verde-. Llevado a escala grande, el
   fondo del hero pasa a decir algo: tu negocio sube.

   Se coloca a la derecha y abajo a la izquierda, nunca por detras del
   titular, que va centrado y mide como mucho 780 px.                        */
.hero .cl-traza {
  position: absolute;
  right: -3%; top: 3%;
  width: min(520px, 42vw);
  height: auto;
  aspect-ratio: 520 / 420;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.hero .cl-traza-b {
  right: auto; top: auto;
  left: -4%; bottom: 4%;
  width: min(320px, 26vw);
  aspect-ratio: 320 / 260;
  opacity: .8;
}
/* El trazo se dibuja al entrar, una sola vez y solo con raton: es el unico
   movimiento del fondo, y en tactil no corre nada.                          */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero .cl-traza path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: cl-dibuja 2.1s var(--ease-out, ease-out) .35s forwards; }
  .hero .cl-traza circle { opacity: 0; animation: cl-aparece .5s ease-out forwards; }
  .hero .cl-traza circle:nth-of-type(1) { animation-delay: 1.25s; }
  .hero .cl-traza circle:nth-of-type(2) { animation-delay: 1.55s; }
  .hero .cl-traza circle:nth-of-type(3) { animation-delay: 1.9s; }
  .hero .cl-traza circle:nth-of-type(4) { animation-delay: 2.0s; }
}
@keyframes cl-dibuja { to { stroke-dashoffset: 0; } }
@keyframes cl-aparece { to { opacity: 1; } }
@media (max-width: 720px) {
  .hero .cl-traza   { right: -12%; top: 2%; width: 260px; opacity: .75; }
  .hero .cl-traza-b { left: -14%; bottom: 3%; width: 180px; opacity: .55; }
}

/* --- AH. La fila de pastillas del hero de Modulos -------------------------
   Cuatro capsulas identicas, cada una con el mismo punto azul sin significado
   y todas del mismo peso: es el patron de "chips" que delata una plantilla
   generada. Cada pastilla recibe el acento de SU modulo -el mismo juego de
   cuatro que ya usan las tarjetas de esa pagina-, asi que el punto pasa de
   adorno a dato: dice de que familia es cada una.                           */
.hero-tags .pill:nth-child(4n+1) { --acento-pastilla: #7AB2F0; }
.hero-tags .pill:nth-child(4n+2) { --acento-pastilla: #52D68A; }
.hero-tags .pill:nth-child(4n+3) { --acento-pastilla: #86C3F7; }
.hero-tags .pill:nth-child(4n+4) { --acento-pastilla: #F5A524; }
.hero-tags .pill .pill-dot {
  background: var(--acento-pastilla, #7AB2F0) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-pastilla, #7AB2F0) 18%, transparent);
}
/* la capsula baja de peso: deja de leerse como cuatro botones iguales */
.hero-tags .pill {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(122, 178, 240, .18);
}

/* --- AI. Base del modal, para el que se inyecta -------------------------
   FALLO PROPIO de la ronda anterior: al inyectar el modal en las paginas que
   no tenian ninguno, se puso el MARCADO sin poner su base de estilos. En
   Partners, que no declara .modal-overlay en su hoja, el resultado era un
   position: static con opacity: 1: el formulario de demo incrustado en el
   flujo y visible siempre, al pie de la pagina. Aparecia "de la nada".

   Estas reglas viven en la hoja compartida, asi que sirven de base en todas.
   Las diez paginas que traen las suyas las declaran en su <style> de pagina,
   que carga despues y gana: aqui no se les toca nada.                       */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 16, 34, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--ease, ease);
}
.modal-overlay.open,
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-overlay > .modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid rgba(15, 30, 61, .10);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 40px 80px -28px rgba(6, 12, 22, .55);
}
.modal-overlay > .modal > h3 {
  font-size: 1.32rem;
  margin: 0 0 8px;
  color: var(--ink, #1A2F5A);
}
.modal-overlay > .modal > .modal-sub {
  margin: 0 0 22px;
  color: var(--body, #4A607A);
  font-size: .95rem;
}
.modal-overlay > .modal > .modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(26, 47, 90, .06);
  border: 1px solid rgba(26, 47, 90, .12);
  color: var(--body, #4A607A);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay > .modal > .modal-close:hover { background: rgba(26, 47, 90, .12); }
.modal-overlay .clobi-form-container { margin-top: 4px; }

/* --- AJ. El panel de Clobi, RECALCADO sobre la captura real --------------
   La primera version la interprete de memoria y salio otra cosa: tarjetas casi
   cuadradas, pestanas sueltas y colores de la paleta de marketing. Esta esta
   MEDIDA sobre `Sin titulo 3.png` (1912x947) pixel a pixel:

     barra lateral        234 px      contenido centrado  1229 px
     barra superior        64 px      pildora de pestana    36 px
     tarjeta KPI      276x106 px      separacion            34 px
     tarjeta del grafico  336 px

   SEGUNDA CORRECCION -legibilidad-. El calco era exacto pero ilegible: el
   diseno mide 1912 px y la ventana del hero lo pinta a ~1000, o sea al 52%, y
   una etiqueta de 9,9 px se quedaba en 4,9. Vectorizar arregla la NITIDEZ, no
   el TAMANO. Dos cosas estaban mal planteadas:

   1) el margen de centrado del contenido (218 y 231 px) estaba congelado como
      porcentaje del ancho, asi que a 1000 px seguia comiendose el 27% del
      espacio util en vez de desaparecer. Ahora es `max-width` + margen auto,
      que es lo que hace de verdad un contenedor centrado: identico a la
      captura a 1912 px y cero margen cuando no sobra sitio.

   2) la tipografia escalaba con el ancho. Ninguna aplicacion real hace eso:
      un ERP en una ventana de 1000 px conserva su menu a 12,6 px y su titulo
      a 22 px, no los reduce a la mitad. Todo el panel cuelga ahora de una
      sola unidad, `--t`, con suelo en el valor real de la captura; de 1912 px
      para arriba vuelve a ser una copia a escala exacta, y de ahi para abajo
      es la misma aplicacion en una ventana mas estrecha. Por eso las alturas
      son `min-height` y no `height`: las cajas crecen si el texto lo pide.

   Los colores tambien salen de la captura, no de la paleta de la web: esto
   retrata el producto, igual que hacia la foto a la que sustituye.          */
.app-window .aw-body:has(.cl-ui) { container-type: inline-size; }
.cl-ui {
  /* la unidad de todo el panel: proporcional por encima de la captura,
     fija en el tamano real de la aplicacion por debajo */
  --t: max(22px, 1.15cqw);
  display: flex;
  width: 100%;
  font-size: var(--t);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: #E6EDF7;
  background: #0F172A;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.cl-ui * { box-sizing: border-box; }
.cl-ui .cl-ui-ico { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.7; flex: 0 0 auto; }
.cl-ui .cl-ui-ico-top { width: 1.35em; height: 1.35em; stroke: #94A9C4; stroke-width: 1.7; }

/* barra lateral: 234 px = 10.64em, fondo muestreado (26,58,92) */
.cl-ui-lat {
  flex: 0 0 auto; width: 10.64em;
  background: #1A3A5C;
  padding: 1em .54em;
  display: flex; flex-direction: column; gap: .54em;
}
.cl-ui-emp { display: flex; flex-direction: column; gap: .09em; padding: 0 .3em .65em;
             border-bottom: 1px solid rgba(255, 255, 255, .10); }
.cl-ui-emp b { font-size: .548em; font-weight: 600; color: #FFFFFF; }
.cl-ui-emp span { font-size: .478em; color: #9FB4CC; display: flex; align-items: center; gap: .22em; }
.cl-ui-emp em { font-style: normal; background: rgba(255, 255, 255, .16); border-radius: .2em;
                padding: 0 .2em; font-size: .92em; color: #E6EDF7; }
.cl-ui-menu { display: flex; flex-direction: column; gap: .07em; }
.cl-ui-menu-pie { margin-top: auto; padding-top: .6em; border-top: 1px solid rgba(255, 255, 255, .10); }
.cl-ui-item { display: flex; align-items: center; gap: .43em; padding: .365em .43em;
              border-radius: .26em; color: #C6D6E8; font-size: .574em; }
.cl-ui-item i { font-style: normal; }
.cl-ui-item.es-activo { background: #3C5774; color: #FFFFFF; font-weight: 600; }

/* barra superior: 64 px = 2.91em, fondo (30,41,59) */
.cl-ui-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #0F172A; }
.cl-ui-top { min-height: 2.91em; display: flex; align-items: center; justify-content: flex-end;
             gap: .78em; padding-inline: 1.3em; background: #1E293B; flex: 0 0 auto; }
.cl-ui-top-iconos { display: flex; align-items: center; gap: .74em; }
.cl-ui-usuario { display: flex; align-items: center; gap: .365em; font-size: .574em; color: #E6EDF7; }
.cl-ui-avatar { width: 1.9em; height: 1.9em; border-radius: 50%; background: #15803D;
                color: #fff; font-style: normal; font-weight: 700; font-size: .83em;
                display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* el contenido es un contenedor centrado de 1229 px: a 1912 deja los mismos
   224 px a cada lado que la captura, y en una ventana estrecha no deja nada */
.cl-ui-cuerpo { width: 100%; max-width: 57.4em; margin-inline: auto;
                padding: 1em .9em 1.04em; display: flex; flex-direction: column; }
.cl-ui-saludo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.04em; }
.cl-ui-saludo .cl-ui-tit { margin: 0 0 .13em; font-size: 1em; font-weight: 600;
                   letter-spacing: -.01em; color: #FFFFFF; white-space: nowrap; }
.cl-ui-saludo p { margin: 0; font-size: .522em; color: #94A9C4; }
.cl-ui-fechas { display: flex; gap: .39em; flex: 0 0 auto; }
.cl-ui-campo { font-size: .504em; color: #94A9C4; background: #1E293B;
               border: 1px solid rgba(255, 255, 255, .10); border-radius: .3em;
               padding: .35em .6em; white-space: nowrap; }
.cl-ui-campo b { color: #E6EDF7; font-weight: 600; }

/* las tres pestanas, con la activa en el azul vivo de la captura (59,130,246) */
.cl-ui-tabs { display: flex; align-items: center; margin-top: .83em; gap: .17em; flex-wrap: wrap; }
.cl-ui-tab { font-size: .539em; color: #9FB4CC; min-height: 3.03em;
             display: flex; align-items: center; padding-inline: 1.37em; border-radius: .5em; }
.cl-ui-tab.es-activo { background: #2E6FD9; color: #FFFFFF; font-weight: 600; }
.cl-ui-divisas { margin-left: auto; font-size: .504em; color: #94A9C4; white-space: nowrap; }
.cl-ui-divisas b { color: #E6EDF7; font-weight: 600; margin: 0 .45em 0 .15em; }

/* las ocho tarjetas: anchas y bajas, 2.6:1 */
.cl-ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: 1em 1.55em; margin-top: 1.14em; }
.cl-ui-kpi { min-height: 4.82em; border-radius: .38em; padding: .63em .7em;
             display: flex; flex-direction: column; justify-content: center; gap: .09em; }
.cl-ui-kpi-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: .35em; }
.cl-ui-kpi-tit { font-size: .452em; letter-spacing: .06em; color: #C4D4E6; font-weight: 600; }
.cl-ui-kpi-ico { width: 1.235em; height: 1.235em; border-radius: .25em; display: flex;
                 align-items: center; justify-content: center; flex: 0 0 auto; }
.cl-ui-kpi-ico .cl-ui-ico { width: .7em; height: .7em; }
.cl-ui-kpi-val { font-size: .913em; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; line-height: 1.1; }
.cl-ui-kpi-pie { font-size: .452em; color: #9FB4CC; }
/* tonos muestreados de la captura, uno a uno */
.cl-ui-kpi.t-azul    { background: #1B3377; }
.cl-ui-kpi.t-ambar   { background: #343343; }
.cl-ui-kpi.t-verde   { background: #17382E; }
.cl-ui-kpi.t-teal    { background: #122A37; }
.cl-ui-kpi.t-naranja { background: #301F24; }
.cl-ui-kpi.t-violeta { background: #2A2340; }
.cl-ui-kpi.t-azul    .cl-ui-kpi-ico { background: #2D4FA8; color: #BFD6FF; }
.cl-ui-kpi.t-ambar   .cl-ui-kpi-ico { background: #5A4A22; color: #F5C97A; }
.cl-ui-kpi.t-verde   .cl-ui-kpi-ico { background: #1E5A42; color: #7BE9AA; }
.cl-ui-kpi.t-teal    .cl-ui-kpi-ico { background: #1B4A56; color: #8FE3E0; }
.cl-ui-kpi.t-naranja .cl-ui-kpi-ico { background: #5A3326; color: #F3A78A; }
.cl-ui-kpi.t-violeta .cl-ui-kpi-ico { background: #3E3470; color: #C4B5FD; }

/* la tarjeta del grafico: 336 px de alto, fondo (27,38,56) */
.cl-ui-graf { background: #1B2638; border-radius: .38em; padding: .74em .87em .52em;
              margin-top: 1em; min-height: 15.28em; display: flex; flex-direction: column; }
.cl-ui-graf-tit { font-size: .591em; font-weight: 600; margin-bottom: .3em; color: #E6EDF7; }
.cl-ui-svg { width: 100%; flex: 1 1 auto; min-height: 0; display: block; }
.cl-ui-svg .cl-ui-eje { fill: #A8BCD4; font-size: 12px; font-family: inherit; }
.cl-ui-leyenda { display: flex; gap: .78em; justify-content: center; font-size: .478em; }
.cl-ui-leyenda span { display: inline-flex; align-items: center; gap: .3em; color: #C4D4E6; }
.cl-ui-leyenda i { width: .55em; height: .55em; border-radius: .12em; display: inline-block; }

/* El panel fija TODOS sus colores. Vive dentro del hero, donde las reglas de
   la casa pintan los titulares en navy y los span en menta: heredar de ahi
   dejaba el saludo a 1,2 de contraste, invisible.                           */
.cl-ui :is(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; font-family: inherit; }
.cl-ui p, .cl-ui span, .cl-ui b, .cl-ui strong, .cl-ui i, .cl-ui em { font-family: inherit; }
.cl-ui b, .cl-ui strong { color: #E6EDF7; }

/* La ventana del hero se lleva todo el ancho de la reja. La plantilla de Zen
   la corta en 980 px porque alli dentro va una foto, que da igual a que
   tamano se vea; aqui dentro va la aplicacion, y cada pixel de ancho es
   tamano de letra: de 980 a 1180 el panel pasa del 52% al 61% de la captura.
   El tope tiene dos partes y las dos hacen falta: 1180 px porque mas ancho
   no anade legibilidad -de eso se encarga el suelo tipografico- y solo
   aplana el panel, y `100% - 180` porque las dos tarjetas flotantes
   cuelgan 64 y 77 px por fuera de las esquinas y a 1280 de pantalla se
   salian cortadas. Por debajo de 1100 manda la plantilla.                */
@media (min-width: 1100px) {
  .hero-visual-col:has(.cl-ui) { max-width: min(1180px, calc(100% - 180px)) !important; }
}

/* Ventana estrecha: la aplicacion se aprieta como se apretaria de verdad.
   Se recorta la separacion entre tarjetas y la altura del grafico -que en la
   captura es holgada- antes que el texto, que es lo unico que no puede
   encogerse sin dejar de cumplir su funcion.                                */
@container (max-width: 1500px) {
  .cl-ui-tabs { margin-top: .7em; }
  .cl-ui-kpis { gap: .7em .8em; margin-top: .9em; }
  .cl-ui-kpi { min-height: 4.1em; }
  /* en la tarjeta estrecha "CENTROS DE COSTO" partia en dos lineas y esa
     tarjeta se salia del ritmo de las otras siete */
  .cl-ui-kpi-tit { letter-spacing: .035em; }
  .cl-ui-kpi-fila { gap: .28em; }
  .cl-ui-kpi-ico { width: 1.1em; height: 1.1em; }
  .cl-ui-graf { min-height: 9.3em; margin-top: .8em; }
  .cl-ui-cuerpo { padding-block: .8em; }
}
/* por debajo de cierto ancho la barra lateral se queda solo con los iconos */
@container (max-width: 700px) {
  .cl-ui { --t: max(15px, 2.6cqw); }
  .cl-ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-ui-lat { width: 2.9em; padding-inline: .3em; }
  .cl-ui-emp, .cl-ui-item i, .cl-ui-chev, .cl-ui-divisas, .cl-ui-fechas { display: none; }
  .cl-ui-item { justify-content: center; }
  .cl-ui-marca svg { height: 1.1em; }
  .cl-ui-cerrar { display: none; }
  /* Medido en la portada a 390 px: el calco mide 320 px, --t se queda en su
     suelo de 15 px y los rotulos de indicador, que valen .452em, caen a
     6,8 px; dentro del calco hay 45 nodos de texto entre 5,0 y 8,9 px. El
     minimo legible en iOS son 11. Esto pone suelo en pixeles a los dos
     rotulos mas repetidos -16 nodos- y los saca de 6,8 a 9,5 px. No arregla
     el calco entero: eso pide una decision de diseno aparte.               */
  .cl-ui-kpi-tit, .cl-ui-kpi-pie { font-size: max(.452em, 9.5px); }
}

/* --- AK. El motivo, tambien fuera del hero -------------------------------
   Al cliente le convencio la mezcla de la curva con los haces, asi que las
   bandas oscuras del resto del sitio dejan de ser un navy plano y reciben el
   mismo tratamiento, a menor intensidad: son bandas de apoyo, no la portada.
   Sigue sin costar una sola peticion de red ni una animacion nueva.         */
.section.bg-dark {
  background-image:
    linear-gradient(104deg, transparent 22%, rgba(122, 178, 240, .06) 24%, transparent 26.2%),
    linear-gradient(104deg, transparent 58%, rgba(82, 214, 138, .035) 60%, transparent 62.4%),
    linear-gradient(104deg, transparent 80%, rgba(122, 178, 240, .05) 82%, transparent 84.4%),
    radial-gradient(rgba(176, 206, 242, .10) 1px, transparent 1.5px),
    var(--fondo-banda-oscura, linear-gradient(165deg, #0B1730 0%, #0F1E3D 55%, #14264B 100%));
  background-size: auto, auto, auto, 34px 34px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
/* La curva remata las bandas oscuras que cierran una pagina: una sola, chica
   y a la derecha, para que rime con el hero sin repetirlo.                  */
.section.bg-dark .cl-traza { opacity: .55; }
/* remates del calco: los detalles que la captura tiene y faltaban. Todo en
   `em` de --t, como el resto del panel, para que el suelo de legibilidad les
   alcance tambien: son los elementos mas chicos y los primeros en perderse. */
.cl-ui-marca { display: flex; align-items: center; justify-content: space-between;
               margin: 0 .26em .17em; }
.cl-ui-marca svg { height: 1.65em; width: auto; display: block; }
.cl-ui-cerrar { font-weight: 400; font-size: .74em; color: #9FB4CC; padding-right: .17em; }
.cl-ui-item { position: relative; }
.cl-ui-chev { margin-left: auto; font-weight: 400; font-size: 1.1em; color: #8FA6C0; }
.cl-ui-ayuda { display: inline-flex; align-items: center; justify-content: center;
               width: .71em; height: .71em; border-radius: 50%;
               border: 1px solid rgba(255, 255, 255, .34); color: #9FB4CC;
               font-size: .61em; font-weight: 500; vertical-align: middle; margin-left: .3em; }
.cl-ui-fechas { align-items: center; gap: .35em; }
.cl-ui-fecha-et { font-size: .504em; color: #94A9C4; }
.cl-ui-campo { display: inline-flex; align-items: center; justify-content: space-between;
               gap: .8em; }
.cl-ui-cal { width: 1.15em; height: 1.15em; stroke: #7E93AE; stroke-width: 1.7; flex: 0 0 auto; }
.cl-ui-aviso { position: relative; display: inline-flex; }
.cl-ui-aviso b { position: absolute; top: -.28em; right: -.3em; background: #DC2626;
                 color: #fff; font-size: .33em; font-weight: 700; line-height: 1;
                 padding: .12em .22em; border-radius: .6em; }
/* las lineas de guia verticales del grafico */
.cl-ui-svg .cl-ui-guia-v { stroke: rgba(148, 177, 214, .10); }

/* --- AL. Las pantallas del ERP,
recalcadas -------------------------------
   Mismo metodo que el panel del hero,
ahora para las 67 capturas de galeria.
   Medido sobre `0b208c1f00.png` (1400x868),
la mas nitida de todas:

     barra lateral   232 px     barra superior   86 px
     margen           23 px     fila de filtros  44 px
     cabecera tabla   46 px     fila             55 px
     cuerpo           14 px     titulo           24 px

   Todo cuelga de --t (= 14 px,
el cuerpo de la aplicacion) CON SUELO. Es la
   leccion del panel del hero: escalar la tipografia con el ancho reproduce la
   captura pero no se lee,
y el cliente no quiere una miniatura fiel,
quiere
   ver lo que trae el producto.

   La galeria pinta estas capturas a 598 px. A ese ancho no hay forma de que
   entre una tabla de nueve columnas con texto legible,
asi que el calco hace
   lo que haria la aplicacion de verdad en una ventana estrecha: recoge la
   barra lateral,
guarda los filtros y esconde las columnas menos utiles por
   orden de prioridad. Al ampliarla sale entera. Cuatro filas que se leen
   valen mas que nueve que no.                                              */
.cl-pa-marco {
  container-type: inline-size;
  /* 900 px de ancho natural, como la <img width="900"> a la que sustituye.
     Sin esto, dentro de un contenedor que se ajusta a su contenido -la pila de
     capturas del hero, que no declara ancho porque la imagen se lo daba- el
     marco proponia 0 y el hero entero se quedaba en 2x2 px en el telefono.
     `max-width: 100%` lo devuelve al ancho del hueco cuando si lo hay. */
  display: block; position: relative; width: 900px; max-width: 100%;
  aspect-ratio: 900 / 562; overflow: hidden;
  border-radius: inherit; background: #FFFFFF; cursor: zoom-in;
}
.cl-pa {
  --t: max(13px, 1cqw);
  --tinta: #24333A; --suave: #55606D; --tenue: #646C79;
  --linea: #EBEFEE; --azul: #2563B0;
  position: absolute; inset: 0; display: flex; min-height: 100%;
  font-size: var(--t); font-family: var(--font-body, Inter, system-ui, sans-serif);
  color: var(--tinta); background: #FFFFFF; line-height: 1.35;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.cl-pa * { box-sizing: border-box; }
.cl-pa :where(b, strong, em, i, u, span, h4, p) { color: inherit; }
.cl-pa i, .cl-pa em, .cl-pa b, .cl-pa u { font-style: normal; }
.cl-pa .cl-pa-ico { width: 1.25em; height: 1.25em; stroke: currentColor;
                    stroke-width: 1.7; fill: none; flex: 0 0 auto; }
.cl-pa .cl-pa-ico-mini { width: 1.1em; height: 1.1em; stroke: currentColor;
                         stroke-width: 1.8; fill: none; flex: 0 0 auto; }
.cl-pa .cl-pa-ico-top { width: 1.45em; height: 1.45em; stroke: #4B5563;
                        stroke-width: 1.7; fill: none; flex: 0 0 auto; }
.cl-pa .cl-pa-ico-emp { width: 1.15em; height: 1.15em; stroke: #7E9A8E;
                        stroke-width: 1.7; fill: none; flex: 0 0 auto; }

/* --- barra lateral: 232 px,
fondo muestreado (16,
35,
29) */
.cl-pa-lat {
  flex: 0 0 auto; width: 16.57em; background: #10231D; color: #C3CEC9;
  padding: 1.14em .86em; display: flex; flex-direction: column; gap: .5em;
}
.cl-pa .cl-pa-marca { display: flex; align-items: center; justify-content: space-between;
               padding: 0 .3em .9em; }
.cl-pa .cl-pa-marca svg { height: 2.05em; width: auto; display: block; }
.cl-pa .cl-pa-cerrar { color: #8DA79B; font-size: 1.15em; font-weight: 300; }
.cl-pa .cl-pa-emp { display: flex; align-items: center; gap: .5em; padding: 0 .3em 1em;
             border-bottom: 1px solid rgba(255, 255, 255, .09); }
.cl-pa .cl-pa-emp > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cl-pa .cl-pa-emp b { font-size: .93em; font-weight: 500; color: #F1F5F3; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-emp em { font-size: .79em; color: #8DA79B; display: flex; align-items: center; gap: .35em; }
.cl-pa .cl-pa-emp em i { background: rgba(255, 255, 255, .14); border-radius: .25em;
                  padding: 0 .3em; font-size: .92em; color: #E3EAE7; font-weight: 600; }
.cl-pa .cl-pa-menu { display: flex; flex-direction: column; gap: .07em; padding-top: .7em; }
.cl-pa .cl-pa-menu-pie { margin-top: auto; padding-top: .8em;
                  border-top: 1px solid rgba(255, 255, 255, .09); }
.cl-pa .cl-pa-item { display: flex; align-items: center; gap: .72em; padding: .85em .62em;
              border-radius: .5em; font-size: 1em; color: #C2CFC9; white-space: nowrap; }
.cl-pa .cl-pa-item i { overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-item.es-activo { background: #32453F; color: #FFFFFF; font-weight: 500; }
.cl-pa .cl-pa-chev { margin-left: auto; color: #A6C0B4; font-size: 1.1em; }

/* --- barra superior: 86 px sobre blanco */
.cl-pa-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cl-pa .cl-pa-top { flex: 0 0 auto; height: 6.14em; display: flex; align-items: center;
             justify-content: flex-end; gap: 1.1em; padding-inline: 1.71em;
             background: #FFFFFF; }
.cl-pa .cl-pa-usuario { display: flex; align-items: center; gap: .5em; font-size: .93em;
                 color: #1F2937; white-space: nowrap; }
.cl-pa .cl-pa-avatar { width: 2.3em; height: 2.3em; border-radius: 50%; background: #15803D;
                color: #fff; font-weight: 600; font-size: .9em; display: flex;
                align-items: center; justify-content: center; flex: 0 0 auto; }
.cl-pa .cl-pa-caret { color: var(--tenue); font-size: .8em; }
.cl-pa .cl-pa-aviso { position: relative; display: inline-flex; }
.cl-pa .cl-pa-aviso b { position: absolute; top: -.35em; right: -.4em; background: #DC2626;
                 color: #fff; font-size: .55em; font-weight: 700; line-height: 1;
                 padding: .2em .35em; border-radius: 1em; }

/* --- cuerpo */
.cl-pa-cuerpo { flex: 1 1 auto; min-width: 0; padding: 1.1em 1.64em 1.4em;
                display: flex; flex-direction: column; }
.cl-pa .cl-pa-cab { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 1.2em; }
.cl-pa .cl-pa-cab h4 { margin: 0 0 .25em; font-size: 1.714em; font-weight: 600;
                letter-spacing: -.015em; color: #111827; line-height: 1.15; }
.cl-pa .cl-pa-cab p { margin: 0; font-size: 1em; color: var(--suave); }
.cl-pa .cl-pa-ayuda { display: inline-flex; align-items: center; justify-content: center;
               width: .62em; height: .62em; border-radius: 50%; border: 1px solid #B6C0C9;
               color: var(--tenue); font-size: .58em; font-weight: 500;
               vertical-align: .35em; margin-left: .5em; }
.cl-pa .cl-pa-acc,
.cl-pa .cl-pa-acc-der { display: flex; gap: .64em; flex: 0 0 auto; align-items: center; }
.cl-pa .cl-pa-acc-der { margin-left: auto; }

/* --- botones */
.cl-pa-bot { display: inline-flex; align-items: center; gap: .45em; height: 3.14em;
             padding-inline: 1.1em; border-radius: .57em; font-size: .93em;
             font-weight: 500; white-space: nowrap; background: #FFFFFF;
             color: #374151; border: 1px solid #D8DEDC; }
.cl-pa .cl-pa-bot.es-pri { background: var(--azul); color: #FFFFFF; border-color: var(--azul); }

/* --- fila de filtros: 44 px de alto */
.cl-pa-filtros { display: flex; align-items: center; gap: .64em; margin-top: 1.57em;
                 flex-wrap: nowrap; }
.cl-pa .cl-pa-busca,
.cl-pa .cl-pa-sel,
.cl-pa .cl-pa-campo {
  display: inline-flex; align-items: center; gap: .5em; height: 3.14em;
  padding-inline: .93em; border-radius: .57em; background: #FFFFFF;
  border: 1px solid #DDE3E1; font-size: .93em; white-space: nowrap;
}
.cl-pa .cl-pa-busca { flex: 0 1 26.4em; min-width: 0; color: var(--tenue); }
.cl-pa .cl-pa-busca i { overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-sel { flex: 0 1 auto; justify-content: space-between; gap: 1.6em; color: #374151; }
.cl-pa .cl-pa-campo b { font-weight: 500; color: #1F2937; }
.cl-pa .cl-pa-campo { justify-content: space-between; gap: 1.2em; color: var(--tenue); }
.cl-pa .cl-pa-et { font-size: .93em; color: var(--suave); flex: 0 0 auto; }
.cl-pa .cl-pa-seg { display: inline-flex; align-items: center; height: 3.14em; padding: .29em;
             border-radius: .57em; border: 1px solid #DDE3E1; background: #FFFFFF;
             font-size: .93em; }
.cl-pa .cl-pa-seg i { padding: 0 .8em; line-height: 2.2; border-radius: .4em; color: #4B5563;
               white-space: nowrap; }
.cl-pa .cl-pa-seg i.es-activo { background: var(--azul); color: #FFFFFF; font-weight: 500; }
.cl-pa .cl-pa-marcar { display: inline-flex; align-items: center; gap: .45em; font-size: .93em;
                color: #4B5563; white-space: nowrap; }
.cl-pa .cl-pa-marcar .cl-pa-caja { width: 1.1em; height: 1.1em; border: 1px solid #C3CBD3;
                            border-radius: .2em; flex: 0 0 auto; }
.cl-pa .cl-pa-marcar .cl-pa-ico-mini { stroke: #E3A008; }

/* --- la tabla */
.cl-pa-tabla { margin-top: 1.14em; background: #FFFFFF; border: 1px solid #E8ECEB;
               border-radius: .71em; overflow: hidden; }
.cl-pa .cl-pa-tr { display: flex; align-items: center; gap: .86em; padding: .75em 1.14em;
            min-height: 3.5em; border-bottom: 1px solid #F1F4F3; }
.cl-pa .cl-pa-tr:last-child { border-bottom: 0; }
.cl-pa .cl-pa-cabf { min-height: 3.29em; border-bottom: 1px solid #E8ECEB; }
.cl-pa .cl-pa-th,
.cl-pa .cl-pa-td { flex: 1 1 0; min-width: 0; display: flex; align-items: center;
                       gap: .4em; flex-wrap: wrap; }
.cl-pa .cl-pa-th { font-size: .786em; font-weight: 500; letter-spacing: .03em;
            color: var(--suave); text-transform: none; }
.cl-pa .cl-pa-td { font-size: 1em; color: var(--tinta);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-td > b,
.cl-pa .cl-pa-td > em { min-width: 0; }
/* Van con dos clases porque `.cl-pa .cl-pa-td { flex: 1 1 0 }` tambien las
   tiene, y el atajo `flex` reescribe flex-grow: con una sola clase perdian y
   todas las columnas salian iguales, con el nombre del cliente cortado. */
.cl-pa .w2 { flex-grow: 2; }
.cl-pa .w3 { flex-grow: 3; }
.cl-pa .a-c { justify-content: center; text-align: center; }
.cl-pa .a-d { justify-content: flex-end; text-align: right; }

/* --- piezas de celda */
.cl-pa-nom { font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.cl-pa .cl-pa-rut { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
             font-size: .786em; color: var(--tenue); width: 100%; }
.cl-pa .cl-pa-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
              font-size: .86em; color: #55606B; }
.cl-pa .cl-pa-fuerte { font-weight: 600; color: #111827; }
.cl-pa .cl-pa-tenue { color: var(--tenue); }
.cl-pa .cl-pa-enlace { color: var(--azul); font-weight: 500; }
.cl-pa .cl-pa-si { color: #15803D; font-weight: 500; }
.cl-pa .cl-pa-rama { color: var(--tenue); margin-right: .1em; }
.cl-pa .cl-pa-chip { font-size: .72em; font-weight: 600; letter-spacing: .02em;
              padding: .3em .6em; border-radius: .45em;
              background: #EAF1FB; color: #2563B0; }
.cl-pa .cl-pa-chip.t-gris { background: #EEF1F1; color: #55606B; }
.cl-pa .cl-pa-chip.t-naranja { background: #FDF0E4; color: #9C520D; }
.cl-pa .cl-pa-past { display: inline-flex; align-items: center; gap: .4em; font-size: .82em;
              font-weight: 500; padding: .28em .7em; border-radius: 1em;
              background: #EFF2F2; color: #55606B; white-space: nowrap; }
.cl-pa .cl-pa-past u { width: .45em; height: .45em; border-radius: 50%;
                background: currentColor; flex: 0 0 auto; }
.cl-pa .cl-pa-past.t-ok { background: #E7F6EE; color: #147045; }
.cl-pa .cl-pa-past.t-av { background: #FDF4E3; color: #8A5D0F; }
.cl-pa .cl-pa-past.t-azul { background: #EAF1FB; color: #1F5AA0; }
.cl-pa .cl-pa-past.t-ro { background: #FDEDED; color: #A82626; }
.cl-pa .cl-pa-chip.t-violeta { background: #EFEAFB; color: #5B47A8; }
.cl-pa .cl-pa-chip.t-verde { background: #E4F5EC; color: #147045; }
.cl-pa .cl-pa-min { display: inline-flex; align-items: center; gap: .3em; font-size: .78em;
             font-weight: 500; padding: .38em .6em; border-radius: .45em;
             border: 1px solid #DDE3E1; color: #4B5563; white-space: nowrap; }
.cl-pa .cl-pa-min.t-ok { border-color: #CDE7DA; color: #147045; }
.cl-pa .cl-pa-min.t-av { border-color: #F0DFBE; color: #8A5D0F; }
.cl-pa .cl-pa-min.t-azul { border-color: #CBDDF4; color: #1F5AA0; }
.cl-pa .cl-pa-kebab,
.cl-pa .cl-pa-icoacc { color: var(--tenue); display: inline-flex; }
.cl-pa .cl-pa-icoacc { padding: .25em; }

/* --- pantalla de formulario (los generadores de reportes) */
.cl-pa-forma { margin-top: 1.14em; background: #FFFFFF; border: 1px solid #E8ECEB;
               border-radius: .71em; padding: 1.5em 1.6em 1.3em; }
.cl-pa .cl-pa-forma-fila { display: flex; gap: 1.5em; flex-wrap: wrap; }
.cl-pa .cl-pa-campo-g { display: flex; flex-direction: column; gap: .5em; flex: 1 1 14em; }
.cl-pa .cl-pa-campo-g > span:first-child { font-size: .93em; color: #4B5563; }
.cl-pa .cl-pa-campo-g .cl-pa-sel,
.cl-pa .cl-pa-campo-g .cl-pa-campo { width: 100%; }
.cl-pa .cl-pa-forma-pie { display: flex; justify-content: flex-end; margin-top: 1.5em; }

/* --- piezas que solo salen en algunas pantallas ------------------------- */
/* la miga de pan, encima del titulo */
.cl-pa .cl-pa-migas { display: flex; align-items: center; gap: .45em; font-size: .93em;
                      color: var(--tenue); margin-bottom: .55em; white-space: nowrap; }
.cl-pa .cl-pa-migas i.es-fin { color: #4B5563; }
.cl-pa .cl-pa-miga-sep { color: var(--tenue); }

/* pestanas de seccion: Facturas / Pagos */
.cl-pa .cl-pa-tabs { display: flex; gap: 1.7em; margin-top: 1.2em;
                     border-bottom: 1px solid #E8ECEB; }
.cl-pa .cl-pa-tab { display: inline-flex; align-items: center; gap: .45em; font-size: 1em;
                    color: var(--suave); padding: .55em .15em .7em; white-space: nowrap;
                    border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cl-pa .cl-pa-tab.es-activo { color: var(--azul); font-weight: 500; border-bottom-color: var(--azul); }

/* la banda de antiguedad: cinco cajas de color con el numero grande */
.cl-pa .cl-pa-kpis { display: flex; gap: .86em; margin-top: 1.3em; }
.cl-pa .cl-pa-kpi { flex: 1 1 0; min-width: 0; border-radius: .6em; padding: .75em .9em;
                    display: flex; flex-direction: column; gap: .1em;
                    background: #F4F7F6; border: 1px solid #E8ECEB; }
.cl-pa .cl-pa-kpi span { font-size: .86em; color: var(--suave); }
.cl-pa .cl-pa-kpi b { font-size: 1.6em; font-weight: 600; line-height: 1.15; color: #111827; }
.cl-pa .cl-pa-kpi em { font-size: .86em; color: var(--suave); }
.cl-pa .cl-pa-kpi.t-ok   { background: #ECF8F1; border-color: #D5EDE0; }
.cl-pa .cl-pa-kpi.t-ok b { color: #147045; }
.cl-pa .cl-pa-kpi.t-am   { background: #FDF8E9; border-color: #F2E6C4; }
.cl-pa .cl-pa-kpi.t-am b { color: #8A5D0F; }
.cl-pa .cl-pa-kpi.t-na   { background: #FDF2E9; border-color: #F4DEC9; }
.cl-pa .cl-pa-kpi.t-na b { color: #A8541A; }
.cl-pa .cl-pa-kpi.t-ro   { background: #FDEDED; border-color: #F5D6D6; }
.cl-pa .cl-pa-kpi.t-ro b { color: #A82626; }

/* fila de chips de filtro: Todas / Borrador / Aprobada... */
.cl-pa .cl-pa-chips { display: flex; gap: .5em; margin-top: 1.1em; flex-wrap: wrap; }
.cl-pa .cl-pa-chipf { font-size: .93em; color: #4B5563; background: #FFFFFF;
                      border: 1px solid #DDE3E1; border-radius: .5em;
                      padding: .45em 1em; white-space: nowrap; }
.cl-pa .cl-pa-chipf.es-activo { background: var(--azul); border-color: var(--azul);
                                color: #FFFFFF; font-weight: 500; }
.cl-pa .cl-pa-cuenta { font-size: 1em; color: var(--suave); margin-top: 1.1em; }

/* rejilla de tarjetas: el Centro de Reportes */
.cl-pa .cl-pa-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                        gap: .95em; margin-top: 1.1em; }
.cl-pa .cl-pa-tj, .cl-pa .cl-pa-destacado {
  display: flex; align-items: flex-start; gap: .9em; padding: 1.1em;
  background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .7em; min-width: 0;
}
.cl-pa .cl-pa-destacado { margin-top: 1.2em; align-items: center;
                          background: #FBF4EE; border-color: #F0DECB; }
.cl-pa .cl-pa-tj span, .cl-pa .cl-pa-destacado span { display: flex; flex-direction: column;
                                                      gap: .2em; min-width: 0; flex: 1 1 auto; }
.cl-pa .cl-pa-tj b, .cl-pa .cl-pa-destacado b { font-size: 1em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-tj em, .cl-pa .cl-pa-destacado em { font-size: .93em; color: var(--suave);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-pa .cl-pa-nuevo { font-size: .62em; font-weight: 700; letter-spacing: .06em;
                      background: #FBE3D2; color: #9C4C12; border-radius: .35em;
                      padding: .15em .45em; margin-left: .6em; vertical-align: .15em; }
.cl-pa .cl-pa-tj-ico { width: 2.6em; height: 2.6em; border-radius: .55em; flex: 0 0 auto;
                       display: flex; align-items: center; justify-content: center;
                       background: #EAF1FB; color: #2563B0; }
.cl-pa .cl-pa-tj-ico .cl-pa-ico { width: 1.3em; height: 1.3em; }
.cl-pa .cl-pa-tj-ico.t-naranja { background: #FBE3D2; color: #9C4C12; }
.cl-pa .cl-pa-tj-ico.t-ambar   { background: #FBF0D6; color: #8A5D0F; }
.cl-pa .cl-pa-tj-ico.t-verde   { background: #DDF2E7; color: #147045; }
.cl-pa .cl-pa-tj-ico.t-teal    { background: #D8F0EF; color: #0F6E6A; }
.cl-pa .cl-pa-tj-ico.t-violeta { background: #EAE6FB; color: #5B47A8; }
.cl-pa .cl-pa-tj-ico.t-rojo    { background: #FBDFDF; color: #A82626; }

.cl-pa .cl-pa-doslin { display: flex; flex-direction: column; min-width: 0; gap: .1em; }
.cl-pa .cl-pa-alias { font-size: .86em; color: var(--tenue); }
.cl-pa .cl-pa-mini-ico { width: 1.85em; height: 1.85em; border-radius: .42em; }
.cl-pa .cl-pa-mini-ico .cl-pa-ico { width: 1em; height: 1em; }

/* --- pantalla de panel: metricas, grafico y barras de reparto */
.cl-pa .cl-pa-metricas { display: flex; gap: .8em; margin-top: 1.2em; }
.cl-pa .cl-pa-metrica { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .7em;
                        background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .6em;
                        padding: .7em .8em; }
.cl-pa .cl-pa-metrica span { display: flex; flex-direction: column; min-width: 0; }
.cl-pa .cl-pa-metrica em { font-size: .86em; color: var(--suave); white-space: nowrap;
                           overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-metrica b { font-size: 1.28em; font-weight: 600; color: #111827; white-space: nowrap; }
.cl-pa .cl-pa-metrica .cl-pa-tj-ico { width: 2.15em; height: 2.15em; }

.cl-pa .cl-pa-graf { margin-top: 1.1em; background: #FFFFFF; border: 1px solid #E8ECEB;
                     border-radius: .7em; padding: 1.1em 1.2em .9em; }
.cl-pa .cl-pa-graf > b { display: block; font-size: 1.14em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-graf > em { display: block; font-size: .93em; color: var(--tenue); margin-bottom: .5em; }
.cl-pa .cl-pa-svg { width: 100%; height: auto; aspect-ratio: 1000 / 300; display: block; }
.cl-pa .cl-pa-svg .cl-pa-eje { fill: #8A959F; font-size: 13px; font-family: inherit; }
.cl-pa .cl-pa-svg .cl-pa-eje-d { fill: #C98A2E; }
.cl-pa .cl-pa-leyenda { display: flex; flex-wrap: wrap; gap: 1.1em; justify-content: center;
                        font-size: .93em; color: #4B5563; margin-top: .4em; }
.cl-pa .cl-pa-leyenda span { display: inline-flex; align-items: center; gap: .4em; }
.cl-pa .cl-pa-leyenda i { width: .8em; height: .8em; border-radius: .2em; display: inline-block; }

.cl-pa .cl-pa-barras { display: flex; gap: .8em; margin-top: 1em; }
.cl-pa .cl-pa-barra { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .7em;
                      background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .6em;
                      padding: .8em .9em; }
.cl-pa .cl-pa-barra > span { font-size: .93em; color: var(--suave); white-space: nowrap; }
.cl-pa .cl-pa-barra > i { flex: 1 1 auto; height: .58em; border-radius: 1em; background: #EEF1F1;
                          overflow: hidden; }
.cl-pa .cl-pa-barra > i > u { display: block; height: 100%; background: var(--azul);
                              border-radius: 1em; }
.cl-pa .cl-pa-barra > b { font-size: 1em; font-weight: 600; color: #111827; white-space: nowrap; }

/* --- secciones plegables (cruce contable) */
.cl-pa .cl-pa-secciones { display: flex; flex-direction: column; gap: .8em; margin-top: 1.1em; }
.cl-pa .cl-pa-seccion { background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .7em;
                        overflow: hidden; }
.cl-pa .cl-pa-seccion-cab { display: flex; align-items: center; gap: .7em; padding: .95em 1.1em;
                            font-size: 1.07em; color: #111827; }
.cl-pa .cl-pa-seccion-cab .cl-pa-chev { margin-left: 0; color: var(--tenue); font-size: 1.1em; }
.cl-pa .cl-pa-seccion-cab .cl-pa-chev.es-abierta { transform: rotate(90deg); }
.cl-pa .cl-pa-seccion-cab span { flex: 1 1 auto; }
.cl-pa .cl-pa-cuenta-pill { background: #FDEDED; color: #A82626; font-size: .86em;
                            font-weight: 600; border-radius: 1em; padding: .2em .7em; }
.cl-pa .cl-pa-seccion .cl-pa-tabla { margin: 0; border: 0; border-top: 1px solid #F1F4F3;
                                     border-radius: 0; }

/* --- el detalle en dialogo, encima de su pantalla */
.cl-pa.con-dialogo .cl-pa-cuerpo { filter: blur(.5px); }
.cl-pa .cl-pa-velo { position: absolute; inset: 0; background: rgba(23, 33, 40, .38); }
.cl-pa .cl-pa-dialogo { position: absolute; left: 50%; top: 4%; transform: translateX(-50%);
                        width: min(78%, 55em); background: #FFFFFF; border-radius: .9em;
                        box-shadow: 0 24px 60px rgba(15, 25, 35, .28); overflow: hidden; }
.cl-pa .cl-pa-dialogo-cab { display: flex; align-items: center; gap: .7em;
                            padding: 1.1em 1.3em .8em; }
.cl-pa .cl-pa-dialogo-cab > b { font-size: 1.3em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-cerrar-d { margin-left: auto; color: var(--tenue); font-size: 1.3em; }
.cl-pa .cl-pa-dialogo-cuerpo { padding: 0 1.3em 1.1em; }
.cl-pa .cl-pa-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                      gap: .9em 1.6em; margin-bottom: 1em; }
.cl-pa .cl-pa-pares em { display: block; font-size: .93em; color: var(--suave); }
.cl-pa .cl-pa-pares b { display: block; font-size: 1.07em; color: #111827; font-weight: 500; }
.cl-pa .cl-pa-rotulo { font-size: .86em; letter-spacing: .05em; color: var(--suave);
                       margin: .3em 0 .5em; }
.cl-pa .cl-pa-dialogo .cl-pa-tabla { border: 0; border-top: 1px solid #EEF1F1; border-radius: 0;
                                     margin: 0; }
/* dentro del dialogo la tabla va mas apretada: cabe la glosa entera */
.cl-pa .cl-pa-dialogo .cl-pa-mono { font-size: .8em; }
.cl-pa .cl-pa-dialogo .cl-pa-tr { padding-inline: 0; }
.cl-pa .cl-pa-dialogo-pie .cl-pa-bot { padding-inline: .8em; font-size: .88em; }
.cl-pa .cl-pa-totales { display: flex; align-items: center; gap: .86em; padding: .8em 1.14em;
                        background: #F7FAF9; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-totales b { flex: 1 1 auto; }
.cl-pa .cl-pa-totales span { flex: 0 0 auto; min-width: 8em; text-align: right; }
.cl-pa .cl-pa-adjuntos { display: flex; align-items: center; gap: .5em; margin-top: 1em;
                         font-size: .93em; color: var(--suave); }
.cl-pa .cl-pa-dialogo-pie { display: flex; gap: .6em; padding: 1em 1.3em;
                            border-top: 1px solid #EEF1F1; flex-wrap: wrap; }

/* --- contadores, estado vacio y dialogo de alta */
.cl-pa .cl-pa-contadores { display: flex; gap: .6em; margin-top: 1.2em; }
.cl-pa .cl-pa-contador { flex: 1 1 0; min-width: 0; text-align: center; background: #FFFFFF;
                         border: 1px solid #E8ECEB; border-radius: .6em; padding: .8em .5em; }
.cl-pa .cl-pa-contador b { display: block; font-size: 1.43em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-contador span { display: block; font-size: .86em; color: var(--suave); }
.cl-pa .cl-pa-contador.t-teal b { color: #0F6E6A; }
.cl-pa .cl-pa-contador.t-violeta b { color: #5B47A8; }
.cl-pa .cl-pa-contador.t-verde b { color: #147045; }
.cl-pa .cl-pa-contador.t-rojo b { color: #A82626; }
.cl-pa .cl-pa-contador.t-naranja b { color: #9C4C12; }

.cl-pa .cl-pa-vacio { display: flex; flex-direction: column; align-items: center; gap: .7em;
                      padding: 5em 1em; color: var(--tenue); font-size: 1.07em; }
.cl-pa .cl-pa-ico-vacio { width: 3.5em; height: 3.5em; stroke: #CBD3DA; stroke-width: 1.4;
                          fill: none; }

.cl-pa .cl-pa-entrada { display: flex; align-items: center; height: 3.14em; padding-inline: .93em;
                        border-radius: .57em; background: #FFFFFF; border: 1px solid #DDE3E1;
                        font-size: .93em; color: var(--tenue); overflow: hidden;
                        white-space: nowrap; text-overflow: ellipsis; }
.cl-pa .cl-pa-campo-g.ancho { flex-basis: 100%; }
.cl-pa .cl-pa-dialogo .cl-pa-forma-fila { display: flex; flex-wrap: wrap; gap: .9em 1.1em;
                                          margin-bottom: .3em; }
.cl-pa .cl-pa-aviso-caja { display: flex; align-items: flex-start; gap: .6em; padding: .9em 1em;
                           background: #FDF4EC; border: 1px solid #F2DFCB; border-radius: .6em;
                           margin-bottom: 1em; }
.cl-pa .cl-pa-aviso-caja .cl-pa-ico-mini { stroke: #C2701A; margin-top: .15em; }
.cl-pa .cl-pa-aviso-caja span { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.cl-pa .cl-pa-aviso-caja b { font-size: 1em; color: #A8541A; font-weight: 500; }
.cl-pa .cl-pa-aviso-caja em { font-size: .93em; color: var(--suave); }
.cl-pa .cl-pa-resumen { background: #F7FAF9; border-radius: .6em; padding: .8em 1em; margin-top: 1em; }
.cl-pa .cl-pa-resumen > div { display: flex; justify-content: space-between; padding: .3em 0;
                              font-size: 1em; color: var(--suave); }
.cl-pa .cl-pa-resumen > div.es-total { border-top: 1px solid #E4E9E8; margin-top: .3em;
                                       padding-top: .6em; color: #111827; font-weight: 600; }
.cl-pa .cl-pa-resumen b { color: #111827; }

/* --- fichas de bodega y fila desplegada */
.cl-pa .cl-pa-ficha { background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .7em;
                      padding: 1em 1.1em .8em; display: flex; flex-direction: column; gap: .7em;
                      min-width: 0; }
.cl-pa .cl-pa-ficha.es-dest { border-color: #D6DEDC; box-shadow: 0 4px 14px rgba(20, 35, 45, .07); }
.cl-pa .cl-pa-ficha-cab { display: flex; align-items: center; gap: .7em; }
.cl-pa .cl-pa-ficha-cab span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cl-pa .cl-pa-ficha-cab b { font-size: 1.07em; font-weight: 600; color: #111827;
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-pa .cl-pa-estrella { color: #96660A; font-size: 1.1em; }
.cl-pa .cl-pa-ficha-dir { font-size: .93em; color: var(--suave);
                          border-bottom: 1px solid #F1F4F3; padding-bottom: .7em; }
.cl-pa .cl-pa-ficha-pie { display: flex; align-items: center; gap: .6em; font-size: .93em;
                          color: var(--suave); }
.cl-pa .cl-pa-ficha-pie span { flex: 1 1 auto; }
.cl-pa .cl-pa-ficha-pie .cl-pa-ico-mini { stroke: #A8B2BB; }

.cl-pa .cl-pa-tr.es-marcada { background: #FDF6F1; }
.cl-pa .cl-pa-detalle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                        gap: .9em 1.4em; padding: 1em 1.14em 1.2em; background: #FCFDFD;
                        border-bottom: 1px solid #F1F4F3; }
.cl-pa .cl-pa-detalle em { display: block; font-size: .93em; color: var(--tenue); }
.cl-pa .cl-pa-detalle b { display: block; font-size: 1em; color: #1F2937; font-weight: 400; }

/* --- franja de dato, campo suelto, paneles de configuracion */
.cl-pa .cl-pa-banda { display: flex; align-items: center; gap: .6em; margin-top: 1.2em;
                      background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .6em;
                      padding: .9em 1.1em; font-size: 1em; color: var(--suave); }
.cl-pa .cl-pa-banda .cl-pa-ico-mini { stroke: #A82626; }
.cl-pa .cl-pa-banda b { color: #A82626; font-weight: 600; }
.cl-pa .cl-pa-banda em { color: var(--tenue); margin-left: .6em; }
.cl-pa .cl-pa-suelto { margin-top: 1.2em; max-width: 24em; }
.cl-pa .cl-pa-suelto > span:first-child { font-weight: 500; color: #374151; }
.cl-pa .cl-pa-sin-filas { padding: 2.2em 1em; text-align: center; color: var(--tenue);
                          font-size: 1em; }
.cl-pa .cl-pa-seccion-cab { font-weight: 500; }
.cl-pa .cl-pa-seccion.es-suelta { border-top: 0; }

.cl-pa .cl-pa-paneles { display: flex; flex-direction: column; gap: 1.1em; margin-top: 1.2em; }
.cl-pa .cl-pa-panel { background: #FFFFFF; border: 1px solid #E8ECEB; border-radius: .7em;
                      padding: 1.2em 1.3em 1.1em; }
.cl-pa .cl-pa-panel-cab { display: flex; align-items: center; gap: .7em; margin-bottom: .2em; }
.cl-pa .cl-pa-panel-cab b { font-size: 1.14em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-panel-sub { margin: 0 0 1em; font-size: .93em; color: var(--suave); }
.cl-pa .cl-pa-marca-fila { display: flex; align-items: center; gap: .6em; padding: .8em 1em;
                           border-radius: .5em; margin: .8em 0 1.1em; background: #F5F8F7; }
.cl-pa .cl-pa-marca-fila.t-violeta { background: #F3F0FC; }
.cl-pa .cl-pa-marca-fila b { font-size: 1em; color: #1F2937; font-weight: 500; }
.cl-pa .cl-pa-marca-fila em { font-size: .93em; color: var(--tenue); }
.cl-pa .cl-pa-caja.es-marcada { background: #6D4AC8; border-color: #6D4AC8; position: relative; }
.cl-pa .cl-pa-caja.es-marcada::after { content: ""; position: absolute; left: 50%; top: 45%;
    width: .28em; height: .55em; border: solid #fff; border-width: 0 .13em .13em 0;
    transform: translate(-50%, -50%) rotate(45deg); }
.cl-pa .cl-pa-ayuda-txt { font-size: .86em; color: var(--tenue); }
.cl-pa .cl-pa-entrada.es-valor { color: #1F2937; }
.cl-pa .cl-pa-marcas { display: flex; gap: 1.6em; margin-top: 1em; flex-wrap: wrap; }
.cl-pa .cl-pa-panel-pie { display: flex; justify-content: flex-end; margin-top: 1.1em; }

/* --- el tablero: rejilla de indicadores en color, como el panel del hero */
.cl-pa .cl-pa-azulejos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                         gap: .9em; margin-top: 1.2em; }
.cl-pa .cl-pa-azulejo { display: flex; align-items: flex-start; justify-content: space-between;
                        gap: .6em; border-radius: .7em; padding: 1em 1.1em; min-width: 0; }
.cl-pa .cl-pa-az-txt { display: flex; flex-direction: column; gap: .12em; min-width: 0; }
.cl-pa .cl-pa-azulejo em { font-size: .93em; color: #55606B; letter-spacing: .02em; }
.cl-pa .cl-pa-azulejo b { font-size: 1.6em; font-weight: 600; color: #111827; white-space: nowrap; }
.cl-pa .cl-pa-azulejo u { font-size: .86em; color: var(--tenue); }

/* --- AÑ. El numero no se pinta fuera de su baldosa ------------------------ */
/* Medido sobre las 136 pantallas calcadas del sitio: 18 tenian tinta pintada
   fuera de su caja y 10 tenian tinta ENCIMA de otra tinta. Siempre el mismo
   molde: una baldosa `flex: 1 1 0; min-width: 0` -kpi, metrica, contador o
   azulejo- con un <b> de 1.28em a 1.6em dentro. Un monto chileno es UN solo
   token sin espacios ("$43.155.350"): su ancho minimo de contenido es el token
   entero y no hay donde partirlo. En Reportes de Compras la caja encoge a 20 px
   y el texto sigue midiendo 104 px; como no recorta ni la baldosa ni el <b>,
   esos 84 px se pintan sobre la baldosa vecina -27,3 px de tinta sobre tinta a
   518 px, 22,8 px a 281 px-. `min-width: 0` deja encoger la CAJA, no la tinta.
   El <em> del rotulo si recorta desde la linea 2342 y el <b> no: por eso se
   veia el numero y no la etiqueta.
   El relleno negativo no mueve la maqueta: `overflow` recorta por el borde de
   RELLENO, asi que .16em de relleno mas -.16em de margen solo agrandan la
   ventana de recorte. Sin el, `line-height: 1.15` deja la caja 1,1 px mas baja
   que el glifo y el corte vertical subia de 8 a 20 pantallas. Con el: 8 y 8. */
.cl-pa :is(.cl-pa-kpi, .cl-pa-metrica, .cl-pa-contador, .cl-pa-azulejo) :is(b, em, span, u) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  padding-block: .16em; margin-block: -.16em;
}

.cl-pa .cl-pa-azulejo.t-azul    { background: #EEF3FD; }
.cl-pa .cl-pa-azulejo.t-ambar   { background: #FDF7E8; }
.cl-pa .cl-pa-azulejo.t-verde   { background: #ECF8F1; }
.cl-pa .cl-pa-azulejo.t-teal    { background: #E9F7F6; }
.cl-pa .cl-pa-azulejo.t-naranja { background: #FDF3EB; }
.cl-pa .cl-pa-azulejo.t-violeta { background: #F4F1FD; }

/* --- tarjetas de calculo del finiquito */
.cl-pa .cl-pa-bloques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                        gap: .9em; margin: .6em 0 1em; }
.cl-pa .cl-pa-bloque { border: 1px solid #E8ECEB; border-radius: .6em; padding: .9em 1em;
                       display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.cl-pa .cl-pa-bloque-cab { display: flex; align-items: flex-start; justify-content: space-between;
                           gap: .5em; }
.cl-pa .cl-pa-bloque-cab b { font-size: 1em; font-weight: 600; color: #111827; }
.cl-pa .cl-pa-bloque-sub { font-size: .86em; color: var(--tenue); margin-bottom: .3em; }
.cl-pa .cl-pa-bloque-fila { display: flex; justify-content: space-between; gap: .6em;
                            font-size: .93em; color: var(--suave); }
.cl-pa .cl-pa-bloque-fila b { color: #1F2937; font-weight: 500; }
.cl-pa .cl-pa-formula { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78em;
                        color: var(--tenue); background: #F7FAF9; border-radius: .4em;
                        padding: .5em .6em; text-align: center; }
.cl-pa .cl-pa-bloque-pie { display: flex; justify-content: space-between; align-items: baseline;
                           border-top: 1px solid #F1F4F3; margin-top: .4em; padding-top: .5em; }
.cl-pa .cl-pa-bloque-pie span { font-size: .8em; letter-spacing: .05em; color: var(--tenue); }
.cl-pa .cl-pa-bloque-pie b { font-size: 1.14em; font-weight: 600; color: #111827; }

/* la captura de movil es vertical: el marco acompana */
.cl-pa-marco.es-movil { aspect-ratio: 900 / 1948; }

/* La portada de Reportes mete el panel dentro de .ds-screen -un marco con
   borde, radio 20 y sombra- que mide 1280 px, pero el panel conserva su
   ancho natural de 900: quedaban dos bandas blancas de 190x562 DENTRO del
   marco, una a cada lado, con solo 1 px arriba y abajo. Llenando el hueco
   el panel pasa a 1278x798 -+42% - sin banda muerta. En el telefono el
   marco vive dentro de .container -20 px por lado- y ademas se recorta a
   100vw-40: se le devuelven 12 px por lado y la captura pasa de 348x217 a
   372x232 -+6,9%-. .ds-screen solo existe en Reportes. */
.ds-screen > .cl-pa-marco { width: 100%; }
@media (max-width: 720px) {
  .ds-screen { width: calc(100% + 24px); margin-inline: -12px; }
}

/* En el telefono la pila de capturas del hero no declara ancho -se lo daba la
   <img>- y el calco, que pide el 100% de un padre que se ajusta a su
   contenido, se quedaba en nada. Se le devuelve el ancho a la pila: asi el
   100% del marco tiene contra que medirse y la pantalla no se sale. */
@media (max-width: 720px) {
  /* En vw y no en %: la pila del hero cuelga de contenedores que se ajustan a
     su contenido -se lo daba la <img>- y cualquier porcentaje se quedaba en
     cero. El viewport si es una medida firme y no depende del padre; 40 px de
     margen dejan la pantalla dentro del telefono. */
  .cl-pa-marco { width: min(900px, calc(100vw - 40px)); }
}

/* --- la aplicacion en una ventana estrecha. Se retiran por este orden:
   columnas de prioridad 1, luego las de prioridad 2 y la barra lateral pasa a
   iconos; los filtros se guardan porque en una miniatura no informan de nada
   y se comen la altura de tres filas de datos.                             */
@container (max-width: 1080px) {
  .cl-pa .p1 { display: none; }
.cl-pa .cl-pa-busca { flex-basis: 16em; }
}
@container (max-width: 820px) {
  .cl-pa .p2 { display: none; }
.cl-pa .cl-pa-lat { width: 3.4em; padding-inline: .5em; }
.cl-pa .cl-pa-emp,
.cl-pa .cl-pa-item i,
.cl-pa .cl-pa-chev,
.cl-pa .cl-pa-cerrar { display: none; }
.cl-pa .cl-pa-item { justify-content: center; padding-inline: 0; }
.cl-pa .cl-pa-marca { justify-content: center; padding-inline: 0; }
.cl-pa .cl-pa-marca svg { height: 1.5em; }
.cl-pa .cl-pa-top { height: 2.9em; padding-inline: 1em; gap: .8em; }
.cl-pa .cl-pa-cuerpo { padding: 1.1em 1.1em 0; }
.cl-pa .cl-pa-cab h4 { font-size: 1.35em; }
.cl-pa .cl-pa-cab p { font-size: .88em; }
.cl-pa .cl-pa-filtros { display: none; }
.cl-pa .cl-pa-tabla { margin-top: .9em; }
.cl-pa .cl-pa-tr { min-height: 3.3em; padding-inline: .85em; gap: .6em; }
.cl-pa .cl-pa-cabf { min-height: 2.7em; }
.cl-pa .cl-pa-forma { margin-top: .9em; padding: 1.1em; }
}
@container (max-width: 560px) {
  .cl-pa .cl-pa-cab h4 { font-size: 1.2em; }
  .cl-pa .cl-pa-acc, .cl-pa .cl-pa-acc-der { display: none; }
  /* la fila de chips partia en dos lineas y la segunda se quedaba cortada por
     el borde del marco: a este ancho no informa de nada y estorba */
  .cl-pa .cl-pa-migas, .cl-pa .cl-pa-chips { display: none; }
  .cl-pa .cl-pa-kpis, .cl-pa .cl-pa-contadores, .cl-pa .cl-pa-metricas { gap: .5em; }
  .cl-pa .cl-pa-azulejos, .cl-pa .cl-pa-rejilla,
  .cl-pa .cl-pa-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Las tarjetas apiladas del hero de cada modulo miden 280 px: ahi la
   aplicacion se queda en el titulo y la tabla. Sin esto la mitad inferior de
   esas tarjetas salia en blanco, que es justo lo que no puede pasar. */
@container (max-width: 420px) {
  .cl-pa { --t: max(11px, 3.9cqw); }
  .cl-pa .cl-pa-top { display: none; }
  .cl-pa .cl-pa-cuerpo { padding: .8em .8em 0; }
  .cl-pa .cl-pa-cab h4 { font-size: 1.15em; }
  .cl-pa .cl-pa-cab p { font-size: .85em; }
  .cl-pa .cl-pa-lat { width: 2.6em; padding-block: .8em; }
  .cl-pa .cl-pa-tabla { margin-top: .6em; }
  .cl-pa .cl-pa-tr { min-height: 2.9em; padding: .5em .7em; gap: .45em; }
  .cl-pa .cl-pa-cabf { min-height: 2.3em; }
  .cl-pa .cl-pa-azulejos, .cl-pa .cl-pa-rejilla, .cl-pa .cl-pa-bloques,
  .cl-pa .cl-pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* `.cl-pa-kpis` es `display: flex` (linea 2277) y sobre un flex la propiedad
     `grid-template-columns` se ignora en silencio: la regla de arriba estaba
     muerta y a 281 px las cinco baldosas seguian saliendo en UNA fila de 20 px
     -medido: 5 hijos, 1 sola linea visual-. Con `display: grid` el carril pasa
     a dos columnas y el monto de 104 px de tinta cabe. Lo mismo en el bloque
     de 340 px para metricas y contadores. */
  .cl-pa .cl-pa-kpis { display: grid; }
  .cl-pa .cl-pa-graf, .cl-pa .cl-pa-paneles, .cl-pa .cl-pa-forma { margin-top: .6em; }
  /* un estado con dos pastillas empujaba el importe fuera de la tarjeta:
     a este ancho manda la primera, que es la que dice el estado real */
  .cl-pa .cl-pa-td .cl-pa-past + .cl-pa-past { display: none; }
}

/* El calco retrata el producto: fija sus propios colores para no heredar los
   del sitio, igual que hace el panel del hero. */
.cl-pa :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }
.cl-pa p, .cl-pa span, .cl-pa b, .cl-pa strong, .cl-pa i, .cl-pa em { font-family: inherit; }

/* Al ampliarla se ve entera: el visor le da 1400 px,
que es el ancho al que se
   tomo la captura,
asi que ahi el calco ES la captura. */
.lightbox .cl-ui { width: min(1500px, 94vw); max-height: 88vh; border-radius: 12px;
                   box-shadow: 0 30px 80px rgba(0, 0, 0, .5); cursor: default; }
.lightbox .cl-pa-marco { width: min(1400px, 94vw); aspect-ratio: 900 / 562;
                         max-height: 88vh; cursor: default; border-radius: 12px;
                         box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }

/* --- AM. Remates de la revision de marca ---------------------------------
   Cinco cosas que salieron de revisar el sitio con lupa buscando "que mas
   falta". Las tres primeras son defectos de verdad; las dos ultimas, tamano
   regalado.                                                               */

/* 1. La cruz de "no incluido" de la tabla de Onboarding se pintaba con el
   color de las lineas finas: 1,21:1 sobre blanco. A esa distancia la celda se
   lee VACIA, y una celda vacia dice "sin dato", no "no lo trae". En la tabla
   con la que el cliente elige plan, eso no es un detalle estetico.
   Regresion mia: `--cl-border` se redefinio a `var(--line)` en el pase de
   paleta y arrastro a `.no-val`, que lo usaba para dibujar el aspa.
   Se iguala al 5,05:1 que ya tenia la misma cruz en Partners.            */
.no-val, td .no-val { color: #5A7090 !important; }

/* 2. La bandera de Colombia salia aplastada -1,15 en vez de 1,5- porque en su
   fila el texto del organismo es el mas largo de la lista y la comprimia. El
   `flex:none` de la regla original no basta: quien encoge es el contenedor.  */
.bandera { max-width: none; flex: 0 0 auto; }

/* 3. El logotipo pide `font-weight="800"` pero la fuente variable embebida se
   corta en 700: el navegador sintetiza el grosor o se queda en 700, y en
   ambos casos la palabra "clobi" no se dibuja como el logotipo manda.       */
.c-logo text, .c-iso text { font-synthesis-weight: none; }

/* 4. El carril de las pantallas recalcadas ensena el logotipo cuando cabe y el
   isotipo solo cuando no. Medido: en la galeria a 598 px el logotipo completo
   se dibujaba a 31x9 px -"clobi" en 4,7 px de alto, la bajada en 1,2- y ademas
   aplastado, porque el `max-width:100%` de la hoja del sitio lo comprimia
   contra el ancho del carril en vez de dejarlo crecer. 135 de las 175
   apariciones del logo del sitio estaban asi.
   El umbral es el mismo en el que el carril se queda con los iconos. */
.cl-pa .c-iso, .cl-ui .c-iso { display: none; }
.cl-pa .cl-pa-marca .c-logo,
.cl-ui .cl-ui-marca .c-logo { max-width: none; }
/* El !important es obligatorio y no es pereza: marca.logo() escribe
   `style="...;display:block"` EN LINEA en el propio SVG, y un estilo en linea
   gana a cualquier regla de hoja que no lo lleve. Es el unico caso donde no
   hay alternativa. El isotipo, que es codigo nuevo, no fija display en linea
   precisamente para no necesitarlo. */
@container (max-width: 820px) {
  .cl-pa .cl-pa-marca .c-logo { display: none !important; }
  .cl-pa .cl-pa-marca .c-iso { display: block; height: 1.5em; margin-inline: auto; }
}
@container (max-width: 700px) {
  .cl-ui .cl-ui-marca .c-logo { display: none !important; }
  .cl-ui .cl-ui-marca .c-iso { display: block; height: 1.5em; margin-inline: auto; }
}

/* 5. La cabecera del panel es un retrato del producto, no un titulo de la
   pagina: sale del esquema de encabezados para que el indice real de cada
   pagina no herede los "Documentos de Venta" de quince pantallas simuladas. */
.cl-pa .cl-pa-cab .cl-pa-tit { margin: 0 0 .25em; font-size: 1.714em; font-weight: 600;
  letter-spacing: -.015em; color: #111827; line-height: 1.15; }

/* --- AN. Ranuras diminutas y la maqueta de telefono ----------------------- */
/* Medido: de los 137 calcos hay 14 por debajo de 300 px de ancho -seis de
   200x125 en los iconos de caracteristica de Nomina, dos de 232x145 en
   Contabilidad y uno de 116x251 dentro del telefono de Reportes-. A ese
   tamano la tabla no encoge: `.cl-pa-past` es un inline-flex con
   `white-space: nowrap`, asi que su ancho minimo es el de la pastilla entera
   y la fila desborda el marco, que tiene overflow:hidden. El resultado eran
   palabras cortadas a media letra -"Roberto F", "Jefe de O", "Ac"-, que no se
   lee como un recorte deliberado sino como un fallo de dibujo. */
@container (max-width: 340px) {
  /* Sin cabecera de tabla: seis rotulos de columna en 200 px son seis manchas */
  .cl-pa .cl-pa-tr.cl-pa-cabf { display: none; }
  .cl-pa .cl-pa-tr { padding: .5em .65em; gap: .5em; min-height: 0; }
  /* Se deja la primera columna -el nombre, que es de lo que trata la fila- y
     la del estado. Las demas no caben sin partirse. */
  .cl-pa .cl-pa-tr > .cl-pa-td:not(:first-of-type):not(:has(.cl-pa-past)):not(:has(.cl-pa-chip)) {
    display: none;
  }
  /* display:block y no flex: `text-overflow: ellipsis` solo recorta texto que
     este DENTRO de una caja de bloque. Con la celda en flex el texto pasa a ser
     un item anonimo y se sale entero, que es lo que partia "Maria Gonzalez S"
     a media letra. La pastilla, que es inline-flex, sigue igual de bien. */
  .cl-pa .cl-pa-tr > .cl-pa-td { display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .cl-pa .cl-pa-tr > .cl-pa-td.a-d { text-align: right; }
  .cl-pa .cl-pa-tr > .cl-pa-td.a-c { text-align: center; }
  /* la pastilla ya puede encoger: sin esto sigue imponiendo su ancho minimo */
  .cl-pa .cl-pa-past, .cl-pa .cl-pa-chip, .cl-pa .cl-pa-min {
    min-width: 0; max-width: 100%; overflow: hidden;
  }
  .cl-pa .cl-pa-cab p { display: none; }
  .cl-pa .cl-pa-azulejos, .cl-pa .cl-pa-rejilla, .cl-pa .cl-pa-bloques,
  .cl-pa .cl-pa-kpis, .cl-pa .cl-pa-metricas, .cl-pa .cl-pa-contadores {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* El marco .es-movil es un telefono -900/1948, la proporcion de la maqueta de
   la portada de Reportes- y hasta ahora le metiamos dentro el panel de
   ESCRITORIO: a 116 px de ancho el carril se comia 30 y solo cabia el saludo
   partido en tres lineas. Ningun ERP ensena su carril lateral en el telefono;
   ensena la cabecera y los indicadores apilados. Eso es lo que se pinta. */
.cl-pa-marco.es-movil .cl-pa-lat,
.cl-pa-marco.es-movil .cl-pa-top,
.cl-pa-marco.es-movil .cl-pa-migas,
.cl-pa-marco.es-movil .cl-pa-filtros,
.cl-pa-marco.es-movil .cl-pa-cuenta { display: none; }
.cl-pa-marco.es-movil .cl-pa-main { width: 100%; }
.cl-pa-marco.es-movil .cl-pa-cuerpo { padding: .9em .75em; }
.cl-pa-marco.es-movil .cl-pa-azulejos,
.cl-pa-marco.es-movil .cl-pa-kpis,
.cl-pa-marco.es-movil .cl-pa-rejilla,
.cl-pa-marco.es-movil .cl-pa-bloques { grid-template-columns: minmax(0, 1fr); display: grid; }
.cl-pa-marco.es-movil .cl-pa-tabs { gap: .9em; overflow: hidden; }
/* el titulo del saludo, en una sola linea: a lo ancho de un telefono, tres
   lineas de titular dejan fuera todo lo demas */
.cl-pa-marco.es-movil .cl-pa-cab .cl-pa-tit { font-size: 1.25em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* ampliado, sigue siendo un telefono: no se estira a 1400 px de ancho */
.lightbox .cl-pa-marco.es-movil { width: min(380px, 84vw); aspect-ratio: 900 / 1948; }

/* El telefono de la portada de Reportes mide 116 px de ancho. Ahi el suelo
   tipografico de 11 px del resto del calco no es un suelo: es un techo que
   parte las palabras -"VENTA / S MES", "$15.458.10|0"-. A este tamano lo
   honesto es que la letra baje con la caja, porque el panel se amplia de un
   clic y en el visor -380 px- el clamp lo devuelve a 15 px, que es el tamano
   real de un telefono. */
.cl-pa-marco.es-movil .cl-pa { --t: clamp(8px, 6.2cqw, 15px); }
.cl-pa-marco.es-movil .cl-pa-azulejo { padding: .7em .8em; }
.cl-pa-marco.es-movil .cl-pa-azulejo .cl-pa-tj-ico { display: none; }
/* Lo mismo, medido, para los azulejos del calco de ESCRITORIO. El azulejo es
   un flex con el texto a la izquierda y el icono -2,6em, flex 0 0 auto- a la
   derecha: el icono no encoge nunca y la caja del texto si -min-width: 0-,
   asi que la cifra, que va en nowrap, se pinta fuera de su caja y pasa por
   DEBAJO del icono, que se dibuja despues. Medido en el panel principal de
   Reportes: caja de texto 82 px, "$233.844.700" 144 px, icono a 34 px del
   borde -> 55 px de cifra tapados; en el telefono -marco de 350- 77 px.
   El azulejo pasa a ser contenedor y se consulta su ancho: por debajo de
   15em de caja de contenido no caben cifra -11,1em-, hueco -0,6em- e icono
   -2,6em-, asi que el icono se retira y la cifra baja a 1,1em para caber
   entera. Por encima de 15em -galeria, 236,8 px- no se toca nada. El calco
   de telefono queda fuera del cambio de tamano: ahi la cifra ya vive con
   ellipsis a 12,8 px y bajarla la dejaria en 8,8. */
.cl-pa .cl-pa-azulejo { container-type: inline-size; }
@container (max-width: 15em) {
  .cl-pa .cl-pa-azulejo .cl-pa-tj-ico { display: none; }
  .cl-pa-marco:not(:where(.es-movil)) .cl-pa .cl-pa-azulejo b { font-size: 1.1em; }
}
.cl-pa-marco.es-movil .cl-pa-azulejo em,
.cl-pa-marco.es-movil .cl-pa-azulejo b,
.cl-pa-marco.es-movil .cl-pa-azulejo u,
.cl-pa-marco.es-movil .cl-pa-kpi span,
.cl-pa-marco.es-movil .cl-pa-kpi b,
.cl-pa-marco.es-movil .cl-pa-kpi em {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cl-pa-marco.es-movil .cl-pa-az-txt { width: 100%; }

/* --- AP. ALTERNATIVA A para las cifras del hero de quienes somos ---------
   Medido a 1400px: .stat-big va a 64px/700 con interletra -3px (-4,7% del
   cuerpo) y min-width:120px. "20+" y "6" ocupan esos 120px y "100%" necesita
   171,4, asi que las etiquetas arrancan en x=338, x=338 y x=389,4: el borde
   izquierdo del texto se parte 51,4px en la tercera fila. Ademas la cifra
   mide 4,55 veces el rotulo que la nombra (64px contra 14,08px). Se fija una
   columna de 176px -cabe "100%" con 4,6px de sobra-, se alinea por base
   tipografica, se afloja la interletra y se bajan los 64px a 44px para que
   la cifra acompane al dato en vez de taparlo. Ninguna cifra cambia.      */
.hero .stats-stack .stat-row { display: grid; grid-template-columns: 176px 1fr; column-gap: 20px; align-items: baseline; }
.hero .stats-stack .stat-big { min-width: 0; font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.hero .stats-stack .stat-info strong { font-size: 15px; }
.who-stats .ws-num { line-height: 1.06; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
/* El pie de cada indicador va en <u> -asi lo transcribi de la captura- y el
   navegador lo subraya por defecto: un dato como "3 documentos" parecia un
   enlace. No lo es en ninguna de las pantallas. */
.cl-pa u:not(:empty), .cl-ui u:not(:empty) { text-decoration: none; }

/* --- AO. El verde solo donde ya se factura -------------------------------
   Medido en quienes-somos a 1400px: las cuatro pildoras del hero pintan su
   etiqueta del mismo verde rgb(123,233,170) -live y pronto-, el punto de 6px
   solo pasa de rgb(37,99,176) a rgb(90,112,144) y las cuatro banderas van a
   color pleno (filter:none, opacity:1, 19,2x12,8px). Con eso Argentina y
   Ecuador se leen tan operativos como Chile y Peru. El marcado ya separa los
   dos estados por su cuenta -.cp.live/.cp.soon, .c-row.live/.c-row.soon y
   .country-card.coming-, asi que el color se apoya en esas clases y no
   inventa ningun dato: no se toca ni un texto.                            */
.hero .cp.live .cp-dot { background: #52D68A; box-shadow: 0 0 8px rgba(82,214,138,.55); }
.hero .cp.live .cp-tag { color: #52D68A; }
.hero .cp.soon .cp-dot { background: rgba(214,230,247,.38); box-shadow: none; }
.hero .cp.soon .cp-tag { color: rgba(214,230,247,.60); }
.hero .cp.soon .bandera { filter: grayscale(1) brightness(1.9) contrast(.3); opacity: .5; }
.c-row.soon .bandera,
.country-card.coming .bandera { filter: grayscale(1) brightness(1.25) contrast(.4); opacity: .5; }
/* sin min-width:0 el bloque del titulo crece por encima del marco y la
   elipsis nunca llega a dibujarse: el texto se corta contra el borde */
.cl-pa-marco.es-movil .cl-pa-cab,
.cl-pa-marco.es-movil .cl-pa-cab > div { min-width: 0; max-width: 100%; }


/* --- Numeros de paso, 1: el 01..04 pegado a su etiqueta ------------------
   Medido en las 15 paginas: caja de linea con Range.getBoundingClientRect()
   y tinta real con canvas.measureText().actualBoundingBox.
   La caja de linea natural de la display es 1.33em (106.4px a font-size 80).
   .feat-number lleva line-height:1, o sea 0.33em menos de alto del que pide
   la letra (scrollHeight 90 vs clientHeight 80), y ademas margin-bottom:-16px,
   que sube la etiqueta otros 16px. Entre la tinta del numero y la tinta de
   .feat-tag quedaba 1.0px = 0.013em. El suelo que si se lee en este mismo
   sitio es 0.31em (.stat-num de ventas, 15px a font-size 48, no marcado).
   Devolviendo el line-height natural y anulando el margen negativo: 30.4px
   medidos = 0.380em, y scrollHeight == clientHeight (106/106).
   [class] sube la especificidad a (0,2,0) porque la regla original vive en un
   <style> de la propia pagina, posterior a clobi.css: a (0,1,0) ganaria ella
   por orden. Sin !important, que no compite contra ningun style= en linea. */
.feat-number[class] { line-height: 1.33; margin-bottom: 0; }


/* --- AO. Aire entre la tinta del icono y la tinta de su etiqueta ----------
   Medido de tinta a tinta en las 15 paginas (getBBox + getScreenCTM sobre el
   icono, Range.getBoundingClientRect sobre el primer nodo de texto), nunca
   con el rectangulo del <svg>: 377 parejas icono+etiqueta reales. Mediana
   8,05 px = 0,638 em, pero 119 (32 %) por debajo de 0,5 em.
   La causa no es el gap declarado. En estos contenedores el unico separador
   es el espacio de la fuente (0,27 em) y el viewBox del icono se traga otros
   0,5-2,5 px, asi que un hueco que en CSS mide 3,69 px se ve de 4,49 px de
   tinta a tinta: la mitad de lo que usan los componentes de los que nadie se
   quejo (module-chip 0,727 em, btn-primary 0,719 em, cl-pa-item 0,832 em).
   Piso: 0,62 em del cuerpo de la etiqueta. Va como margen en linea y no como
   gap porque el vecino del icono es un nodo de texto suelto y gap no lo toca.
   (a) contenedor no flex: el espacio de la fuente sobrevive, solo falta el
       resto hasta el piso -> calc(.62em - .32em).
   (b) contenedor flex: flex se come el espacio inicial y no queda separador
       -> el piso entero. En px, y con .ico en el selector para ganarle a
       `[class*="badge"] .ico { margin-right: .1em }` de clobi-sobre-zen.css,
       que es (0,2,0) y deja el icono pegado en toda pildora o chip.
       `[style*="padding:10px 16px"]` son exactamente las 8 pildoras sin
       clase de contabilidad y cuentas-por-cobrar, y nada mas en el sitio.
   Las pantallas simuladas .cl-pa / .cl-ui quedan fuera a proposito: alli la
   mediana ya es 0,64 em y su densidad imita la de una app real. */
:root { --cl-aire-icono: .62em; }
:is(.gi-cap, .gallery-caption, .hs-card-label, .sg-sm-cap, .mosaic-sm-label,
    .sv-label, .pc-title, .cf-title, .wv-title, .ac-title, .ev-title,
    .aps-title, .aph-title, .fc-top-title, th)
  > svg:not(:where(.cl-pa *, .cl-ui *)) {
  margin-inline-end: calc(var(--cl-aire-icono) - .32em);
}
:is(.pricing-badge, [style*="padding:10px 16px"]) > svg.ico,
.eyebrow > svg:not(:where(.cl-pa *, .cl-ui *)) {
  margin-inline-end: 7px;
}


/* --- AO. El hero de tres pantallas: carrusel, no mosaico ------------------
   Regla del cliente: las tres primeras imagenes de CUALQUIER cabecera que
   llegue a mostrar tres van en carrusel. Las de una sola -la portada, con su
   ventana inclinada de 931x578- y las de dos -Ventas 518x323 + 268x168,
   Reportes 558x348 + telefono de 116x251, que son la misma vista en dos
   aparatos- se quedan con el efecto que ya tenian y no las toca nada de aqui.

   Medido a 1400 px, columna visual de 980 en las cuatro paginas de tres, y
   cada una con su propia maqueta; dos de ellas con la forma que el cliente
   rechaza -una grande arriba y dos pequenas abajo-:
     compras-proveedores  .hero-screens      281x180 + 377x236 + 281x180   columna 238
     contabilidad         .screen-stack-v    478x298 + 232x145 x2          columna 520
     inventario           .hero-mosaic       900x562 + 482x301 x2          columna 915
     nomina-rrhh          .hero-screens-row  371x232 + 285x178 x2          fila    268
   Con la cinta las tres miden lo mismo -560 de ancho, marco de 560x350 por
   900/562, mas su pie- y la columna queda en unos 446 px en las cuatro:
   Inventario baja 469 px y Contabilidad 74.

   El mecanismo NO es nuevo: es la cinta de la galeria de capturas
   -.gallery-track, ocho paginas- en su modo conducido. La de la galeria
   avanza sola (animation: scrollTrack 28-35s, width: max-content, entre 4748 y
   6599 px medidos); la del hero apaga esa animacion y enciende el modo que el
   bloque de 720 px de esta misma hoja ya usa en el telefono: desbordamiento
   horizontal con anclaje por pieza. Por debajo de 721 px manda ese bloque tal
   cual -pieza de min(78vw, 300px) con !important- y el hero se desliza con el
   dedo igual que la galeria, sin una sola regla nueva.

   Se conduce SIN JavaScript y con teclado, que es justo lo que la cinta de la
   galeria no ofrecia (medido: tabindex nulo, role nulo, 0 botones, 0 puntos):
     - Tabulador: cada pantalla ya es role="button" tabindex="0" para abrir el
       visor, y el navegador desplaza a la vista lo que recibe el foco; tabular
       avanza el carrusel una pantalla.
     - Flechas, Inicio/Fin y Re/Av Pag con la cinta enfocada: es un contenedor
       de desplazamiento con tabindex="0", lo mueve el navegador y el anclaje
       lo deja parado en la pantalla siguiente.
     - Dedo en el telefono, y lateral de trackpad o rueda+Mayus en escritorio.
   Tres clases en el selector porque la CSS de cada pagina se inyecta DESPUES
   de clobi.css: contra .hero-screens-row o .hs-card -una clase- ganaria la
   pagina por orden de aparicion. No hace falta !important.                  */
.hero .cl-cinta-caja { display: block; }

.hero .gallery-track.cl-cinta-hero {
  display: flex;
  animation: none;
  transform: none;
  width: 100%;
  max-width: 100%;
  gap: clamp(12px, 1.4vw, 20px);
  /* el aire de arriba y abajo es para la sombra de las tarjetas -.hs-card
     lleva 0 20px 48px-: sin el, el desbordamiento la recorta en seco */
  padding-block: 20px 40px;
  /* centra la primera y la ultima: (980 - 560) / 2 = 210 px a cada lado */
  padding-inline: calc((100% - min(100%, 560px)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  /* el desvanecido de los bordes es el unico aviso de que hay mas a los
     lados: sin JavaScript no se pueden pintar puntos que digan la verdad
     sobre en cual de las tres esta */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hero .gallery-track.cl-cinta-hero::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero .gallery-track.cl-cinta-hero { scroll-behavior: smooth; }
}

.hero .gallery-track.cl-cinta-hero > * {
  flex: 0 0 min(100%, 560px);
  width: min(100%, 560px);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  /* mata el rotateY de +-6 grados de Compras y el margin-bottom de 16 del
     mosaico de Inventario: dentro de la cinta las tres son iguales */
  transform: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* el hover de origen levantaba la tarjeta 6 px, y eso la despega del anclaje
   mientras se desliza; el marco ya avisa de que se amplia con cursor: zoom-in */
.hero .gallery-track.cl-cinta-hero > *:hover { transform: none; }

.hero .gallery-track.cl-cinta-hero:focus-visible {
  outline: 2px solid #52D68A;
  outline-offset: 3px;
}

/* --- AO. La banda de cifras no raya el hero ------------------------------
   Medido a 1400 en cuentas-por-pagar: el hero acaba en y=1282,16 y la banda
   .stats-row se pinta desde y=1270,16, o sea 12 px montada sobre el navy.
   La banda trae del zip original border-top: 1px solid var(--cl-line) y tras
   el pase --cl-line vale #E3EAF3 -el hilo que sirve sobre blanco-: el
   resultado es una raya de 1400x1 px en #E3EAF3 cruzando el fondo #1A2F5A
   del hero, 71 px por debajo del tablero. Y como la banda no tiene fondo
   propio, esos 12 px dejan el borde de arriba de las cuatro celdas sobre
   navy y el resto sobre blanco: el fondo cambia a mitad de banda.

   La banda va siempre pegada al hero oscuro, asi que ese hilo no separa
   nada: se apaga y la banda toma el blanco del cuerpo (#FFFFFF, medido en
   body), para que el corte oscuro/claro caiga limpio en su borde superior.
   Misma situacion medida en cuentas-por-cobrar, reportes e inventario.    */
.hero-dark + .stats-row {
  background: #FFFFFF;
  border-top-color: transparent;
}


/* --- AQ. Las tarjetas que no cierran su caja -----------------------------
   .bento y .compliance-grid estan escritas en la hoja de la pagina como
   mosaico -display:grid, gap:4px, background:var(--cl-line), borde de 1px y
   radio 28px con overflow:hidden-, pero zen.js les anade .cards-grid y esta
   hoja las vuelve flex con gap:28px !important y le da a cada celda fondo
   blanco, borde, radio 20px y sombra 0 10px 26px. Medido a 1400px en
   quienes-somos: en .bento (clientHeight 776) las dos celdas de abajo van de
   454 a 776,016, o sea 0,0px entre el borde de la tarjeta y el recorte: se
   pierde entera la sombra inferior y 2,3px del redondeo en cada esquina
   (curva exterior 8,20px contra 5,86px de la interior). Mientras entra la
   animacion -matrix(.95,0,0,.95,0,30)- el contenido llega a 798px contra 776
   de caja: 22px de la fila inferior fuera. En .compliance-grid, 664 contra
   650: 14px. Se retira el marco del mosaico, que ya no enmarca nada.
   .who-inner NO entra aqui: ese sigue siendo grid con gap:4px de verdad.  */
.section .bento, .section .compliance-grid {
  overflow: visible;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
}


/* --- AR. El cierre que no termina su caja --------------------------------
   Medido a 1400px: en .cta-band (1080x413,031, padding 60px 55,36px, radio
   28px, overflow:hidden) los tres bloques de texto acaban en 353px y el
   relleno inferior los cierra en 413: no se corta ni una linea. Lo que se
   corta es el brillo. El fondo lleva
   radial-gradient(700px 380px at 92% 100%, rgba(82,214,138,.14), transparent 58%)
   con el centro -su punto mas luminoso- sobre el propio borde inferior, y la
   banda recorta (scrollHeight 544 contra clientHeight 413: 131px fuera de
   caja). Se baja el centro al 122% para que dentro quede solo la cola.    */
.section .cta-band {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(0,112,243,.34), transparent 60%),
    radial-gradient(820px 560px at 88% 122%, rgba(82,214,138,.16), transparent 62%),
    linear-gradient(160deg, #0B1730 0%, #0F1E3D 55%, #1A2F5A 100%);
}


/* --- AÑ. La ranura de los seis calcos del ciclo laboral de Nomina ------- */
/* Medido en nomina-rrhh.html a 1400 px de ventana: los seis calcos de "Todo
   el ciclo laboral" miden 200x125 y los de "Nomina en pantalla" 518x323. Son
   el 38,6 % del ancho y el 14,9 % del area: caben 6,7 pequenos en uno grande.
   A 200 px el marco cae en el tramo @container (max-width: 340px) de arriba y
   la fila se queda en dos celdas. En Finiquitos eso es UNA fila -la pantalla
   solo tiene una- con "Roberto Fuentes Araya" dibujado a 99 de los 119 px que
   pide y la palabra "Calculado". La fecha 19-06-2026, la causal "Necesidades
   de la Empresa (Art. 161)" y el total $21.306.244 no se dibujan, y con ellos
   se va todo lo que hace que un finiquito parezca un finiquito. El ultimo
   pixel con tinta esta en y=99 de 125: el 21 % inferior del marco es blanco.
   El umbral util no es 340 sino 420: entre 341 y 420 px manda
   `--t: max(11px, 3.9cqw)`, la letra SUBE a 14,8-16,4 px y las cinco columnas
   se reparten 30-89 px -el 33-56 % de lo que piden-, que es la misma rotura
   que el bloque AN vino a evitar. Medido a 460 px el calco vuelve al regimen
   de 13 px, el mismo de los 518 px aplaudidos, y cinco de las seis pantallas
   dibujan sus celdas al 88-100 %.
   Coste medido a 1280 px de contenedor: la fila pasa de 168 a 287 px de alto,
   .feat-list de 1015 a 1733 px (+718, +71 %) y la columna de la descripcion de
   800 a 540 px, con lo que cuatro de las seis descripciones pasan de 2 a 3
   lineas. Ninguna se corta.
   El tope de 1320 px de ventana es donde el .container mide los 1280 medidos;
   por debajo no se toca nada y la seccion queda igual que hoy. A <=960 px la
   propia pagina ya esconde .fi-screen.
   La especificidad sube a (0,2,0) porque el <style id="css-pagina"> de la
   pagina trae `.fi-screen{width:200px}` (0,1,0) y va DESPUES de clobi.css en
   el documento: a igualdad de peso ganaria el de la pagina. */
@media (min-width: 1320px) {
  .feat-item:has(.fi-screen .cl-pa-marco) { grid-template-columns: 280px 1fr 460px; }
  .fi-screen:has(.cl-pa-marco) { width: 460px; }
}


/* --- AO. El visor en el telefono: ampliar de verdad y soltar el scroll ----
   Medido a 390x844: la captura inline mide 350 px y al abrir el visor pasa a
   366,6 px -un 4,7% mas grande-, o sea que ampliar no servia de nada. La
   imagen se queda en 94vw = 366,6 px para un original de 900 px: 41%.
   Ademas vh en Safari de iOS mide el viewport GRANDE: 92vh = 776 px sobre
   los ~734 px visibles con la barra de direcciones, asi que el borde de
   abajo cae debajo de la barra.
   Aqui el visor pasa a ser una ventana que se recorre con el dedo: la pieza
   entra a 820 px -2,3 veces lo que se ve en la pagina- y se desplaza en
   horizontal. display: block y no flex porque un contenedor centrado con
   justify-content recorta por la izquierda lo que se sale.

   CORREGIDO: "el boton de cerrar se fija a la ventana para que no se vaya
   con el desplazamiento" (comentario original) daba por hecho que
   position:fixed se queda quieto pase lo que pase. En iOS Safari eso es
   falso dentro de un contenedor con -webkit-overflow-scrolling:touch, que
   es EXACTAMENTE lo que tiene .lightbox dos lineas mas abajo: es un bug
   de WebKit ya documentado, el fixed se comporta como si fuera absolute
   dentro de ese contenedor y viaja con el scroll. Con el ancho forzado a
   820 en un telefono de 375, el usuario tenia que desplazarse en
   horizontal si o si, y el boton de cerrar se iba con la imagen: quedaba
   atrapado sin forma de salir. Medido, no supuesto: es la reproduccion
   exacta de "no me deja cerrarla".

   El texto de dentro no se hace ilegible por encogerlo: .cl-pa fija
   --t: max(13px, 1cqw), un PISO de 13 px que no depende del ancho del
   contenedor. Por eso capar a 94vw -el mismo patron que ya usa la
   version de escritorio, min(1400px, 94vw)- no cuesta nada de lectura y
   quita la necesidad de desplazarse en horizontal en el caso comun: sin
   ese desplazamiento, el boton fijo ya no tiene de que "escaparse".      */
@media (max-width: 720px) {
  .lightbox {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 64px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .lightbox img,
  .lightbox .cl-pa-marco,
  .lightbox .cl-ui {
    max-width: none; max-height: none;
    width: min(820px, 94vw); height: auto;
  }
  .lightbox .cl-pa-marco.es-movil { width: min(380px, 84vw); }
  .lightbox-close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
    width: 44px; height: 44px;
  }
}

/* El JS pone document.body.style.overflow = 'hidden' al abrir el visor, el
   modal de demo y el de HubSpot. En Safari de iOS el candado en <body> no
   sujeta la pagina -solo lo sujeta en <html>-: la pagina seguia corriendo
   por detras y al cerrar quedaba la sensacion de scroll trabado. Es el mismo
   patron que ya usa el menu movil, aplicado a las tres capas. El JS sigue
   mandando: al quitar la clase, el candado se suelta solo.                  */
html:has(.lightbox.open), html:has(.lightbox.active),
html:has(.modal-overlay.open), html:has(.modal-overlay.active),
html:has(.hs-modal-overlay.open), html:has(.hs-modal-overlay.active) {
  overflow-y: hidden;
}
/* --- AS. El modal de Partners abria invisible ----------------------------- */
/* Medido en pages/partner.html: openHsModal() ponia bien las clases -el div
   quedaba en `hs-modal-overlay open active` y `display:flex`, 1440x900- pero
   `getComputedStyle().opacity` devolvia 0, asi que el formulario de partner se
   abria y no se veia nada.

   La causa esta en el <style> que trae la pagina original:
   `.hs-modal-overlay.open { display:flex; animation: fadeIn .2s ease }`
   y `@keyframes fadeIn` NO EXISTE en ninguna de las hojas -comprobado con grep
   sobre los 427 KB de clobi.css y sobre el <style> de las 15 paginas-. Una
   animacion que apunta a un nombre inexistente deja el elemento en manos de lo
   que declare la hoja, y ahi no habia ninguna declaracion de opacidad.

   Se arregla por los dos lados: se define el fotograma que faltaba, para que la
   entrada sea la que el autor quiso, y se fija la opacidad final, para que el
   modal se vea aunque la animacion no llegue a correr -reduced-motion, o un
   navegador que no la soporte-. */
@keyframes cl-modal-entra { from { opacity: 0 } to { opacity: 1 } }
.hs-modal-overlay.open,
.hs-modal-overlay.active {
  opacity: 1;
  animation: cl-modal-entra .2s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hs-modal-overlay.open, .hs-modal-overlay.active { animation: none; }
}

/* --- AT. Dos recortes que quedaban en los calcos ------------------------- */
/* 1. El ROTULO DE COLUMNA se sale de su celda. Medidas: "PRESUPUESTADO" 11,6 px
   fuera en Presupuestos (contabilidad, ranura de 598 px), "Descuentos" 5,5 px
   en Liquidaciones y "PENDIENTE" 4,3 px en Cobranza. No pisan nada porque las
   cabeceras vecinas son cortas, pero la tinta queda fuera de su columna y la
   tabla se lee torcida.

   Es el mismo mecanismo que ya documenta el bloque AN: con la celda en `flex`
   el texto es un item anonimo, y `text-overflow: ellipsis` no recorta items,
   solo texto dentro de una caja de bloque. Se pasa a bloque y la alineacion,
   que antes hacia el flex, la hace text-align. */
   PRIMER INTENTO: recortar con elipsis, como se hace con las CELDAS. Medido
   despues: de 154 rotulos, 82 quedaban con texto escondido y "CODIGO" mostraba
   18 px de los 45 que mide, o sea "C...". Cambiaba un defecto por otro: dejaba
   de salirse y dejaba de leerse.

   La diferencia con una celda esta en el contenido. Una celda lleva un dato
   largo -un nombre, una razon social- que se resume bien con puntos
   suspensivos. Un rotulo de columna es UNA PALABRA, y una palabra no se
   resume: se parte. La fila tiene min-height y no height, asi que crece y cabe.
   Se deja `overflow: hidden` de todas formas, como suelo: si ni partida cabe,
   se recorta dentro de su columna en vez de invadir la vecina.               */
.cl-pa .cl-pa-tr > .cl-pa-th {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  overflow: hidden;
}
.cl-pa .cl-pa-tr > .cl-pa-th.a-d { text-align: right; }
.cl-pa .cl-pa-tr > .cl-pa-th.a-c { text-align: center; }

/* 2. La DESCRIPCION DE LA FICHA se corta a media linea. Ocho pantallas: en
   Centro de Reportes se pierden 112,9 px de alto de "Ranking de clientes...",
   y en Declaraciones Juradas 81,1 px. La tarjeta recorta por altura y el corte
   cae por el medio de una linea de texto, que es lo que se lee como error de
   dibujo -media letra asomando- en vez de como un resumen.

   Con line-clamp el corte cae SIEMPRE entre lineas y ademas pone la elipsis:
   pasa de parecer roto a parecer deliberado. Tres lineas es lo que cabe en la
   tarjeta mas baja de las ocho medidas. */
.cl-pa .cl-pa-tj em,
.cl-pa .cl-pa-destacado em,
.cl-pa .cl-pa-ficha em {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}


/* =========================================================
   AU. BARRA DE ACCIONES EN EL CELULAR: DEMO Y LLAMAR
   ---------------------------------------------------------
   La barra venia en zen.js pero el build la dejaba apagada
   (__zenHechos.barraAccion = 1). Se enciende en todas las paginas
   salvo "gracias", donde "Pedir demo" sobra: la acaban de pedir.

   Mide 66 px (8 + boton de 49 + 8 + 1 de borde) y es fija: sin
   reservar ese alto, el final del pie quedaba DEBAJO de la barra y
   no habia forma de leerlo ni de tocar sus enlaces. Se reserva solo
   cuando la barra existe, en celular, y sumando la zona segura del
   iPhone, que es donde la barra ya se estira por su propio padding.
   ========================================================= */
@media (max-width: 767px) {
  body.con-barra-accion {
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }
}


/* =========================================================
   AV. EN EL TELEFONO, DECIR QUE LA CAPTURA SE AMPLIA
   ---------------------------------------------------------
   Las 144 capturas del sitio se amplian: cada .cl-pa-marco sale
   del build con role="button", tabindex y onclick. Pero lo UNICO
   que lo anunciaba era `cursor: zoom-in`, y en una pantalla tactil
   no hay cursor. Resultado medido en el telefono: capturas de la
   interfaz del ERP con textos de 6,1 a 7,2 px y ninguna senal de
   que se puedan tocar. De ahi la queja de que "las fotos no se
   aprecian bien desde el celular": si se aprecian, pero hay que
   saber que hay que tocarlas.

   La pastilla solo aparece donde el cursor no existe -(hover: none)-
   para no ensuciar el escritorio, que ya avisa con la lupa del
   puntero. Va arriba a la derecha porque las capturas llevan su
   titulo arriba a la izquierda y el numero de paso en esa misma
   esquina en las fichas numeradas.

   pointer-events: none es imprescindible: la pastilla se dibuja
   ENCIMA del marco, que es el propio boton, y sin esto se comeria
   el toque justo en la esquina que invita a tocar.
   ========================================================= */
@media (hover: none) {
  .cl-pa-marco[data-ampliable]::after,
  [data-ampliable] > .cl-pa-marco::after {
    content: "";
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background-color: rgba(15, 30, 61, .78);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    /* lupa dibujada en el propio CSS: sin peticion de red y sin depender
       de que la fuente tenga el glifo. El blanco puro sobre el navy da
       12,9:1, muy por encima del suelo de contraste del proyecto. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="20.5" y2="20.5"/></svg>');
    box-shadow: 0 2px 8px rgba(11, 20, 38, .35);
    pointer-events: none;
    z-index: 3;
  }
  /* En las capturas de telefono -900x1948- la pastilla de 30 px tapaba
     la barra de estado del movil dibujado. Se encoge y se pega mas. */
  .cl-pa-marco.es-movil[data-ampliable]::after,
  [data-ampliable] > .cl-pa-marco.es-movil::after {
    width: 24px; height: 24px; top: 6px; right: 6px; background-size: 13px 13px;
  }
}


/* =========================================================
   AW. DENTRO DE UN CALCO, UNA CIFRA NO SE PARTE
   ---------------------------------------------------------
   Al ensanchar las cintas del telefono, las capturas pasaron de
   109 a 287 px y quedo a la vista un defecto que antes era una
   mancha: "$20.900.000" partido en dos lineas dentro de una
   celda de 85 px, y "11 anos (tope 11)" en dos dentro de 74.
   Medido: 6 cifras rotas en la ficha de finiquito de Nomina.

   Estas filas son pares etiqueta/valor en flex con
   justify-content: space-between. El valor es el que lleva el
   dato y el que nunca debe romperse; la etiqueta si puede, que
   para eso es texto corrido. min-width: 0 en el contenedor
   permite que sea la ETIQUETA la que ceda: sin el, un hijo flex
   no baja de su contenido minimo y el que se parte es el numero.
   ========================================================= */
.cl-pa :is(.cl-pa-bloque-pie, .cl-pa-bloque-fila, .cl-pa-total, .cl-pa-kpi) > :is(b, strong) {
  white-space: nowrap;
}
.cl-pa :is(.cl-pa-bloque-pie, .cl-pa-bloque-fila) > :is(span, em, i) {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* =========================================================
   AX. EN EL TELEFONO, UNA COLUMNA (Y LA CIFRA ENTERA)
   ---------------------------------------------------------
   Medido en Nomina a 375 px: .hero-visual-col es una rejilla de
   dos columnas de 167,5 px con UN solo hijo en flujo -el otro es
   absolute-, asi que la tarjeta se quedaba en 168 px y los 185 px
   de la derecha eran hueco muerto. Ese hueco es la mitad del
   bloque: es lo que se lee como "no es simetrico".

   Y de rebote partia el dato: "$14.739.570" a 35 px de cuerpo
   necesita 200 px y solo tenia 120 de caja util, asi que salia en
   dos lineas, "$14.73" sobre "9.570". Con la tarjeta a 335 px la
   cifra cabe entera y nowrap garantiza que no vuelva a partirse
   aunque cambie el importe.

   Dos columnas de 167 px en un telefono no sirven para nada en
   ningun caso, asi que la regla va para toda .hero-visual-col.
   ========================================================= */
@media (max-width: 767px) {
  .hero-visual-col { grid-template-columns: 1fr !important; }
  .payroll-card { width: auto; }
  /* una cifra destacada no se parte nunca: si no cabe, se reduce */
  .pc-big, .payroll-card .pc-big { white-space: nowrap; }
}


/* =========================================================
   AY. SIN GUION AL LADO DE NINGUN EYEBROW (REGLA PERMANENTE)
   ---------------------------------------------------------
   La etiqueta pequena en mayuscula que va sobre un titulo (.eyebrow:
   "Cumplimiento tributario", "Puesta en marcha", etc.) trae de fabrica
   -zen.css, no algo que se agregara en este rediseno- una rayita de
   26 px antes (::before) y en el hero centrado tambien despues
   (::after). Es EXACTAMENTE el guion que el cliente pidio quitar de
   todos los puntos y titulos, que volvio a aparecer porque vivia en
   un mecanismo distinto al que ya se habia limpiado (bloque B, "el
   hilo", 45 cabeceras). Se apaga en las dos formas en que aparece,
   en todo el sitio y de aqui en adelante para cualquier eyebrow
   nuevo. content:none retira tambien la caja, no solo el dibujo: no
   deja un hueco de 26 px ni un gap suelto donde estaba.
   ========================================================= */
.eyebrow::before,
.hero-centro .eyebrow::after {
  content: none;
}

/* =========================================================
   AZ. EN EL TELEFONO, EL PANEL DE UNA CAPTURA A UNA COLUMNA
   ---------------------------------------------------------
   .screen-panel.active es una rejilla de 0.86fr/1.14fr pensada para
   escritorio. En un telefono de 375 px con 40 px de margenes eso deja
   una primera columna de apenas 132 px para el texto -"Documentos de
   venta electronicos" a 24px de cuerpo no cabe ni por asomo- y ROMPE
   la palabra a la mitad porque el `overflow-wrap: break-word` de base
   (zen.css, body, <767px) no tiene mas remedio que partirla en
   cualquier parte para no desbordar. El sintoma parecia del wrap;
   la causa real es que nunca colapso a una columna, el mismo defecto
   que ya se corrigio en la tarjeta de nomina (bloque AX).
   ========================================================= */
@media (max-width: 767px) {
  .screen-panel.active { grid-template-columns: 1fr !important; }
}

/* =========================================================
   BA. LAS GALERIAS DE CAPTURAS NO SE DESLIZAN SOLAS
   ---------------------------------------------------------
   .gallery-track trae de fabrica una cinta que avanza sola
   (animation: scrollTrack, 28 a 35s segun la pagina, medido 4748 a
   6599 px de ancho con las capturas duplicadas para el bucle). El
   header YA se corrigio -bloque AO, "carrusel, no mosaico"- pero solo
   para su propia cinta (.cl-cinta-hero); las galerias de "haz clic en
   cualquier captura" mas abajo en la pagina -ocho paginas, entre ellas
   Inventario- seguian con el barrido automatico en escritorio: es el
   "movimiento feo" que no es un carrusel.

   Mismo tratamiento que ya funciona en el header: se apaga el avance
   solo y se deja como una cinta que se recorre con el dedo, la rueda
   o el teclado, ANCLADA pieza a pieza en vez de a medio camino. No se
   tocan los anchos de cada pieza -esos ya estan resueltos en otro
   sitio de esta hoja- ni las galerias del propio header, que ya
   tienen su propio arreglo mas fino y no necesitan este.
   ========================================================= */
.gallery-track:not(.cl-cinta-hero) {
  animation: none !important;
  transform: none !important;
  /* con !important: medido que algo -probablemente el propio zen.js, en
     linea- deja overflow-x:hidden en la cinta cuando el barrido automatico
     esta activo, y sin forzarlo aqui la cinta quedaba congelada Y sellada:
     ni se movia sola ni se podia mover a mano. */
  overflow-x: auto !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* el barrido automatico fija width:6588px EN EL PROPIO CONTENEDOR -para
     que las 12 piezas quepan en una sola fila sin envolver-, no solo en su
     contenido. Al apagar la animacion ese ancho se queda puesto: medido
     scrollWidth===clientWidth===6588, la caja entera se sale de la pantalla
     en vez de quedar como una ventana angosta con contenido navegable
     dentro. Se le devuelve al ancho de su columna, igual que ya hace la
     cinta del header un poco mas arriba en esta misma hoja. */
  width: 100% !important;
  max-width: 100% !important;
}
.gallery-track:not(.cl-cinta-hero) > * {
  scroll-snap-align: start;
}


/* =========================================================
   BB. EL GUION TENIA UNA TERCERA VIDA: .eyebrow-line
   ---------------------------------------------------------
   No era un pseudo-elemento -eso ya se apago en el bloque AY-, sino un
   <span class="eyebrow-line"></span> REAL, de antes del rediseno, con su
   propia regla dentro del <style> de cada una de 10 paginas:
     .eyebrow-line { width: 32px; height: 1px; background: var(--teal); }
   Esa hoja va DESPUES de clobi.css en el documento, asi que sin !important
   aqui seguiria ganando ella. display:none quita tambien la caja: un span
   vacio no deja hueco ni gap suelto donde estaba la linea.
   ========================================================= */
.eyebrow-line { display: none !important; }


/* =========================================================
   BC. LOS 4 PASOS DEL ONBOARDING: TEXTO CENTRADO Y FILAS CON AIRE
   ---------------------------------------------------------
   .tl-step ya centra la CAJA de cada hijo (flex column, align-items:
   center) pero nunca centro el TEXTO dentro de esas cajas: .tl-title
   y .tl-desc se quedaban en text-align:start de fabrica. Medido: los
   centros de numero, icono y caja de texto coinciden los tres en
   x=104 -esta perfectamente centrado por caja- pero como el texto es
   ancho (144 de 168 px de columna) y arranca pegado a la izquierda,
   la palabra "Diagnostico" visualmente empieza muy a la izquierda del
   circulo, que es lo que se lee como "el numero esta corrido a la
   derecha" aunque geometricamente no lo este.

   Y en el mobile de 2 columnas -.timeline pasa a grid 1fr 1fr- el
   gap de la rejilla es 0: fila 1 termina y fila 2 empieza en el MISMO
   pixel, medido. "Capacitacion" (paso 3) queda pegado sin aire al
   texto de "Diagnostico" (paso 1) que tiene encima.
   ========================================================= */
.tl-title, .tl-desc { text-align: center; }
@media (max-width: 767px) {
  /* con !important: la pagina trae su propio <style> con .timeline{gap:0},
     SIN media query, que carga despues de esta hoja -mismo patron que ya se
     vio con .eyebrow-line-. Sin forzarlo, esa declaracion sin condicion
     gana por orden de aparicion aunque la mia este en un media que si
     aplica: no es cosa de especificidad, es cosa de quien viene despues. */
  .timeline { row-gap: 32px !important; }
}


/* =========================================================
   BD. LA MARCA DE AGUA "01" YA NO ES DE 80 PX EN EL TELEFONO
   ---------------------------------------------------------
   .bc-num es un numero decorativo de fondo -5rem, esquina superior
   derecha, position:absolute- pensado para una tarjeta ancha de
   escritorio. En el telefono la tarjeta pasa a ser casi todo el
   ancho (335 de 375) y el numero se queda igual de grande: 80x80 px
   en la esquina, invadiendo el mismo cuadrante donde arrancan el
   icono y el titulo. Medido: -10 px de hueco entre la marca de agua
   y el titulo, o sea que se pisan. Se reduce solo en el telefono; en
   escritorio, donde la tarjeta es angosta pero mucho mas alta, no
   se toca.                                                          */
@media (max-width: 767px) {
  :is(.bc-num, .fc-num, .feat-number, .si-num) {
    font-size: 2.4rem !important;
    top: 10px !important;
    right: 16px !important;
  }
}


/* =========================================================
   BE. LA CURVA OSCURA SE COMIA EL BOTON DEL PLAN MAS ALTO
   ---------------------------------------------------------
   La seccion "Cumplimiento tributario" sube -112px sobre la anterior
   a proposito, para la curva -.sec-domo, margin-top:-112px-: es
   decorativo y no se toca. El problema es que esos -112px se
   calcularon contra una tarjeta generica, y la tarjeta "Advanced"
   -la destacada, con mas lineas de beneficios- mide 61 px mas que
   sus hermanas: 496 contra 435. Medido: el boton "Consultar" de esa
   tarjeta quedaba 12 px DENTRO de la zona que la curva reclama para
   si misma, tapado por la seccion oscura de encima.

   Se le da a la rejilla de planes un colchon de sobra en la base
   -no se toca el -112px de la curva, que es el mismo en todas las
   paginas que la usan- asi que aunque cambie el contenido de una
   tarjeta en el futuro, sigue habiendo margen antes de que la curva
   empiece a wobrar codigo real.                                    */
/* :has(+ .sec-domo) no encontraba la seccion -medido en vivo: 2 coincidencias,
   ninguna la buscada-, asi que se apunta por id, que la seccion ya trae.
   Con !important: la pagina TAMBIEN trae su propio #onboarding{padding:...}
   en su <style>, que carga despues de esta hoja -otra vez el mismo patron
   de .eyebrow-line y .timeline-. Un id sin !important pierde igual contra
   un id que llega mas tarde en el documento. */
#onboarding.section { padding-bottom: 96px !important; }


/* =========================================================
   BF. PARTNERS: LAS 4 CIFRAS SE SALIAN POR LA DERECHA
   ---------------------------------------------------------
   Medido en un telefono de 375: la rejilla empezaba en x=69 y
   terminaba en x=423, o sea 48 px FUERA de la pantalla, que la
   banda recortaba con su overflow hidden. Eso es exactamente
   "los primeros cuatro botones se ven desfasados hacia la
   derecha": no estan desfasados por decoracion, estan cortados.

   Son dos causas sumadas, ninguna pensada para un telefono:
   1. .stats-band-inner trae padding: 0 48px del escritorio, que
      en 335 px de ancho util deja solo 239 px de contenido.
   2. la unica media query que la toca -968px- la deja en dos
      columnas, y dos columnas de 173 y 180 px no caben en 239.
   Como los hijos de una rejilla no encogen por debajo de su
   min-content, la segunda columna se va fuera en vez de ajustarse.

   Se pasa a una columna en el telefono. Medido: las 4 cajas
   quedan identicas -334x162- con 21 px a la izquierda y 20 a la
   derecha, es decir alineadas al mismo carril de 20 px que el
   texto, y la banda entera ocupa 691 px frente a los 674 de la
   version a dos columnas: mismo alto, el doble de ancho para
   leer y por fin todas iguales.

   min-width: 0 va aparte: sin el, un hijo de rejilla se niega a
   bajar de su min-content y el ajuste no serviria de nada.

   !important porque partner.html trae su propia regla en su
   <style>, que carga despues de esta hoja: a igualdad de
   especificidad gana la ultima, el mismo patron ya visto en
   .eyebrow-line, .timeline y #onboarding.                    */
@media (max-width: 767px) {
  .stats-band-inner {
    grid-template-columns: 1fr !important;
    padding-inline: 0 !important;
    gap: 14px !important;
  }
  .stats-band-inner > * { min-width: 0 !important; }
}


/* =========================================================
   BG. LA TABLA COMPARATIVA CABE ENTERA EN EL TELEFONO
   ---------------------------------------------------------
   "la tabla no se alcanza a apreciar bien... tampoco me deja
   moverme". Las dos mitades de la queja tienen la misma causa.

   Medido: la tabla pedia 414 px dentro de un carril de 335. El
   contenedor .c-tabla si podia desplazarse -overflow-x auto,
   scrollWidth 414 > clientWidth 335- pero nada en la pantalla lo
   anunciaba, y arrastrar en horizontal dentro de una tabla de
   1569 px de alto compite con el gesto de bajar la pagina. En
   la practica: no se lee y no se mueve.

   El desborde no venia del texto sino del relleno: 28 px a cada
   lado de cada celda son 168 px de puro aire en 3 columnas.
   Bajado a 8 px la tabla mide 335 y cabe exacta, sin una sola
   celda con texto cortado -comprobado celda por celda- y ademas
   baja de 1569 a 1284 px de alto. Sin desplazamiento horizontal
   no hay gesto que competir.

   En pantallas de 320 px todavia sobran 46 px, asi que el
   desplazamiento se queda como red de seguridad, ahora con el
   arrastre por inercia de iOS activado.

   Vale para las dos tablas del sitio -.comp-table en partners y
   .compare-table en onboarding- porque se apunta al contenedor
   .c-tabla, que es comun a ambas.                            */
@media (max-width: 767px) {
  .c-tabla { -webkit-overflow-scrolling: touch; }
  .c-tabla table { width: 100% !important; }
  .c-tabla th,
  .c-tabla td {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   BH. EL MODAL CERRADO YA NO DESCARGA EL FORMULARIO
   ---------------------------------------------------------
   "En Partners se esta demorando mucho en abrir... no me abrio".
   Medido: el recurso mas lento de la pagina, con diferencia, es
   el iframe de HubSpot -1472 ms en LOCAL, sin red movil de por
   medio- y se pedia SIEMPRE, en las 15 paginas, aunque nadie
   hubiera tocado el boton de demo.

   La razon: hay dos modales y se ocultan distinto. #hsFormModal
   usa display: none y su iframe, en efecto, no se descarga -medido
   0x0-. Pero el de demo, .modal-overlay, se ocultaba solo con
   opacity: 0, asi que seguia teniendo caja -510 px de alto-, y un
   iframe con caja se descarga aunque no se vea: loading="lazy" no
   salva de eso, solo retrasa lo que esta lejos del viewport, y
   este estaba arriba del todo.

   Ocultarlo de verdad cuando esta cerrado es el mismo mecanismo
   que ya usa el otro modal, y que algunas paginas -Precios- ya
   traen en su propio <style>. El abridor del sitio pone las dos
   clases a la vez, open y active, asi que :not de las dos deja
   de aplicar en cuanto se abre y la caja vuelve sola.

   Comprobado abriendo y cerrando con las mismas funciones que
   usan los botones: cerrado 0 iframes con caja; abierto el
   formulario mide 271x510 y el fondo queda bloqueado; al cerrar
   vuelve todo. Se pierde el fundido de 0,28 s al abrir; a cambio
   se quita una peticion a un tercero de cada carga de pagina.

   Especificidad 0,3,0: gana a cualquier .modal-overlay suelta de
   una pagina sin necesidad de !important, y no estorba a las
   reglas .active que ya existen.                             */
.modal-overlay:not(.open):not(.active):not(.precargando) { display: none; }


/* =========================================================
   BI. LAS PESTANAS DE SECCION, EN REJILLA Y NO EN ESCALERA
   ---------------------------------------------------------
   "el de la plataforma en accion... se ve como desfasado hacia
   la derecha... de nuevo se vuelve a repetir".

   Son cinco pestanas en flex-wrap alineadas a la izquierda, y
   como cada una mide lo que mide su palabra, las filas quedan
   de distinto largo. Medido en la portada: la fila 1 terminaba
   en 264, la 2 en 263 y la 3 en 122, dentro de un carril que
   llega a 355. Es decir, hasta 233 px de hueco a la derecha en
   la ultima fila. No esta desplazado el bloque: estan desiguales
   las filas, y el ojo lo lee como un bloque torcido.

   En rejilla de dos columnas iguales el ancho deja de depender
   del largo de la palabra: medido, las cinco pasan a 164 px con
   20 px de margen a cada lado, ninguna con texto cortado, y el
   bloque ocupa lo mismo que antes. La impar que sobra ocupa la
   fila entera, que es lo que cierra el rectangulo; el selector
   :nth-child(odd):last-child se encarga de que eso solo pase
   cuando de verdad queda sola.

   Las dos filas del sitio comparten el mismo defecto y se
   arreglan igual: .screens-tabs en la portada y .feat-tabs en
   Inventario -esta ultima traia ademas un max-width: 33% de un
   intento anterior que hay que anular para que la rejilla mande. */
@media (max-width: 767px) {
  .screens-tabs,
  .feat-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .screens-tabs > *,
  .feat-tabs > * {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .screens-tabs > *:nth-child(odd):last-child,
  .feat-tabs > *:nth-child(odd):last-child { grid-column: 1 / -1; }
}


/* =========================================================
   BJ. "MULTI" Y UNA I DEBAJO: LA CIFRA NO CABIA EN SU CELDA
   ---------------------------------------------------------
   "dice Multi y una i abajo, como puede pasar eso?". Pasa asi:
   la celda mide 159 px, pero .stat-cell conserva el relleno del
   escritorio -40px 36px-, y 36 px por lado se comen 72, dejando
   87 px utiles. La palabra "Multi" a 44,8 px en negrita pide unos
   110. Al no caber, el navegador la parte por donde sea: "Mult" y
   la "i" sola en la linea de abajo. Lo mismo le pasaba a "FIFO".

   Es la misma causa que en la banda de Partners -relleno de
   escritorio sin revisar para el telefono-, asi que se corrige
   igual: bajar el relleno en vez de encoger la letra. Medido con
   26px 18px: los cuatro numeros vuelven a una sola linea SIN
   perder un solo punto de tamano -siguen a 44,8 px-, ninguno se
   desborda y ningun texto de apoyo queda cortado.

   De regalo, las cuatro celdas pasan a medir lo mismo -181 px de
   alto, antes 227 y 272 segun si el numero se partia o no-, que
   era justo la falta de simetria que se veia en esa fila.

   El nowrap es el cinturon: si manana entra una palabra mas
   larga, preferimos que se salga -y se vea- a que se parta por
   la mitad en silencio. Es la regla 4 de siempre: una cifra no
   se parte.

   Vale para las 5 paginas que usan esta fila: inventario,
   reportes, nomina-rrhh, cuentas-por-cobrar y cuentas-por-pagar. */
@media (max-width: 767px) {
  .stat-cell { padding: 26px 18px !important; }
  .stat-num { white-space: nowrap !important; }
}


/* =========================================================
   BK. LOS MODULOS: DOS RELLENOS SUMADOS DEJABAN EL TEXTO EN 229 PX
   ---------------------------------------------------------
   En la tarjeta de "Documentos electronicos DTE" y sus hermanas,
   la lista empezaba en x=73 de una pantalla de 375. Medido, la
   sangria era la suma de tres cosas pensadas por separado:
   20 del carril + 24 del relleno de .module-card + 28 del relleno
   de .mc-body. Setenta y dos pixeles a cada lado, y al texto le
   quedaban 229 de 375, un 61 %.

   Peor aun: la captura de arriba -.mc-screen- no lleva ese tercer
   relleno, asi que empezaba en 45 y la lista en 73. La foto y su
   texto no estaban alineados, que es justo lo que no debe pasar.

   Quitando el relleno lateral de .mc-body en el telefono -el de
   la tarjeta ya da aire de sobra- la lista pasa a 45..330, EXACTO
   el mismo carril que la captura -comprobado, coinciden los dos
   bordes-, el texto gana 56 px y la tarjeta encoge 24 px de alto.
   Ningun texto queda cortado.                                 */
@media (max-width: 767px) {
  .mc-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================================
   BL. EL ASIENTO CONTABLE: LOS MONTOS BAJO SU PROPIA COLUMNA
   ---------------------------------------------------------
   "hay montos que literalmente no se entienden nada. Nada,
   absolutamente nada". Medido, y no era el tamano de letra.

   Cada .ledger-row es su PROPIA rejilla -no una tabla-, con
   columnas en fracciones: 2fr 1fr 1fr 1fr. Como `1fr` es en
   realidad minmax(auto, 1fr), ninguna columna baja de su
   min-content, y el min-content cambia de fila en fila segun lo
   que le toque. Resultado medido: la cabecera cerraba sus
   columnas en 164/211/259/306, la primera fila en 169/210/278 y
   la segunda en 153/195/237. Es decir, "Debe" y "Haber" estaban
   escritos ENCIMA de columnas que no eran las de sus cifras.
   Por eso no se entiende: los numeros no estan donde dice.

   De paso, el nombre de cuenta se apretaba en 84-100 px y se
   partia en cuatro y hasta seis lineas.

   En el telefono se pasa a dos lineas por asiento: el nombre de
   cuenta ocupa el ancho entero -y baja de 56-74 px de alto a 37-
   y debajo van CC, Debe y Haber en columnas de ancho FIJO, que
   es lo unico que garantiza que coincidan entre filas al ser
   rejillas independientes. Medido despues: Debe cierra en 240 y
   Haber en 318 en las tres filas, sin una sola celda cortada, y
   el bloque entero solo crece 13 px.

   minmax(0, 1fr) y min-width: 0 son los que quitan el suelo de
   min-content; sin ellos vuelve el desajuste aunque se fijen las
   otras columnas -probado: con 1fr suelto la fila del medio se
   corria 17 px a la derecha-.                                 */
@media (max-width: 767px) {
  .ledger-row {
    grid-template-columns: minmax(0, 1fr) 72px 72px !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .ledger-row > * { min-width: 0 !important; }
  .ledger-row > *:first-child { grid-column: 1 / -1 !important; }
  .ledger-row > *:nth-child(3),
  .ledger-row > *:nth-child(4) { white-space: nowrap !important; }
}


/* =========================================================
   BM. EL FORMULARIO DE DEMO, CON SITIO PARA RESPIRAR
   ---------------------------------------------------------
   Mirando la pantalla, no midiendo: el modal abria bien pero el
   formulario salia estrangulado. El titulo "¡Contactanos!" se
   partia en "¡Contactano" y "s!" en la linea siguiente, el
   iframe tenia barra de desplazamiento HORIZONTAL propia -dentro
   de un modal que ya se desplaza en vertical- y el primer campo
   quedaba fuera de la vista.

   La cuenta, en una pantalla de 375: 20 px de relleno del fondo
   a cada lado, mas 28 px del recuadro a cada lado. Noventa y
   seis pixeles, un 26 % de la pantalla, gastados en aire antes
   de que empiece el formulario, que se quedaba con 277.

   Bajando a 10 y 16 el formulario pasa a 321 px -44 mas-, y con
   eso: el titulo cabe en una linea, desaparece la barra
   horizontal y se ve el campo "Nombre". El recuadro sigue
   entrando entero de alto -682 de 812-.

   Es el formulario por el que entra cada contacto del sitio; es
   el sitio donde menos conviene ahorrar espacio.             */
/* Las dos convenciones del zip original, que no comparten clase: .modal en
   10 paginas y .modal-box en las otras 5 -index, onboarding, precios,
   quienes-somos y partner-, esta ultima con 40 px de relleno en vez de 28.
   Medido en la portada antes de cubrirla: el formulario se quedaba en 264 px
   y "¡Contactanos!" volvia a partirse en "¡Contactano" y "s!". */
@media (max-width: 767px) {
  .modal-overlay { padding: 10px !important; }
  .modal-overlay > .modal,
  .modal-overlay > .modal-box {
    padding: 16px !important;
    max-width: none !important;
    width: 100% !important;
  }
}


/* =========================================================
   BN. EL FORMULARIO SE PRECARGA, Y MIENTRAS TANTO LO DICE
   ---------------------------------------------------------
   Visto en pantalla, no medido: con el bloque BH el modal abria
   al instante pero el formulario tardaba en aparecer y durante
   ese rato se veia un recuadro BLANCO con solo el titulo. Medido
   aqui, en local: la peticion a HubSpot empieza al abrir y tarda
   997 ms. En un telefono con datos moviles son varios segundos
   de caja vacia. Desde fuera eso no parece "cargando": parece
   que el boton no hizo nada.

   Era un efecto secundario de BH: al ocultar el modal de verdad
   -display:none- el iframe deja de pedirse en la carga de la
   pagina, que es justo lo que se buscaba, pero entonces empieza
   a pedirse cuando ya es tarde.

   La salida es pedirlo en medio: ni durante la carga de la
   pagina -que era el problema original- ni al abrir -que es este
   problema-, sino cuando la pagina ya termino y el telefono esta
   ocioso. Eso lo enciende la clase .precargando, que el puente
   pone sola pasado el load; con ella el modal vuelve a tener
   caja -y el iframe se pide- pero sigue invisible y sin
   responder al dedo, porque opacity: 0 y pointer-events: none
   los sigue poniendo la regla base.

   El letrero es el cinturon para la primera visita en una red
   lenta: se dibuja DETRAS del iframe -que es transparente
   mientras no ha cargado y opaco en cuanto carga-, asi que no
   hay que quitarlo ni saber cuando llego. Nunca mas un recuadro
   blanco sin explicacion.                                     */
.modal-overlay .clobi-form-container { position: relative; }
.modal-overlay .clobi-form-container::before {
  content: "Cargando formulario…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: rgba(26, 47, 90, .55);
}
.modal-overlay .clobi-form-container > iframe {
  position: relative;
  z-index: 1;
}


/* =========================================================
   BO. "TOTALES" PEGADO AL MONTO
   ---------------------------------------------------------
   Visto al mirar la tarjeta del asiento ya corregida: la ultima
   fila se leia "Totales$9.800.000". Medido: entre el final de la
   etiqueta y el principio de la cifra habia CERO pixeles. No es
   cosa del bloque BL -esta fila no es .ledger-row, es su propio
   .ledger-total en flex- sino de origen.

   Es la regla de siempre sobre el aire entre una etiqueta y lo
   que acompana. Se le da un hueco de 12 px, la etiqueta deja de
   encogerse y las dos cifras se alinean a la derecha, que es
   donde se leen las columnas Debe y Haber de arriba.          */
@media (max-width: 767px) {
  .ledger-total {
    gap: 12px !important;
    align-items: baseline !important;
  }
  .ledger-total .lt-label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .ledger-total .lt-val {
    flex: 1 1 auto !important;
    text-align: right !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   BP. LA PRECARGA TAMBIEN EN LA PORTADA
   ---------------------------------------------------------
   El bloque BN solo QUITABA el display:none propio. Eso basta
   donde la caja del modal es flex de serie, pero medido en la
   portada no pasaba nada: index.html trae en su <style> su
   propio `.modal-overlay{display:none}` -misma especificidad
   que la de la hoja compartida, pero mas tarde en el documento,
   el patron de siempre en este sitio-, asi que quitar el nuestro
   dejaba el suyo en pie. Resultado medido: la clase .precargando
   se ponia y el modal seguia en display:none, es decir la
   portada -la pagina mas visitada- se quedaba sin precarga y
   volvia a mostrar el recuadro vacio al abrir.

   Aqui el estado de precarga se declara entero en vez de contar
   con lo que traiga cada pagina: caja si, visible no, y sordo al
   dedo. El :not de las dos clases hace que deje de aplicar en
   cuanto se abre, y entonces manda la regla de apertura de la
   pagina.                                                     */
.modal-overlay.precargando:not(.open):not(.active) {
  display: flex !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   BQ. LA BANDA DE COLOR VUELVE AL BORDE DE LA TARJETA
   ---------------------------------------------------------
   "dice onboarding advanced y arriba dice completo y tiene como
   una linea azul por encima... que no queda bien."

   La linea es .card-band, la banda de color que identifica cada
   plan. Esta pensada para ser el BORDE de arriba de la tarjeta:
   la pagina le da width:100% y deja la tarjeta con padding:0,
   repartiendo el relleno por dentro, en .card-body.

   Lo que la descolocaba era una regla de este mismo fichero: el
   bloque que iguala todas las tarjetas del telefono les impone
   padding: 24px. A esta le sobra -ya tiene el suyo dentro- y con
   el la banda quedaba 25 px por debajo del borde y 25 px metida
   por cada lado: medido, 45..330 dentro de una tarjeta de
   20..355. Ahi deja de leerse como borde y pasa a ser una raya
   suelta en medio de la nada. Peor todavia: la etiqueta
   "COMPLETO", que va absoluta a 20 px del borde, caia justo
   encima de esa raya.

   La excepcion se escribe con el MISMO selector que impone el
   relleno mas :has(> .card-band), no con uno mas corto: esos
   tres :not() suman especificidad -son (0,5,0), no (0,2,0)- y
   cualquier selector razonable pierde contra ellos aunque lleve
   !important. Comprobado: .section .onb-card{padding:0!important}
   no movia nada.

   Medido despues: la banda arranca en el borde -21..354 sobre
   una tarjeta 20..355-, la etiqueta ya no la toca, el titulo
   gana 48 px y entra en una linea, y la tarjeta encoge 169 px.
   overflow:hidden es para que la banda respete la curva de la
   esquina en vez de asomar por fuera.                        */
@media (max-width: 767px) {
  .section [class*="-card"]:not(.country-card):not([class*="card-icon"]):not([class*="-card-"]):has(> .card-band) {
    padding: 0 !important;
    overflow: hidden !important;
  }
}


/* =========================================================
   BR. EL HERO NO DICE DOS VECES DONDE ESTAS
   ---------------------------------------------------------
   "modulo ventas, modulo ventas, de nuevo se vuelve a repetir."
   No era una impresion: la cabecera de Ventas trae DOS eyebrows
   hermanos, uno encima del otro, "Clobi ERP → Modulos → Ventas"
   y "Modulo · Ventas". Dicen lo mismo con dos formatos.

   Revisadas las 15 paginas, es la unica con dos; las demas
   llevan uno solo y con el mismo formato -"Modulo · Contabilidad",
   "Modulo · Inventario"...-. Asi que lo que sobra es la variante
   de migas, no la etiqueta: quitandola, Ventas queda igual que
   sus hermanas.

   Se oculta el que TIENE otro detras, no "el segundo": asi la
   regla vale para cualquier cabecera donde se vuelva a colar un
   duplicado, y si algun dia queda uno solo no hace nada.       */
.hero .eyebrow:has(~ .eyebrow) { display: none !important; }


/* =========================================================
   BS. LA CIFRA Y SU ETIQUETA DEJAN DE IR PEGADAS
   ---------------------------------------------------------
   "El numero esta muy cerca del texto principal." Medido en la
   franja de cifras: 6 px entre una cifra de 32 px y su etiqueta,
   contra 24 px entre una fila y la siguiente. La proporcion va
   al reves de lo que el ojo necesita: dentro del grupo casi no
   hay aire y entre grupos hay poco mas, asi que las cuatro
   cifras se leen como un bloque continuo en vez de como cuatro
   datos.

   Se separa la etiqueta a 10 px y se abre la fila a 30. Con eso
   la distancia entre grupos triplica la de dentro del grupo, que
   es lo que hace que cada cifra se lea con su texto y no con la
   de abajo. No se toca el tamano de nada.

   Vale para las dos paginas que usan esta franja, portada y
   Ventas.                                                     */
@media (max-width: 767px) {
  .stats-strip { row-gap: 30px !important; }
  .stat-item .stat-txt { margin-top: 10px !important; }
}


/* =========================================================
   BU. LA CAPTURA DEL MODULO OCUPA LA TARJETA ENTERA
   ---------------------------------------------------------
   "un dashboard que sea real"... "hay un dashboard falso". Una
   parte de esa sensacion es de tamano: en Cuentas por Cobrar las
   cuatro capturas de producto se dibujaban a 283 px dentro de una
   pantalla de 375, porque quedaban metidas en el relleno de 24 px
   de su tarjeta. Una interfaz de ERP encogida a 283 px con su
   texto a escala no parece una captura de producto, parece un
   dibujo pequeno.

   La captura se saca del relleno -solo ella, el texto de la
   tarjeta lo conserva- y pasa a 331 px, medido: 48 mas, un 17 %.
   overflow: hidden en la tarjeta para que la captura se corte con
   la curva de la esquina en vez de asomar cuadrada por fuera.
   Comprobado que no genera desbordamiento horizontal.

   Esto es tamano, no contenido: las capturas siguen siendo las
   mismas. Los paneles que el cliente ve "falsos" por su CONTENIDO
   -cifras, densidad, realismo- son otra conversacion y no se
   tocan aqui.                                                  */
@media (max-width: 767px) {
  .showcase-item { overflow: hidden !important; }
  .showcase-item .si-screen {
    margin-left: -24px !important;
    margin-right: -24px !important;
    width: auto !important;
    max-width: none !important;
  }
}


/* =========================================================
   BV. LOS PANELES DEL ERP DEJAN DE SER UNA MINIATURA
   ---------------------------------------------------------
   "un dashboard que sea real"... "hay un dashboard falso".

   Medido, la causa no era el contenido -las cifras y los nombres
   ya son verosimiles: $15.458.100, C. Mendoza R.- sino el
   TAMANO. Los paneles se dibujaban con la proporcion del
   escritorio, 900/562, que en un telefono deja un marco de
   331x207. En esa franja no cabe una aplicacion: cabe su
   cabecera. Y el texto, que escala con el ancho del marco, caia
   a 11 px de base con detalles de 6,1 px. Un ERP de 6 px no
   parece una captura de producto, parece el dibujo de una.

   Dos cambios, los dos de escala, ninguno de contenido:

   1. El marco pasa a 5/4 en el telefono. No es un capricho de
      proporcion: es que 285x228 SI da para una aplicacion, y
      900/562 no. Medido: el panel de Empleados pasa de 5 filas
      apretadas a la barra lateral entera, el buscador y la tabla
      con sus filas legibles; el de Cuentas por Cobrar pasa de
      ensenar "cabecera + pestanas" a ensenar tambien los tramos
      de mora con sus importes.

      Se probo tambien 1/1 y se descarto: da mas alto, pero en los
      paneles con pocas filas -Comprobantes tiene cinco- dejaba
      casi un tercio del marco en blanco, y un panel medio vacio
      vuelve a parecer falso. Con 5/4 el contenido llena el marco
      y la ultima fila queda cortada a media altura, que es justo
      lo que dice "aqui sigue habiendo lista".

   2. El texto NO se agranda. Se probo subirlo a clamp(12px,
      4.3cqw, 14px) y el cliente lo rechazo al verlo en el
      telefono: "se ven con un zoom y se ve barato... no se ven
      100% completas". Tenia razon y es medible: con la letra mas
      grande las columnas de las tablas ya no cabian en el ancho y
      el texto se cortaba por la derecha -"Remuneraciones Mensual
      Mar...", "Ingresos Ventas Equipos 2026" partido-. Una
      captura con el texto comido por el borde es justo lo que
      delata que es un dibujo. Con la escala original -max(11px,
      3.9cqw)- medido: 0 textos cortados en los paneles de
      Contabilidad, contando los de la cinta fuera de vista. La
      ganancia real esta en el alto del marco, no en la letra.

   Los telefonos dibujados dentro de las capturas -.es-movil, con
   su 900/1948- se quedan como estan: ahi la proporcion alargada
   ES el mensaje.                                              */
@media (max-width: 767px) {
  .cl-pa-marco:not(.es-movil) { aspect-ratio: 5 / 4 !important; }
}
/* Los seis contadores de antiguedad -Vigente, 1-30, 31-60, 61-90, 90+,
   Total- iban en UNA fila flex: seis tarjetas en 272 px son 40 px cada una, y
   "$15.458.100" en 40 px se apila en tres o cuatro renglones. Medido en
   Cuentas por Cobrar: 302 px de alto por tarjeta, los montos ilegibles. Es,
   literalmente, "hay montos que no se entienden nada". En dos columnas cada
   tarjeta mide 135 px y todos los montos caben en una linea. El nowrap es el
   cinturon: una cifra no se parte. */
@container (max-width: 420px) {
  .cl-pa .cl-pa-contadores {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5em !important;
  }
  .cl-pa .cl-pa-contador b { white-space: nowrap; }
}


/* =========================================================
   BY. NINGUN NUMERO SE PARTE, NINGUNA PESTANA SE DESCUADRA
   ---------------------------------------------------------
   "numeros escritos 0 y un 6 abajo". Medido con precision de
   decimas: en Compras los pasos del flujo -.fi-num- van a 40 px
   en una caja FIJA de 48 px. Los anchos reales del texto son
   01 = 39,6 · 02 = 47,4 · 03 = 48,0 · 04 = 49,7 · 05 = 48,1.
   Al "04" le faltan 1,7 px y al "05" 0,1 px, y en vez de salirse
   un pelo el navegador los parte: el "0" arriba y el "4" o el "5"
   debajo. El "03" cabe por cero pixeles.

   La caja pasa a 1.4em -56 px a 40 px de letra-: holgura para
   cualquier pareja de digitos, no solo para estos cinco. Y el
   nowrap para todas las cifras grandes del sitio, que es la regla
   de siempre: una cifra no se parte. Se aplica a las siete
   familias de numeros de paso y marca de agua que hay en las
   paginas, no solo a la que fallo.

   Las pestanas: "Stock en Tiempo Real" partia su texto en dos
   lineas y, como el texto es un nodo suelto dentro de un flex,
   el icono se quedaba solo pegado al borde izquierdo mientras las
   dos lineas se centraban aparte. Parecia otro boton. Medido: el
   texto mide 131 px y con el icono y el hueco pedia 155 en 146.
   Con 6 px de hueco y de relleno cabe en una linea, el icono
   queda junto a su texto como en las otras cuatro, y todas las
   filas miden lo mismo -44 px, antes 60 la primera-.            */
.flow-item .fi-num {
  width: 1.4em !important;
  flex: 0 0 1.4em !important;
}
:is(.fi-num, .step-num, .fc-num, .tl-num, .si-num, .feat-number, .bc-num, .stat-num) {
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  .feat-tabs > *,
  .screens-tabs > * {
    white-space: nowrap !important;
    gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* =========================================================
   BZ. LAS FICHAS Y METRICAS DE LOS PANELES, A DOS COLUMNAS
   ---------------------------------------------------------
   Mismo defecto que los contadores de antiguedad, encontrado al
   barrer TODAS las rejillas de todos los paneles de 420 px o menos
   en las 15 paginas, no solo la que se habia visto:

     .cl-pa-metricas  Ventas: 6 metricas en fila, 35 px cada una
                      Compras: 4 metricas, 65 px cada una
     .cl-pa-detalle   Inventario: ficha de un movimiento en 4
                      columnas de 48 px. "$1.580.000" y "Laptop
                      Dell Latitude 5540 (LAPTOP-DELL-5540)" metidos
                      en 48 px: el monto partido en dos lineas y el
                      nombre del producto en seis.

   El diseno de escritorio -muchas columnas en una fila- no se
   recalculo para el panel estrecho. A dos columnas cada celda
   mide unos 135 px: el monto cabe entero y el texto largo parte
   por palabras, no por letras.

   El barrido tambien marco .cl-pa -la barra lateral de iconos,
   34 px- y .cl-pa-banda -un icono de 14 px junto a su texto-: las
   dos son estrechas a proposito y no se tocan.                 */
@container (max-width: 420px) {
  .cl-pa .cl-pa-metricas,
  .cl-pa .cl-pa-detalle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5em !important;
  }
}


/* =========================================================
   CA. LOS PAISES, COMO LISTA Y NO COMO CUATRO CAJAS DESIGUALES
   ---------------------------------------------------------
   En la portada las cuatro tarjetas de paises iban a dos columnas
   de 154 px, con 118 px utiles para el texto. Medido, ninguna de
   las cuatro lineas de organismo cabia -"SUNAT · Disponible hoy"
   pide 181 px- y al partir dejaban el punto medio colgando al
   final de la linea: "SUNAT ·" arriba, "Disponible hoy" abajo.
   Encima la bandera iba centrada y el texto alineado a la
   izquierda, las tarjetas median distinto -184 y 221 px- y la
   etiqueta "PRONTO" de Argentina quedaba 19 px mas abajo que la
   de Ecuador porque su texto habia partido en mas lineas.

   En el telefono pasan a filas: bandera a la izquierda, pais y
   organismo al lado, y "PRONTO" a la derecha. Medido: las cuatro
   filas miden lo mismo -86 px-, cada organismo cabe en una sola
   linea, las dos etiquetas "PRONTO" quedan a la misma altura y a
   la misma distancia del borde, y no hay desbordamiento.

   El hueco entre filas baja a 10 px: con 28, que es el hueco comun
   de todas las rejillas del sitio, una lista de cuatro renglones
   se leia como cuatro bloques sueltos. .grid.countries-grid tiene
   la especificidad justa para ganarle a esa regla general.      */
@media (max-width: 767px) {
  .grid.countries-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .countries-grid .country-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .countries-grid .country-card .country-flag {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  .countries-grid .country-card > div:not(.country-flag) { flex: 1 1 auto; min-width: 0; }
  .countries-grid .country-card h3 { margin: 0 0 4px !important; }
  .countries-grid .country-card p { margin: 0 !important; white-space: nowrap; }
  .countries-grid .country-card .coming-tag {
    margin: 0 0 0 auto !important;
    align-self: center !important;
    flex: 0 0 auto;
  }
}


/* =========================================================
   CB. EL ICONO DE LAS GARANTIAS, CUADRADO Y JUNTO A SU TITULO
   ---------------------------------------------------------
   Las tres tarjetas de la portada -"Estandares ISO", "Seguridad
   de datos", "Actualizaciones automaticas"- llevan un icono en un
   azulejo al lado del texto. Medido: el azulejo quedaba en 25 x 56
   px, una pastilla estrecha y alta, porque la columna de texto se
   llevaba todo el ancho del flex y el icono, sin ancho fijo,
   encogia. Y con align-items: center flotaba a media altura de un
   parrafo de cinco lineas, lejos del titular al que acompana.

   Azulejo fijo de 48 x 48 y alineado arriba: medido, el icono y el
   titular empiezan a la misma altura en las tres tarjetas, y el
   relleno lateral baja de 28 a 20 para que el texto no pierda
   ancho -229 px, 3 menos que antes-.                          */
@media (max-width: 767px) {
  .iso-badge {
    align-items: flex-start !important;
    padding: 22px 20px !important;
    gap: 16px !important;
  }
  .iso-badge .iso-icon {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
}


/* =========================================================
   CC. EL TITULO Y SU DESCRIPCION, SEPARADOS COMO PAREJA
   ---------------------------------------------------------
   Dos parejas titulo + texto quedaban pegadas, medido:
     "Proceso de migracion" (portada): cada paso, 3 px entre el
       titulo -"Diagnostico y levantamiento"- y su descripcion.
     Add-on de Precios: 2 px entre "Add-on: IA Generativa" y
       "Unico addon disponible · Opcional".
   Con 2-3 px el ojo no separa donde acaba el titulo y empieza el
   texto: se lee como un bloque continuo. Se abre a 6 y 4 px, que
   sigue siendo claramente menos que la distancia al paso o al
   elemento siguiente, asi que cada titulo se sigue leyendo con SU
   texto y no con el de abajo.

   Vale tambien en escritorio: la auditoria a 1440 encontro la misma
   pareja de los pasos de la portada a 3 px.                      */
.step-text h4 { margin-bottom: 6px !important; }
@media (max-width: 767px) {
  .addon-inline-text h3 { margin-bottom: 4px !important; }
}


/* =========================================================
   CD. NINGUN PUNTO MEDIO COLGANDO DE UNA LINEA
   ---------------------------------------------------------
   Barrido con un detector propio -el punto medio "·" medido como
   primer o ultimo glifo de su linea- en las 15 paginas. Tres
   casos, los tres corregidos por su causa:

   1. Quienes somos: las filas de pais daban 66 px al nombre del
      organismo porque la etiqueta "PROXIMAMENTE" -138 px- se
      quedaba en la misma fila. "Direccion de Impuestos y Aduanas
      Nacionales · DIAN" salia palabra por palabra en seis lineas
      y el punto abria la ultima. La etiqueta baja debajo del
      texto, alineada con el: el organismo pasa a 191 px, dos
      lineas como mucho y el punto en medio de su linea.

   2. Partners: la insignia "Tier 2 · Premium" partia en dos -97
      px de ancho- dejando el punto al final. Una insignia no se
      parte nunca; con nowrap mide 120 px y cabe en su cabecera.

   3. Precios: "/ usuario<br>· mes" trae el salto escrito en el
      original. En el telefono se oculta ese salto y el precio se
      lee en una sola linea -el build le pone el espacio que el
      original no tenia antes del punto, ver build_zen.py-.      */
@media (max-width: 767px) {
  .c-row {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 10px !important;
  }
  .c-row .c-left {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }
  .c-row .c-left > div:not(.c-flag) { flex: 1 1 auto !important; min-width: 0 !important; }
  .c-row .c-badge { margin-left: 48px !important; flex: 0 0 auto !important; }

  .tier-badge { white-space: nowrap !important; }

  .per br { display: none; }
  .per { white-space: nowrap; }
  .price-right { flex: 1 1 auto; min-width: 0; }
}


/* =========================================================
   CE. LAS PREGUNTAS FRECUENTES, UNA TARJETA POR PREGUNTA
   ---------------------------------------------------------
   Con el acordeon ya funcionando -ver formularios.py, no abria
   ni en el original- aparecio lo que tapaba estar siempre
   cerradas: el build habia convertido cada pregunta en un boton
   fantasma, con su propio fondo blanco, esquinas de 10 px y
   sombra. Cerrada no se nota; abierta, la pregunta quedaba como
   una pastilla redonda posada encima de la respuesta: una caja
   dentro de otra, con la costura a la vista.

   El fondo blanco pasa a la tarjeta entera y la pregunta pierde
   esquinas y sombra: abierta, pregunta y respuesta son una sola
   tarjeta continua. OJO, probado y descartado: quitarle solo el
   fondo al boton deja la pregunta transparente sobre la seccion
   azul oscuro, texto navy sobre navy, practicamente invisible.

   Solo las preguntas CON acordeon -.faq-item:has(> .faq-q)-: las
   de Partners van siempre abiertas, con su propio marcado, y no
   se tocan.                                                    */
.faq-item:has(> .faq-q) {
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.faq-item > .faq-q {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
  transform: none !important;
}



/* =========================================================
   CF. LAS TRES PANTALLAS DEL HERO, EN MAZO
   ---------------------------------------------------------
   "que esten apiladas las 3 y que vayan cambiando una
   sobrepuesta sobre otra, tipo mazo... sin ese movimiento hacia
   la izquierda", "que se vea similar en pc o igual" y con el
   impacto del hero de la portada.

   Sustituye a la cinta (bloques AO, BT y BX). Las tres cartas
   ocupan la MISMA celda de una rejilla, asi que el alto del mazo
   es el de una sola y nada se desplaza de lado. La de delante
   mide 1060 px -la ventana de la portada, 1102-, y las otras
   dos asoman por ARRIBA, 22 y 44 px, un 5 y un 10 % mas
   estrechas: se leen como cartas de detras y no tapan ni un
   pixel de la de delante. Un velo navy las oscurece un 34 y un
   58 %, que es lo que da la profundidad sin desenfocar nada.

   El cambio: la de delante baja un 9 % mientras se desvanece y
   reaparece al fondo; la siguiente avanza a su sitio. Todo es
   transform y opacity, que compone la GPU.

   Las tarjetas flotantes son las que cada cabecera ya traia,
   vestidas como las dos de la portada -blancas, 14 px de radio,
   la misma sombra- y en sus mismas esquinas. Igual que alli,
   desaparecen por debajo de 780 px: en el telefono el mazo va
   solo, con el mismo gesto y la misma proporcion de carta.
   ========================================================= */
.hero .cl-mazo-col {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 0 !important;
  transform: none !important;
}
.hero .cl-mazo-escena {
  --asoma: 22px;
  position: relative;
  width: min(100%, 1060px);
  margin-inline: auto;
  perspective: 1600px;
}
/* La letra de las capturas del mazo la fija el bloque CG, igual que en
   todas las demas: en proporcion al ancho de la carta. */
.hero .cl-mazo {
  display: grid;
  padding-top: calc(var(--asoma) * 2);
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.215, .61, .355, 1);
}
.hero .cl-mazo > .cl-mazo-carta {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 28px 70px rgba(3, 10, 30, .5), 0 0 0 1px rgba(255, 255, 255, .08);
  transform-origin: 50% 0;
  transition: transform .75s cubic-bezier(.215, .61, .355, 1);
}
.hero .cl-mazo > .cl-mazo-carta > .cl-pa-marco {
  width: 100%;
  max-width: none;
  border-radius: inherit;
}
.hero .cl-mazo > .cl-mazo-carta[data-pos="0"] { z-index: 3; transform: none; }
.hero .cl-mazo > .cl-mazo-carta[data-pos="1"] {
  z-index: 2;
  transform: translateY(calc(var(--asoma) * -1)) scale(.95);
  pointer-events: none;
}
.hero .cl-mazo > .cl-mazo-carta[data-pos="2"] {
  z-index: 1;
  transform: translateY(calc(var(--asoma) * -2)) scale(.9);
  pointer-events: none;
}
.hero .cl-mazo-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: #0A1A3C;
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease;
}
.hero .cl-mazo-carta[data-pos="1"] .cl-mazo-velo { opacity: .34; }
.hero .cl-mazo-carta[data-pos="2"] .cl-mazo-velo { opacity: .58; }

.hero .cl-mazo > .cl-mazo-carta.cl-mazo-sale {
  animation: cl-mazo-sale .9s cubic-bezier(.4, 0, .2, 1) both;
}
/* La salida dura 220 ms y acelera -ease-in-: en 380 ms la carta que se va
   y la que llega se veian una sobre otra, medio transparentes, y dos
   interfaces encimadas se leen como una mancha. Luego la carta reaparece al
   fondo del mazo sin prisa. */
@keyframes cl-mazo-sale {
  0%   { transform: none; opacity: 1; z-index: 4; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  24%  { transform: translateY(7%) scale(.97); opacity: 0; z-index: 4; }
  25%  { transform: translateY(calc(var(--asoma) * -2)) scale(.9); opacity: 0; z-index: 0; animation-timing-function: ease-out; }
  100% { transform: translateY(calc(var(--asoma) * -2)) scale(.9); opacity: 1; z-index: 0; }
}
/* La plantilla apaga toda animacion en pantallas tactiles y restaura a mano
   las que valen la pena; esta es solo transform y opacity. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .hero .cl-mazo > .cl-mazo-carta.cl-mazo-sale {
    animation: cl-mazo-sale .9s cubic-bezier(.4, 0, .2, 1) both !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .cl-mazo, .hero .cl-mazo > .cl-mazo-carta, .hero .cl-mazo-velo { transition: none; }
}

/* La inclinacion de la ventana de la portada, con su misma medida, y como
   alli se endereza bajo el cursor. Solo con raton y pantalla ancha. */
@media (min-width: 1024px) and (hover: hover) {
  .hero .cl-mazo { transform: rotateY(-4deg) rotateX(2deg); }
  .hero .cl-mazo-escena:hover .cl-mazo { transform: none; }
}

/* La lupa que en pantallas tactiles avisa de que la captura se amplia solo
   tiene sentido en la de delante: en las de detras asomaba como medio
   circulo oscuro en cada franja, y ademas por encima del velo. */
.hero .cl-mazo > .cl-mazo-carta .cl-pa-marco::after { transition: opacity .4s ease; }
.hero .cl-mazo > .cl-mazo-carta:not([data-pos="0"]) .cl-pa-marco::after { opacity: 0; }

/* Los puntos dicen cual de las tres esta delante y dejan elegirla. Redondos
   los tres -el activo, mas grande y verde-: nada de barritas. */
.hero .cl-mazo-puntos {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 22px;
}
.hero .cl-mazo-punto {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.hero .cl-mazo-punto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  transition: transform .35s ease, background-color .35s ease;
}
.hero .cl-mazo-punto[aria-pressed="true"]::before {
  background: #52D68A;
  transform: scale(1.45);
}
.hero .cl-mazo-punto:focus-visible { outline: 2px solid #52D68A; outline-offset: 1px; }

/* --- las tarjetas flotantes ------------------------------------------- */
.hero .cl-mazo-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  max-width: 300px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 44px rgba(6, 16, 36, .34);
  pointer-events: none;
}
/* Las mismas esquinas que en la portada, medidas alli: la de abajo cuelga
   75 px por la izquierda y apoya en el borde inferior; la de arriba asoma
   por encima de la ventana. Asi tapan el canto de la carta y no su
   contenido: con bottom: 9 % la de Contabilidad partia el menu lateral y
   dejaba a la vista "r Cobrar" y "r Pagar". */
/* ...pero nunca pegadas al borde de la pantalla: (100% - 100vw)/2 es lo que
   el mazo, centrado, deja libre a cada lado, en negativo. 100vw incluye la
   barra de desplazamiento -11 a 15 px-, por eso se suman 24: medido a 1024,
   con 12 quedaban a 6 px del borde visible; con 24, a 18. */
.hero .cl-mazo-chip-a { left: max(-7%, calc((100% - 100vw) / 2 + 24px)); bottom: -30px; }
.hero .cl-mazo-chip-b { right: max(-4%, calc((100% - 100vw) / 2 + 24px)); top: -10px; }
@media (prefers-reduced-motion: no-preference) {
  .hero .cl-mazo-chip { animation: c-flotar 7s ease-in-out infinite; }
  .hero .cl-mazo-chip-b { animation-duration: 8.5s; animation-direction: reverse; }
}
/* Cada cabecera traia su tarjeta con su propio fondo, posicion y colores
   -oscura con cifra dorada en Contabilidad, una tarjeta de 481x393 en
   Nomina-. Dentro de la envoltura se desvisten todas igual. */
.hero .cl-mazo-chip > * {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  /* la tarjeta de liquidaciones traia overflow: hidden, y sin su relleno
     recortaba el primer y el ultimo glifo: "Nomina" y "empleados" */
  overflow: visible !important;
  color: #24333A !important;
}
/* Sus adornos se quedan fuera: la de Nomina traia en ::before una barra
   degradada de 2 px que, sin su caja, se pintaba como una raya suelta
   encima de la tarjeta. Doble clase en lo que sigue porque la hoja de cada
   pagina viste las suyas con !important y el mismo peso. */
.hero .cl-mazo-chip > *::before,
.hero .cl-mazo-chip > *::after { display: none !important; }
.hero .cl-mazo-chip.cl-mazo-chip :is(.chip-icon, .ac-icon, .fb-emoji, .fc-emoji, .fc-e) {
  flex: none;
  display: grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #E7F7EE !important;
  box-shadow: none !important;
  color: #1E9E5A !important;
}
.hero .cl-mazo-chip.cl-mazo-chip :is(.chip-icon, .ac-icon, .fb-emoji, .fc-emoji, .fc-e) svg { width: 18px !important; height: 18px !important; }
/* "Stock bajo detectado" es un aviso: su icono va en ambar, no en el verde
   de "todo en orden" de las otras. */
.hero .cl-mazo-chip.cl-mazo-chip .ac-icon { background: #FFF3DC !important; color: #B7791F !important; }
.hero .cl-mazo-chip.cl-mazo-chip :is(.ac-text, .fb-text, .fc-t) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}
.hero .cl-mazo-chip.cl-mazo-chip :is(.chip-val, .pc-big, .fc-val, strong) {
  display: block;
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #0F1F3D !important;
  white-space: nowrap;
}
.hero .cl-mazo-chip.cl-mazo-chip :is(.chip-lbl, .pc-sub, .pc-title, .fc-lbl, .ac-text span, .fb-text span, .fc-t span) {
  display: block;
  margin: 2px 0 0 !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #55606D !important;
  white-space: nowrap;
}
/* Nomina: de la tarjeta de liquidaciones queda el titulo, la cifra y su
   pie, como "Posicion neta hoy" en la portada. Las cuatro filas por
   empleado eran una segunda tabla compitiendo con la captura. */
.hero .cl-mazo-chip.cl-mazo-chip > .payroll-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.hero .cl-mazo-chip.cl-mazo-chip > .payroll-card :is(.pc-row, .pc-period, .pc-title svg) { display: none !important; }
.hero .cl-mazo-chip.cl-mazo-chip > .payroll-card .pc-header { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.hero .cl-mazo-chip.cl-mazo-chip > .payroll-card .pc-title { margin: 0 0 2px !important; }
/* ...y la otra ya no repite su importe: lo dice la tarjeta de al lado. */
.hero .cl-mazo-chip.cl-mazo-chip .fb-text span { display: none !important; }
.hero .cl-mazo-chip.cl-mazo-chip > .screen-badge {
  font-family: var(--font-display);
  font-size: .9375rem !important;
  font-weight: 700 !important;
  color: #0F1F3D !important;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .hero .cl-mazo-chip { display: none !important; }
  .hero .cl-mazo-escena { --asoma: 12px; }
  .hero .cl-mazo > .cl-mazo-carta {
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(3, 10, 30, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .hero .cl-mazo-puntos { margin-top: 14px; }
}



/* =========================================================
   CG. LAS CAPTURAS, ENTERAS A CUALQUIER TAMANO
   ---------------------------------------------------------
   "hay imagenes de la ui que aun no se ven 100% completas... se
   ven con un zoom y se ve barato". Medido con un detector nuevo
   -el anterior no veia el corte si la cifra iba en un bloque hijo
   de la celda-: solo Contabilidad tenia 50 textos cortados en seco
   ("$9.800.0", "Aprob", "14.851.2") en las capturas de 598 y 498
   px, y Modulos 7.

   La causa es la misma que en el hero: los paneles se calcaron a
   1400 px con letra de 14, y el suelo de 13 px les deja a 498 una
   letra 2,6 veces mas grande de lo que le toca. Eso ES el efecto
   zoom. Ahora, por encima de 420 px, la letra va en proporcion al
   ancho -1,09 cqw, 11,6 px a 1060- con un suelo de 9 px: la
   captura se ve como una captura real reducida, entera. Medido en
   Contabilidad: 50 cortes a 13 px, 0 a 9,5 en las de 498. Por
   debajo de 421 px sigue la maqueta de telefono del bloque AL, que
   reordena en vez de encoger.

   Y lo que aun no quepa -un nombre de cuenta largo- termina en
   "...", como en la aplicacion de verdad. La celda ya pedia
   text-overflow: ellipsis, pero es flex, y en un flex el "..."
   solo lo pinta el hijo: el hijo no lo pedia y el texto se cortaba
   en seco.                                                      */
/* Ajuste posterior, medido con un segundo detector -el de cifras que acaban
   en "..."-: a 12,4 px el hero de Cuentas por Pagar dejaba "$28.203..." y
   "$25.882..." en la columna Pagado, y Contabilidad tres glosas. Una cifra
   con puntos suspensivos tampoco es una captura completa. Con 1,09 cqw -11,6
   a 1060- y suelo de 9 px: 0 cifras recortadas en los ocho heros y en las
   capturas de seccion. */
@container (min-width: 421px) {
  .cl-pa { --t: max(9px, min(11.6px, 1.09cqw)); }
}
/* Los cinco tramos de antiguedad -Al dia, 1 a 30, 31 a 60...- en fila no caben
   en una captura de 518 a 571 px: cada ficha media 82 y "$15.458.100" pedia
   75 de los 70 que le quedaban. Entre 421 y 640 van en tres columnas. */
@container (min-width: 421px) and (max-width: 640px) {
  /* lo mismo con las cinco KPI de Reportes de Compras: "$43.155.350" pedia
     86 px y la ficha dejaba 72 */
  .cl-pa .cl-pa-contadores,
  .cl-pa .cl-pa-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45em;
  }
  /* y en las tablas de muchas columnas -Finiquitos, a 460 px- la columna de
     texto largo (w3, "Necesidades de la Empresa") se quedaba el triple de
     ancho y la fecha y el monto acababan en "...". Se reparte mas parejo:
     el texto largo puede recortarse, una cifra no. */
  .cl-pa .cl-pa-tr .w3 { flex-grow: 1.6; }
  .cl-pa .cl-pa-tr .w2 { flex-grow: 1.3; }
}
/* Las seis metricas de Proyeccion de Ventas en fila dejaban 77 px para
   "$577.278.282", que pide 98: salian "$577.2..." en el hero. Hasta 1100 px
   van en tres columnas, dos filas; en el visor ampliado, las seis en fila. */
@container (min-width: 421px) and (max-width: 1100px) {
  .cl-pa .cl-pa-metricas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cl-pa .cl-pa-td > :is(b, em, span, i),
/* tambien las dos lineas de una celda de nombre -"Adobe Creative Cloud" y
   debajo su codigo "LIC-ADOBE-CC-TEAM"-: el codigo se cortaba en seco */
.cl-pa .cl-pa-doslin > :is(b, em, span, i) {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Dos cortes mas que solo salian en el telefono, medidos a 375:
   - una pastilla de estado ("Aplica") junto a un titulo encogia 2 px por
     flex-shrink y se comia la ultima letra. Una pastilla no se encoge.
   - la tercera pestana de Vacaciones, "Permisos / Licencias", quedaba 137 px
     fuera del marco. En un panel estrecho las pestanas bajan de linea.
   - las tres fichas de barras de Proyeccion de Ventas iban en fila, a 78 px
     cada una: "Tendencia" + barra + "91.9%" no cabe en 78. Se apilan. */
.cl-pa :not(.cl-pa-td) > .cl-pa-past { flex-shrink: 0; }
@container (max-width: 420px) {
  .cl-pa .cl-pa-tabs { flex-wrap: wrap; row-gap: .35em; }
  .cl-pa .cl-pa-barras { flex-direction: column; gap: .45em; }
  /* los datos en monoespaciada -RUT, folios, codigos- corren mas anchos que
     el texto de al lado: "97.011.000-4" pedia 79 px de los 74 de su columna */
  .cl-pa .cl-pa-td > .cl-pa-mono { font-size: .9em; }
  /* en el telefono la columna de texto largo (w3) se quedaba con 148 px y el
     monto de al lado con 49: "$365.800" pedia 74 y salia "$365..." */
  .cl-pa .cl-pa-tr .w3 { flex-grow: 1.2; }
  .cl-pa .cl-pa-tr .w2 { flex-grow: 1.1; }
  /* el RUT va debajo del nombre, como en la aplicacion movil: en la misma
     linea no cabian los dos y el RUT se cortaba en "76.412.8..." */
  .cl-pa .cl-pa-td > .cl-pa-rut { display: block; margin-top: .15em; }
  /* las metricas de Proyeccion de Ventas van a dos columnas (bloque BZ); con
     su icono de 28 px a la izquierda, "$577.278.282" se quedaba en 77 px */
  .cl-pa .cl-pa-metrica > .cl-pa-tj-ico { display: none; }
}



/* =========================================================
   CH. EL GUION AL LADO DE LOS TITULOS, SUS ULTIMAS VIDAS
   ---------------------------------------------------------
   "sigue esa linea que te la llevo pidiendo quitar hace rato de
   todos lados". La raya junto al rotulo ya se habia quitado en
   .eyebrow (::before y ::after) y en .eyebrow-line (bloque BB),
   pero tres paginas la dibujaban con OTRO nombre, y solo se veian
   en el telefono -en escritorio esos rotulos arrancan invisibles
   hasta que entran en pantalla, y por eso un barrido a 1440 no las
   encontraba-:
     Compliance  .s-eyebrow-line          28 x 2 px, dos veces
     Partners    .section-label::before   24 x 2 px
     Compras     .flow-title-small::before 24 x 1 px
   Y la 404 separaba sus garantias con palitos verticales de 1 x 24.
   Se buscaron por su forma -cualquier regla de 1 a 3 px de grueso y
   10 a 60 de largo con fondo- en la hoja comun y en el <style> de
   las 18 paginas: no queda ninguna fuera de las capturas del ERP,
   el icono del menu, la barra de progreso de lectura y el esquema
   de arquitectura, que son dibujo y no adorno.                 */
[class*="eyebrow-line"],
.trust-sep { display: none !important; }
.section-label::before,
.flow-title-small::before { content: none !important; display: none !important; }


/* =========================================================
   CI. LA LUPA NO TAPA EL TITULO DE LA CAPTURA
   ---------------------------------------------------------
   En pantallas tactiles cada captura lleva arriba a la derecha una
   lupa de 30 px que avisa de que se amplia. Con un titulo largo
   -"Operaciones de Factoring", "Entidades de Factoring"- la lupa
   caia encima de la ultima letra: medido en Tesoreria, 4 choques a
   375 px. La cabecera de la captura le guarda su sitio.           */
@media (hover: none) {
  .cl-pa-marco[data-ampliable] .cl-pa-cab,
  [data-ampliable] > .cl-pa-marco .cl-pa-cab { padding-right: 34px; }
}


/* =========================================================
   CJ. LA CABECERA CUANDO NO HAY MENU DE ESCRITORIO
   ---------------------------------------------------------
   "el logo de clobi esta como un poquito cortado". Medido: por
   debajo de 1080 px los enlaces del menu se ocultan, pero su <nav>
   se queda en la fila con 0 px de ancho y cobra dos huecos de 12 px;
   y los botones no van a la derecha, siguen al logo. A 375 px el
   boton del menu acababa en 368 -13 px fuera de la columna-, y a
   360 px -el ancho de medio parque Android- se salia 8 px de la
   pantalla: la pagina se podia arrastrar de lado y el logo quedaba
   cortado por la izquierda. En una tableta de 1024 los botones
   quedaban pegados al logo en vez de al borde.

   Ahora el <nav> vacio se retira de la fila, los botones van al
   borde derecho y el boton del menu sobresale 13 px -su relleno
   interior-, de modo que las tres rayas del icono caen justo en el
   carril de 20 px, como el logo en el lado izquierdo. En pantallas
   de 340 px o menos el boton de demo de la cabecera se retira: la
   barra fija de abajo ya lo lleva y no hay ancho para los dos. */
@media (max-width: 1080px) {
  .nav .nav-inner > nav { display: none; }
  .nav .nav-actions { margin-left: auto; margin-right: -13px; }
}
@media (max-width: 340px) {
  .nav .nav-actions > .btn-primary { display: none; }
}


/* =========================================================
   CK. LA SEGUNDA LICENCIA: CLOBI CONTADORES
   ---------------------------------------------------------
   "Falto agregar la opcion de la otra licencia que es para
   contadores" (fuente: el folleto Clobi ERP.pdf; ver licencias.py).
   La tarjeta se arma copiando la de Full Access, asi que hereda
   todo su estilo; aqui solo se resuelve el reparto:

   - Escritorio: tres columnas -Full Access, Contadores y la
     columna de "por que" + IA-, con las dos licencias a la misma
     altura y su boton alineado abajo: dos tarjetas de precio que
     acaban a distinta altura leen como si una estuviera incompleta.
   - Tableta: las dos licencias lado a lado y la tercera columna
     debajo, a lo ancho, con sus dos tarjetas en fila.
   - Telefono: una columna, como ya estaba.                      */
@media (min-width: 1100px) {
  .pricing-grid.con-contadores {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .pricing-grid.con-contadores {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .pricing-grid.con-contadores > :nth-child(3) {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (min-width: 768px) {
  .pricing-grid.con-contadores > :is(.plan-card, .pricing-card) {
    display: flex;
    flex-direction: column;
  }
  .pricing-grid.con-contadores > .plan-card > .btn,
  .pricing-grid.con-contadores > .pricing-card > :last-child { margin-top: auto; }
  .pricing-grid.con-contadores > :is(.plan-card, .pricing-card) > .addon-inline,
  .pricing-grid.con-contadores > :is(.plan-card, .pricing-card) > .addon-box { margin-bottom: 20px; }
}

/* --- el cuadro comparativo ----------------------------------------- */
.lic-quien {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 8px 0 28px;
}
.lic-quien-card {
  padding: 26px 26px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.lic-quien-card .lic-pregunta {
  margin: 0 0 10px;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--body);
}
.lic-quien-card .lic-respuesta {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--zen-green);
}
.lic-quien-card p:last-child { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--muted); }

.lic-tabla-wrap {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.lic-tabla {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .9375rem;
}
.lic-tabla th, .lic-tabla td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.4;
  color: var(--body);
}
.lic-tabla thead th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
/* filas alternadas en vez de lineas entre filas (sin rayas) */
.lic-tabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--cl-teal, #0ea5a4) 5%, transparent); }
.lic-tabla tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.lic-tabla small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body, inherit);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
}
.lic-si {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint-green);
  color: #1E9E5A;
  font-weight: 700;
  font-size: .875rem;
}
.lic-crecer {
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  background: var(--tint-sky);
  border: 1px solid var(--tint-sky-line);
}
.lic-crecer .lic-crecer-t {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.lic-crecer p:last-child { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--body); }

@media (max-width: 767px) {
  .lic-quien { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
  .lic-quien-card { padding: 22px 20px 20px; }
  .lic-tabla { font-size: .875rem; }
  .lic-tabla th, .lic-tabla td { padding: 13px 12px; }
  .lic-tabla thead th { font-size: .9375rem; }
  .lic-tabla tbody th { width: 36%; }
  .lic-crecer { padding: 20px; }
}

/* "/ usuario" y debajo "· mes": el salto viene escrito en el original y en
   escritorio dejaba el punto medio al principio de la segunda linea. En el
   telefono ya se unia (bloque CD); ahora en todos los anchos. */
.plan-price-row .per br { display: none; }
.plan-price-row .per { white-space: nowrap; }

/* Tabla de licencias en el telefono: tres columnas de ~100 px partian las
   palabras ("Contadore|s", "Remuneraci|ones"). Cada fila pasa a ser un bloque:
   el rotulo arriba a todo el ancho y los dos valores lado a lado debajo. */
@media (max-width: 600px) {
  .lic-tabla, .lic-tabla thead, .lic-tabla tbody { display: block; }
  .lic-tabla tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 12px 16px; }
  .lic-tabla th, .lic-tabla td { display: block; padding: 0; width: auto; }
  .lic-tabla thead tr { padding: 14px 16px; background: var(--surface-2); }
  .lic-tabla thead th { background: transparent; }
  .lic-tabla thead th:first-child { display: none; }
  .lic-tabla tbody th { grid-column: 1 / -1; width: auto; margin-bottom: 6px; }
  .lic-tabla tbody td { align-self: center; }
}

/* En Precios la seccion que sigue a la comparativa es la curva oscura de
   Preguntas frecuentes, que sube 112 px sobre ella (.sec-domo): se comia la
   nota "Una de tus empresas necesita crecer?". Colchon de 112 px mas el
   aire normal de la seccion; en Modulos la sigue una seccion comun y no
   hace falta. */
#licencias.section:has(+ .bg-dark), #licencias.section:has(+ .sec-domo) { padding-bottom: 184px !important; }

/* Identificadores (#MAN-0004, folios, RUT) nunca se cortan en dos lineas, y en
   el telefono el dato largo de un detalle ocupa el ancho entero en vez de
   partirse a mitad de palabra ("remuneracione|s"). */
.cl-pa .cl-pa-mono { white-space: nowrap; }
.cl-pa :is(.cl-pa-pares, .cl-pa-detalle) b { overflow-wrap: normal; }
@container (max-width: 420px) {
  .cl-pa :is(.cl-pa-pares, .cl-pa-detalle) > .largo { grid-column: 1 / -1; }
}

.cl-pa .cl-pa-nb { white-space: nowrap; }
/* Fila concepto/valor de un bloque de calculo (Nomina, finiquito): en el
   telefono el valor, que no se parte, dejaba a la etiqueta en 12 px y
   "Valor dia" salia letra por letra. Ahora la etiqueta conserva sus
   palabras y, si no caben las dos cosas, el valor baja a la linea
   siguiente, alineado a la derecha. */
.cl-pa .cl-pa-bloque-fila { flex-wrap: wrap; row-gap: .1em; }
.cl-pa .cl-pa-bloque-fila > :is(span, em, i) { overflow-wrap: normal; }
.cl-pa .cl-pa-bloque-fila > :is(b, strong) { margin-left: auto; }
.cl-nb { white-space: nowrap; }

/* Costura bajo el hero oscuro: el borde inferior del hero es una mezcla de
   vineta, brillo verde y degradado que cambia con el ancho, y la banda de la
   onda arrancaba con otro azul: se veia un escalon a todo lo ancho. En vez de
   perseguir ese color, los dos lados se encuentran en el mismo navy plano:
   el hero se funde a --dark en sus ultimos ~60 px (sombra interior, que pinta
   sobre el fondo y bajo el contenido) y la banda empieza en --dark. */
.hero-dark, .section.bg-dark:has(+ .section.has-shape) { box-shadow: inset 0 -90px 70px -30px var(--dark); }
:is(.hero-dark, .section.bg-dark) + .section.has-shape > .shape-band.top { background: var(--dark); }

/* Pasos 1-2-3 del hero de Onboarding en el telefono: el 3 caia solo en una
   segunda fila. Tres columnas iguales. */
@media (max-width: 600px) {
  .hero .c-orig .steps-row, .steps-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    justify-items: center;
  }
  .hero .c-orig .step-label, .steps-row .step-label { font-size: 10px !important; letter-spacing: .03em !important; text-align: center; white-space: nowrap; }
}

/* El telefono del hero de Reportes (116 px) cortaba el saludo en
   "Buenas tardes, Usu...": en esa pantalla tan estrecha el titulo baja a
   una segunda linea, como lo haria la app de verdad. */
.cl-pa-marco.es-movil .cl-pa-cab .cl-pa-tit { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }

/* Modulos: la caja de la captura (.mc-screen) tenia alto fijo -200/216 px,
   pensado para una imagen recortada con object-fit- y ahora lleva el calco
   del ERP, que es mas alto: medido, se cortaban 35 px del panel en
   escritorio, 171 px en las dos tarjetas anchas y 52 en el telefono, y
   encima el velo inferior de la pagina (::after) borraba lo que quedaba.
   Con un calco dentro, la caja mide lo que mide el panel y no lleva velo:
   la captura se ve entera. */
.mc-screen:has(> .cl-pa-marco) { height: auto !important; min-height: 0 !important; }
.mc-screen:has(> .cl-pa-marco)::after { display: none; }
/* Cada tarjeta lleva su numero (01..09) arriba a la derecha de la captura,
   justo donde en el telefono aparece la pastilla de la lupa: el 01 quedaba
   montado encima. En estas tarjetas la lupa baja a la esquina inferior
   derecha, que ahora si se ve. */
@media (hover: none) {
  .mc-screen .cl-pa-marco[data-ampliable]::after { top: auto; bottom: 8px; }
}

/* La estrella de la etiqueta de la tarjeta Contadores (portada) venia en
   blanco, como en la etiqueta verde de Full Access, y sobre la etiqueta
   clara no se veia. Toma el color del texto de la etiqueta. */
.pricing-card.pricing-contadores .pricing-badge .ico { color: currentColor !important; }

/* Tablas comparativas del sitio (Onboarding, Partners, niveles de itzen):
   las filas se separaban con lineas. Igual que la tabla de licencias, se
   separan con filas alternadas de fondo suave: sin rayas. */
.c-tabla td, .c-tabla th { border-top: none !important; border-bottom: none !important; }
.c-tabla tbody tr:nth-child(even) { background: rgba(37, 99, 176, .045); }

/* Menu del telefono: las opciones se separaban con una linea de 1 px. Sin
   rayas: la separacion la da el aire de cada fila. */
.mobile-menu a:not(.btn), .mobile-menu button.mm-toggle { border-bottom: 0 !important; }

/* El icono del recuadro de la tarjeta no encoge aunque el texto sea largo
   (en Contadores quedaba en 7 px de ancho y se veia como una rayita). */
.pricing-card .addon-box .ai-icon { flex-shrink: 0; }
/* ...y el texto del recuadro de Contadores: la hoja de la portada lo pinta
   blanco al 70 % (".addon-box span", pensado para la tarjeta oscura) y sobre
   el fondo claro no se leia. */
.pricing-card.pricing-contadores .addon-box span { color: var(--muted) !important; opacity: 1 !important; }
.pricing-card.pricing-contadores .addon-box .ai-icon { flex: 0 0 auto !important; }
.pricing-card.pricing-contadores .addon-box .ai-icon .ico { width: 24px; height: 24px; }

/* Franja azul suelta (23-09-2026, Reportes en un monitor de 1920): la onda
   de transicion pinta navy arriba porque "baja" de la seccion oscura anterior,
   pero en 18 paginas entre el hero y esa seccion hay una franja CLARA de cifras
   (.stats-row, .numbers, .stats-strip, .stats-band, .stats). Ahi la banda navy
   quedaba como una raya gruesa entre dos zonas claras. Sin nada oscuro arriba
   no hay onda: la seccion arranca con su aire normal. (La franja de la
   portada, .stats-bar, es oscura y conserva su onda.) */
:is(.stats-row, .numbers, .stats-strip, .stats-band, .stats) + .section.has-shape > .shape-band.top { display: none !important; }
:is(.stats-row, .numbers, .stats-strip, .stats-band, .stats) + .section.has-shape { padding-top: clamp(64px, 7vw, 100px) !important; }

/* Cabecera centrada: un titulo con ancho maximo y margen 0 quedaba corrido a la
   izquierda del rotulo y del parrafo (Reportes: 140 px a 1920). Cada linea de
   una cabecera centrada se centra, tenga el ancho que tenga. */
.sec-head.center > :is(h1, h2, h3, h4, p, .lead) { margin-left: auto !important; margin-right: auto !important; }

/* Partners: la linea que unia los numeros de los pasos, fuera (sin rayas; los
   pasos ya van numerados). */
.flow-steps::before { display: none !important; }

/* =========================================================
   FLUIDEZ AL DESPLAZAR (23-09-2026: "que las paginas en celular y pc no se
   peguen tanto"). Medido en PC: siete animaciones infinitas a la vez -las
   tres manchas desenfocadas del fondo (blur 26 px, fijas detras de toda la
   pagina) y las tarjetas flotantes del hero, que ademas llevan desenfoque de
   fondo y lo recalculaban en cada fotograma- y la cabecera fija con
   backdrop-filter blur(16px), que se recalcula en cada paso del scroll.
   Todo queda en su sitio, quieto: el diseno es el mismo.
   ========================================================= */
.aurora i, .float-card, .hero-float, .hero .cl-mazo-chip, .cl-mazo-chip,
.device-badge, .device-mobile { animation: none !important; }
.nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .97) !important; }
/* sin el scroll suavizado de Lenis, los enlaces internos (#seccion) bajan
   con el desplazamiento nativo del navegador */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }