/* Cedra Trevinda: design system (dark theme, Colombian-flag palette).
   Tokens first, then base, header, components, sections, widgets, special offer. */

@font-face { font-family: "Sora"; src: url("../fonts/sora.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 113%; ascent-override: 85.8%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 100.4%; ascent-override: 106.2%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: optional; }

:root {
  /* surfaces (deep navy family derived from the flag blue) */
  --bg: #070D24;
  --bg-2: #0A1331;
  --surface: #0F1A3F;
  --surface-2: #15224E;
  --surface-3: #1C2C62;
  --border: #243468;
  --border-soft: rgba(130, 150, 220, .16);
  /* text */
  --text: #EEF1F8;
  --text-muted: #A8B3D2;
  --text-dim: #7F8CB6;
  /* accent: flag gold, softened */
  --accent: #E3B62E;
  --accent-hover: #F1C94D;
  --accent-ink: #0B1431;
  --accent-tint: rgba(227, 182, 46, .12);
  --accent-line: rgba(227, 182, 46, .38);
  /* flag secondaries */
  --blue-deep: #12307F;
  --blue: #1F3F9E;
  --blue-bright: #6A8CE8;
  --red: #EC6A73;
  --red-flag: #CE1126;
  --green: #45C494;
  /* decoration */
  --grid: rgba(120, 140, 210, .12);
  --grid-strong: rgba(130, 150, 225, .26);
  /* shape + elevation (shadows tinted toward the navy background) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, .5), 0 2px 8px rgba(2, 6, 23, .28);
  --shadow-md: 0 1px 2px rgba(2, 6, 23, .5), 0 12px 32px rgba(2, 6, 23, .45);
  --shadow-lg: 0 2px 4px rgba(2, 6, 23, .5), 0 28px 64px rgba(2, 6, 23, .6);
  --glow: 0 0 0 1px var(--accent-line), 0 12px 40px rgba(227, 182, 46, .12);
  /* type */
  --font-display: "Sora", "Sora Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --header-h: 76px;
  /* form card (off-white, not pure white) */
  --form-bg: #F1EEE4;
  --form-ink: #0B1431;
  /* textures as data URIs: faint grid + node mesh */
  --tex-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0V48' fill='none' stroke='%237892dc' stroke-opacity='.10'/%3E%3C/svg%3E");
  --tex-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%237892dc' fill-opacity='.22'/%3E%3C/svg%3E");
  --tex-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%237892dc' stroke-opacity='.16'%3E%3Cpath d='M20 40L90 90 150 30 230 80 190 160 110 150 20 40M90 90L110 150M150 30L190 160M230 80L240 220 190 160M110 150L70 230 20 200M70 230L150 240 190 160'/%3E%3Cg fill='%23E3B62E' fill-opacity='.45' stroke='none'%3E%3Ccircle cx='20' cy='40' r='2.5'/%3E%3Ccircle cx='90' cy='90' r='2.5'/%3E%3Ccircle cx='150' cy='30' r='2.5'/%3E%3Ccircle cx='230' cy='80' r='2.5'/%3E%3Ccircle cx='190' cy='160' r='2.5'/%3E%3Ccircle cx='110' cy='150' r='2.5'/%3E%3Ccircle cx='70' cy='230' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, iframe, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .16s var(--ease); }
a:hover { color: var(--accent-hover); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.14rem; letter-spacing: -.01em; }
h4 { font-size: 1rem; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---------- logo (inline SVG, theme-tokenised) ---------- */
.logo-lockup, .logo-mark { display: block; height: 44px; width: auto; }
.lg-tile { fill: var(--blue-deep); stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.lg-ring { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.lg-rise { fill: none; stroke: #EAF0FF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lg-node { fill: var(--red-flag); stroke: var(--bg); stroke-width: 1.2; }
.lg-word { fill: var(--text); }
.lg-sub { fill: var(--accent); }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }

/* ---------- flag bar (the flag as a brand rule: 50 / 25 / 25) ---------- */
.flagbar { display: flex; height: 4px; }
.flagbar i { display: block; height: 100%; }
.flagbar i:nth-child(1) { flex: 2; background: #FCD116; }
.flagbar i:nth-child(2) { flex: 1; background: #1F4BB8; }
.flagbar i:nth-child(3) { flex: 1; background: var(--red-flag); }
.flagbar--lg { height: 6px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 13, 36, .86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--border-soft); transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.site-header.is-scrolled { background: rgba(7, 13, 36, .96); box-shadow: var(--shadow-lg); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: calc(var(--header-h) - 4px); }
.nav { display: flex; align-items: center; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }
.nav__trigger, .nav__link { appearance: none; background: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem; color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease); }
.nav__trigger:hover, .nav__link:hover, .has-menu.is-open > .nav__trigger { background: var(--accent-tint); color: var(--accent-hover); }
.caret { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.has-menu.is-open > .nav__trigger .caret { transform: rotate(180deg); }
.nav .nav__cta { display: none; }
.header__cta { margin-left: 8px; white-space: nowrap; }

/* dropdown: a real surface with a caret notch, kept inside the viewport */
.menu { position: absolute; top: calc(100% + 12px); left: 0; min-width: 250px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; z-index: 5; }
.menu::before { content: ""; position: absolute; top: -6px; left: 26px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.menu--right { left: auto; right: 0; }
.menu--right::before { left: auto; right: 26px; }
.menu--wide { min-width: 540px; }
.menu--wide .menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { margin: 0; }
.menu__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 500; font-size: .93rem; transition: background .14s var(--ease), color .14s var(--ease); }
.menu__link:hover, .menu__link:focus-visible, .menu__link[aria-current="page"] { background: var(--accent-tint); color: var(--accent-hover); }
.menu__icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
@media (hover: hover) and (min-width: 1081px) {
  .has-menu:hover > .menu { opacity: 1; visibility: visible; transform: none; }
  .has-menu:hover > .nav__trigger { background: var(--accent-tint); color: var(--accent-hover); }
  .has-menu:hover > .nav__trigger .caret { transform: rotate(180deg); }
}
.has-menu.is-open > .menu { opacity: 1; visibility: visible; transform: none; }

.burger { display: none; appearance: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 46px; height: 46px; border-radius: var(--r-md); cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.burger svg { width: 24px; height: 24px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

@media (max-width: 1080px) {
  /* backdrop-filter would make the header the containing block of the fixed mobile panel */
  .site-header, .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .burger { display: inline-flex; }
  .header-inner .header__cta { display: none; }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; margin: 0; padding: 16px clamp(16px, 4vw, 40px) 32px; flex-direction: column; align-items: stretch; background: var(--bg); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__trigger, .nav__link { width: 100%; justify-content: space-between; padding: 14px 14px; font-size: 1.02rem; background: var(--surface); border: 1px solid var(--border-soft); }
  .menu, .menu--wide { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; display: none; margin-top: 6px; box-shadow: none; background: var(--bg-2); }
  .menu::before { display: none; }
  .has-menu.is-open > .menu { display: block; }
  .menu--wide .menu__list { grid-template-columns: 1fr; }
  .nav .nav__cta { display: inline-flex; margin-top: 16px; }
}

/* market ticker row (injected by the _beacon addon right after the header) */
.tv-ticker-wrapper { background: var(--bg-2) !important; border-bottom: 1px solid var(--border-soft); padding-inline: max(8px, calc((100vw - 1200px) / 2 + 24px)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: var(--r-md); border: 1.5px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: .97rem; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(227, 182, 46, .28); }
.btn--secondary { background: transparent; color: var(--accent); border-color: var(--accent-line); }
.btn--secondary:hover { background: var(--accent-tint); color: var(--accent-hover); border-color: var(--accent); transform: translateY(-2px); }
.btn--ghost { background: rgba(255, 255, 255, .05); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: var(--text); transform: translateY(-2px); }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.03rem; }
.btn--block { width: 100%; }

/* ---------- breadcrumbs ---------- */
.crumbs { background: var(--bg-2); border-bottom: 1px solid var(--border-soft); font-size: .86rem; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 10px 0; }
.crumbs__item { margin: 0; color: var(--text-muted); }
.crumbs__item + .crumbs__item::before { content: "/"; margin: 0 10px; color: var(--text-dim); }
.crumbs__item a { color: var(--text-muted); text-decoration: none; }
.crumbs__item a:hover { color: var(--accent); }
.crumbs__item [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- section scaffolding ---------- */
.section { position: relative; padding: clamp(52px, 7vw, 96px) 0; }
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.band-a { background: var(--bg); }
.band-b { background: var(--bg-2) var(--tex-grid); border-block: 1px solid var(--border-soft); }
.band-c { background: radial-gradient(900px 420px at 85% 0%, rgba(31, 63, 158, .34), transparent 70%), radial-gradient(520px 230px at 4% 72%, var(--accent-tint), transparent 70%), var(--bg) ; }
.band-c::before { content: ""; position: absolute; inset: 0; background: var(--tex-mesh); opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.band-d { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%) ; border-block: 1px solid var(--border-soft); }
.band-d::before { content: ""; position: absolute; inset: 0; background: var(--tex-dots); opacity: .6; pointer-events: none; }
.section > .container { position: relative; z-index: 1; }
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__lead { color: var(--text-muted); font-size: 1.08rem; margin-bottom: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--top { align-items: start; }
  .split--rev > :first-child { order: 2; }
}
.grid-auto { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.bento { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bento > * { grid-column: span 12; }
@media (min-width: 760px) {
  .bento > .span-4 { grid-column: span 4; }
  .bento > .span-5 { grid-column: span 5; }
  .bento > .span-6 { grid-column: span 6; }
  .bento > .span-7 { grid-column: span 7; }
  .bento > .span-8 { grid-column: span 8; }
}
@media (min-width: 760px) and (max-width: 1000px) {
  .bento > .span-4 { grid-column: span 6; }
}

/* ---------- cards, icon badges ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.card--static:hover { transform: none; border-color: var(--border-soft); box-shadow: var(--shadow-md); }
.card--glow { border-color: var(--accent-line); box-shadow: var(--glow); background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.card--flat { box-shadow: none; background: var(--surface); }
.card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.card__head h3 { margin: 0; }
.card p:last-child { margin-bottom: 0; }
.card__text { color: var(--text-muted); }
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { color: inherit; }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: .93rem; color: var(--accent); }
.card .more svg { width: 17px; height: 17px; transition: transform .16s var(--ease); }
.card:hover .more svg { transform: translateX(4px); }
.icon-badge { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-line); flex-shrink: 0; }
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge--lg { width: 58px; height: 58px; border-radius: 16px; }
.icon-badge--lg svg { width: 28px; height: 28px; }
.icon-badge--blue { background: rgba(106, 140, 232, .14); color: var(--blue-bright); border-color: rgba(106, 140, 232, .4); }
.icon-badge--red { background: rgba(236, 106, 115, .12); color: var(--red); border-color: rgba(236, 106, 115, .4); }
.icon-badge--round { border-radius: 50%; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--border); font-size: .88rem; font-weight: 600; color: var(--text); }
.pill svg { width: 16px; height: 16px; color: var(--accent); }

/* lists */
.list-check { list-style: none; padding: 0; margin: 0 0 1em; }
.list-check li { position: relative; padding-left: 32px; margin-bottom: .6em; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .22em; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B62E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; border: 1px solid var(--accent-line); }
.list-dash { list-style: none; padding: 0; }
.list-dash li { position: relative; padding-left: 22px; }
.list-dash li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 2px; background: var(--accent); border-radius: 2px; }

/* numbered steps: a small accent circle, never a giant numeral */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 16px; }
.step { counter-increment: step; position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; margin: 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.step:hover { transform: translateX(4px); border-color: var(--accent-line); }
.step::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.step h3 { margin: 2px 0 6px; font-size: 1.08rem; }
.step p { margin: 0; color: var(--text-muted); }
.steps--line .step:not(:last-child)::after { content: ""; position: absolute; left: 40px; top: 58px; bottom: -18px; width: 2px; background: linear-gradient(var(--accent-line), transparent); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-md); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.table th, .table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.table thead th { background: var(--surface-2); font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.table tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) th { background: rgba(255, 255, 255, .02); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font-weight: 700; color: var(--text); }
.table td { color: var(--text-muted); }
.table td strong { color: var(--text); }
.table tbody tr { transition: background .14s var(--ease); }
.table tbody tr:hover td, .table tbody tr:hover th { background: var(--accent-tint); }
.tick, .cross { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.tick { background: rgba(69, 196, 148, .16); color: var(--green); }
.cross { background: rgba(236, 106, 115, .14); color: var(--red); }
.tick svg, .cross svg { width: 16px; height: 16px; stroke-width: 2.6; }
.table--compare tbody td:nth-child(2) { background: rgba(227, 182, 46, .08) !important; }
.table--compare thead th:nth-child(2) { background: rgba(227, 182, 46, .16); color: var(--accent); }
.table--compare td:nth-child(2), .table--compare td:nth-child(3), .table--compare thead th:nth-child(2), .table--compare thead th:nth-child(3) { text-align: center; }
.table--compare tbody th { font-weight: 600; }
.table--compare tbody th span { display: block; font-weight: 400; color: var(--text-muted); font-size: .88rem; margin-top: 2px; }
.table--plans th:first-child, .table--plans td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 700; color: var(--text); }
.table--plans thead th:first-child { background: var(--surface-2); }
.table--plans td, .table--plans thead th:not(:first-child) { text-align: center; }
.table--plans td .tick { margin: 0 auto; }
.table--plans [data-plan].is-dim { opacity: .38; }
.table--plans [data-plan].is-pick { background: rgba(227, 182, 46, .09); }
.table-note { color: var(--text-muted); font-size: .92rem; margin-top: 14px; }

/* ---------- notices ---------- */
.notice { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
.notice svg { width: 26px; height: 26px; color: var(--accent); }
.notice p { margin: 0; color: var(--text-muted); }
.notice strong { color: var(--text); }
.notice--warn { border-color: rgba(236, 106, 115, .45); background: rgba(236, 106, 115, .07); }
.notice--warn svg { color: var(--red); }
.notice--info { border-color: var(--accent-line); background: var(--accent-tint); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.faq__item[open] { border-color: var(--accent-line); box-shadow: var(--shadow-md); }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; position: relative; border-radius: var(--r-lg); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B62E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s var(--ease); }
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__body { padding: 0 22px 20px; color: var(--text-muted); }
.faq__body p:last-child, .faq__body ul:last-child { margin-bottom: 0; }

/* ---------- prose (legal and long documentation pages) ---------- */
.prose { max-width: 820px; }
.prose h2 { margin-top: 2.2em; padding-top: .2em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--text-muted); }
.prose p strong, .prose li strong { color: var(--text); }
.prose ul { padding-left: 1.3em; }
.prose a { font-weight: 600; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--text-muted); font-size: .92rem; margin-bottom: 28px; }
.doc-meta span { display: inline-flex; align-items: center; gap: 8px; }
.doc-meta svg { width: 18px; height: 18px; color: var(--accent); }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 270px minmax(0, 1fr); align-items: start; } }
.toc { position: sticky; top: calc(var(--header-h) + 20px); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 18px 12px; box-shadow: var(--shadow-sm); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
.toc__title { font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.toc li { counter-increment: toc; margin: 0; }
.toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: .9rem; line-height: 1.35; transition: background .14s, color .14s; }
.toc a::before { content: counter(toc); flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: .74rem; font-weight: 700; margin-top: 1px; }
.toc a:hover, .toc a.is-active { background: var(--accent-tint); color: var(--text); }
@media (max-width: 999px) { .toc { position: static; max-height: none; } .toc ol { columns: 2; column-gap: 12px; } }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ---------- forms: the injected formFactory markup, styled to belong ---------- */
.form-block { background: var(--form-bg); color: var(--form-ink); border-radius: var(--r-xl); padding: clamp(20px, 2.6vw, 30px); box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .5); position: relative; }
.form-block::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #FCD116 0 50%, #1F4BB8 50% 75%, var(--red-flag) 75% 100%); }
.form-block__title { font-size: 1.32rem; margin: 6px 0 14px; color: var(--form-ink); letter-spacing: -.015em; }
.form-block__intro { color: #3A4670; margin: 0 0 14px; font-size: .96rem; }
.form-block form { margin: 0; }
.form-block input[type="text"], .form-block input[type="email"], .form-block input[type="tel"], .form-block input[type="password"] { font-family: var(--font-body) !important; font-size: 1rem !important; min-height: 50px; border-radius: 10px !important; border: 1.5px solid #B9C0D8 !important; background: #FBFAF6 !important; color: var(--form-ink) !important; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.form-block input:focus { outline: none !important; border-color: #1F4BB8 !important; box-shadow: 0 0 0 4px rgba(31, 75, 184, .18) !important; }
.form-block input[type="submit"], .form-block button[type="submit"] { font-family: var(--font-body) !important; font-weight: 800 !important; font-size: 1.04rem !important; min-height: 54px; border-radius: 12px !important; letter-spacing: .01em; cursor: pointer; transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s; box-shadow: 0 6px 18px rgba(11, 20, 49, .22); }
.form-block input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 26px rgba(11, 20, 49, .3); }
.form-block__note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; background: rgba(11, 20, 49, .06); border-radius: 10px; font-size: .92rem; font-weight: 600; color: #1B2755; }
.form-block__note svg { width: 20px; height: 20px; color: #1F4BB8; flex-shrink: 0; margin-top: 1px; }
.form-legal { margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: #4A5580; }
.form-legal a { color: #1F4BB8; font-weight: 700; }
.form-legal a:hover { color: #0F2E86; }

/* ---------- footer ---------- */
.site-footer { position: relative; margin-top: 0; background: var(--bg); overflow: hidden; isolation: isolate; }
.site-footer__bg { position: absolute; inset: 0 0 auto 0; height: min(560px, 100%); z-index: -1; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: .95; }
.site-footer__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 13, 36, .1) 0%, rgba(7, 13, 36, .2) 22%, rgba(7, 13, 36, .82) 48%, var(--bg) 74%); }
.site-footer__inner { padding-top: clamp(150px, 19vw, 260px); padding-bottom: 28px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-bottom: 40px; }
@media (min-width: 1000px) { .footer-top { grid-template-columns: 320px 1fr; } }
.footer-brand__text { color: var(--text-muted); margin: 16px 0; max-width: 34ch; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--text-muted); font-size: .94rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.footer-contact svg { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.footer-contact a { color: var(--text); }
.footer-cols { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: repeat(5, 1fr); } }
.footer-col__title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-family: var(--font-display); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-muted); text-decoration: none; font-size: .93rem; }
.footer-col a:hover { color: var(--accent); }
.footer-disclaimer { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 20px 22px; background: rgba(7, 13, 36, .72); border: 1px solid var(--border); border-radius: var(--r-lg); backdrop-filter: blur(6px); }
.footer-disclaimer svg { width: 26px; height: 26px; color: var(--accent); margin-top: 3px; }
.footer-disclaimer p { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text-muted); }
.footer-disclaimer strong { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); color: var(--text-dim); font-size: .84rem; }
.footer-bottom p { margin: 0; }
.footer-credit { max-width: 62ch; }
.footer-credit a { color: var(--text-muted); }

/* ---------- scroll reveal: enhancement only, content visible without JS ---------- */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- illustrations (inline SVG art, tokens only) ---------- */
.art { display: block; width: 100%; height: auto; }
.cn-up line { stroke: var(--green); stroke-width: 2; } .cn-up rect { fill: var(--green); }
.cn-dn line { stroke: var(--red); stroke-width: 2; } .cn-dn rect { fill: var(--red); }
.a-panel { fill: var(--surface); stroke: var(--grid-strong); stroke-width: 1.5; }
.a-bar { fill: var(--surface-2); }
.a-card { fill: var(--bg-2); stroke: var(--grid-strong); stroke-width: 1; }
.a-dot { fill: var(--grid-strong); } .a-dot--on { fill: var(--accent); }
.a-pill { fill: var(--accent-tint); stroke: var(--accent-line); }
.a-line { fill: var(--grid-strong); } .a-line--acc { fill: var(--accent); opacity: .75; }
.a-chip { fill: var(--accent); }
.a-end { fill: var(--red-flag); stroke: var(--bg); stroke-width: 2; }
.c-node circle:first-child { fill: var(--surface-2); stroke: var(--grid-strong); stroke-width: 1.5; }
.c-node--0 circle:first-child { stroke: var(--accent); } .c-node--1 circle:first-child { stroke: var(--blue-bright); } .c-node--2 circle:first-child { stroke: var(--red); }
.c-head { fill: var(--text-muted); } .c-body { fill: var(--text-muted); }
.l-hex path { fill: var(--surface-2); stroke: var(--grid-strong); stroke-width: 1.5; stroke-linejoin: round; }
.l-shield { fill: var(--accent); }
.l-pulse { fill: var(--accent); }
.o-sat { fill: var(--blue-bright); } .o-sat--b { fill: var(--accent); } .o-sat--c { fill: var(--red); }
.s-beam { fill: var(--accent); }
.hm-nodes .n { fill: var(--accent); } .hm-end { fill: var(--red-flag); stroke: #fff; stroke-opacity: .65; stroke-width: 2; }
.cn-up, .cn-dn { transform-box: fill-box; }
@keyframes beam { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(150px); } }
.s-beam { animation: beam 5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.l-pulse { animation: pulse 2.8s ease-in-out infinite; } .l-pulse:nth-of-type(2) { animation-delay: .6s; } .l-pulse:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pb-coin, .o-sat { animation: bob 5s ease-in-out infinite; } .pb-coin--b { animation-delay: 1s; } .pb-coin--c { animation-delay: 2s; }
.o-sat--b { animation-delay: 1.2s; } .o-sat--c { animation-delay: 2.2s; }
.art-frame { border-radius: var(--r-xl); }
.art-glow { filter: drop-shadow(0 24px 48px rgba(2, 6, 23, .6)); }

/* ---------- heroes ---------- */
.hero, .page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.hero__bg { position: absolute; top: -20vh; left: 0; width: 100%; height: 150vh; z-index: -3; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(95deg, rgba(7, 13, 36, .95) 0%, rgba(7, 13, 36, .82) 38%, rgba(7, 13, 36, .5) 70%, rgba(7, 13, 36, .66) 100%), linear-gradient(180deg, rgba(7, 13, 36, .35), transparent 30%, rgba(7, 13, 36, .85) 100%); }
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: none; pointer-events: none; }
.hero__canvas.is-on { display: block; }
.hero__motif { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; z-index: -1; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 60%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 35%), linear-gradient(180deg, #000 60%, transparent); mask-composite: intersect; }
@media (max-width: 979px) { .hero__motif { width: 100%; opacity: .55; } }
.hero__motif svg { width: 100%; height: 100%; }
.hero { padding: clamp(32px, 5vw, 68px) 0 clamp(40px, 6vw, 80px); }
.hero__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "more"; }
.hero__head { grid-area: head; }
.hero__more { grid-area: more; }
.hero__form { grid-area: form; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); grid-template-areas: "head form" "more form"; gap: 20px 56px; align-items: start; }
  .hero__form { align-self: start; }
  .hero__form .iconlinks { max-width: none; }
}
.hero h1 { max-width: 19ch; margin-bottom: .45em; font-size: clamp(2rem, 1.1rem + 2.9vw, 3.2rem); }
.hero h1 .hl { color: var(--accent); }
.hero__lead { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); color: #D3DAEE; max-width: 58ch; margin-bottom: 1em; }
.hero__points { list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__points li { margin: 0; }
.officeline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 20px; padding: 12px 16px; background: rgba(7, 13, 36, .55); border: 1px solid var(--border); border-radius: var(--r-lg); backdrop-filter: blur(8px); width: fit-content; max-width: 100%; }
.officeline__label { font-size: .92rem; color: var(--text-muted); }
.officeline .flag { width: 40px; height: auto; border-radius: 4px; box-shadow: var(--shadow-sm); }
.officeline__place { font-weight: 700; }
.iconlinks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 640px; }
.iconlink { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: rgba(15, 26, 63, .72); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: var(--text); backdrop-filter: blur(8px); transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.iconlink:hover { transform: translateY(-3px); border-color: var(--accent-line); background: rgba(21, 34, 78, .9); color: var(--text); }
.iconlink strong { display: block; font-family: var(--font-display); font-size: .98rem; line-height: 1.2; }
.iconlink small { display: block; color: var(--text-muted); font-size: .82rem; margin-top: 2px; }
.iconlink > svg { width: 20px; height: 20px; color: var(--accent); transition: transform .16s var(--ease); }
.iconlink:hover > svg { transform: translateX(4px); }

/* inner-page hero: copy left, registration form right, Bogotá night photo + motif */
.page-hero { padding: clamp(28px, 4.5vw, 64px) 0 clamp(36px, 5vw, 72px); background: var(--bg) url("../images/bogota-inner-1200.webp") center 40% / cover no-repeat; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(7, 13, 36, .95) 0%, rgba(7, 13, 36, .84) 45%, rgba(7, 13, 36, .5) 100%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-mesh) right center / 420px repeat-y; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 980px) { .page-hero__grid--form { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 56px; } .page-hero__grid--art { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; } }
.page-hero h1 { font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3rem); max-width: 20ch; }
.page-hero__lead { font-size: 1.1rem; color: #D3DAEE; max-width: 60ch; }
.page-hero__lead:last-child { margin-bottom: 0; }
.page-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.page-hero__facts li { margin: 0; }
.page-hero--doc { padding-bottom: clamp(28px, 4vw, 48px); }

/* ---------- home blocks ---------- */
.xchg { position: relative; }
.xchg__row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .xchg__row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .xchg__row { grid-template-columns: repeat(6, 1fr); } }
.xchg__item { display: grid; place-items: center; min-height: 104px; padding: 18px 12px; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-lg); color: #DCE3F5; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.xchg__item:hover { transform: translateY(-3px); border-color: var(--accent-line); color: var(--accent-hover); }
.xchg__item img { height: 40px; width: auto; max-width: 100%; }
.xchg__note { margin: 18px 0 0; color: var(--text-dim); font-size: .85rem; max-width: 80ch; }

.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1040px) { .calc-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.calc-wrap { background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--accent-line); border-radius: var(--r-xl); padding: clamp(18px, 2.4vw, 30px); box-shadow: var(--glow); }
.calc-wrap > :first-child { margin-top: 0; }
.calc-note { color: var(--text-dim); font-size: .85rem; margin: 12px 0 0; }

/* illustrative market panel (decorative canvas chart, lazy) */
.mkt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(16px, 2vw, 24px); box-shadow: var(--shadow-md); }
.mkt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mkt__title { margin: 0; font-size: 1.05rem; }
.mkt__tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 4px; padding: 4px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.mkt__tab { appearance: none; background: none; border: 0; color: var(--text-muted); font: 700 .84rem/1 var(--font-body); padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.mkt__tab:hover { color: var(--text); }
.mkt__tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.mkt__canvas-wrap { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2) var(--tex-grid); border: 1px solid var(--border-soft); aspect-ratio: 16 / 10; }
.mkt canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mkt__tip { position: absolute; z-index: 2; padding: 8px 10px; border-radius: 8px; background: rgba(7, 13, 36, .94); border: 1px solid var(--border); font-size: .76rem; line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.mkt__tip.is-on { opacity: 1; }
.mkt__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; font-weight: 600; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border); transition: background .18s; }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .18s var(--ease), background .18s; }
.toggle input:checked + .toggle__track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); background: var(--accent-ink); }
.toggle input:focus-visible + .toggle__track { outline: 3px solid var(--accent); outline-offset: 2px; }
.mkt__tf { display: inline-flex; gap: 4px; }
.mkt__tf button { appearance: none; background: transparent; border: 1px solid var(--border); color: var(--text-muted); font: 700 .8rem/1 var(--font-body); padding: 8px 11px; border-radius: 8px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mkt__tf button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.mkt__legend { margin: 12px 0 0; font-size: .8rem; color: var(--text-dim); }
.mkt__status { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.mkt__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.mkt__status.is-paused i { background: var(--red); }

/* review cards (masonry columns) */
.reviews { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (min-width: 720px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { margin: 0; display: flex; flex-direction: column; }
.review .stats { margin-top: auto; }
.review__top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent-line); background: var(--surface-2); object-fit: cover; flex-shrink: 0; }
.review__name { margin: 0; font-size: 1.05rem; }
.review__role { margin: 0; font-size: .86rem; color: var(--text-muted); }
.review__text { color: #CBD3EA; margin: 0 0 16px; }
.stats { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.stat dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); font-weight: 700; }
.stat dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); }
.stat--gain dd { color: var(--green); }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr 1fr; } }
.review-note { margin-top: 8px; color: var(--text-dim); font-size: .86rem; max-width: 80ch; }

.facts { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin: 0; }
.facts strong { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; }
.facts span { color: var(--text); }
.facts a { color: var(--accent); }
.band-photo { background: var(--bg); }
.band-photo::before { content: ""; position: absolute; inset: 0; background: url("../images/bogota-inner-1200.webp") center / cover no-repeat; opacity: .55; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 36, .96), rgba(7, 13, 36, .72)), linear-gradient(180deg, var(--bg), transparent 20%, transparent 80%, var(--bg)); }

.adv { display: grid; gap: 14px; }
.adv__row { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--r-lg); transition: transform .2s var(--ease), background .2s var(--ease); }
.adv__row:hover { transform: translateX(5px); background: var(--surface-2); }
.adv__row h3 { margin: 0 0 6px; }
.adv__row p { margin: 0; color: var(--text-muted); }

.cta-band { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(28px, 4vw, 52px); background: linear-gradient(120deg, var(--blue-deep), #0B1B55 60%, var(--surface-2)); border: 1px solid rgba(106, 140, 232, .4); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--tex-mesh) right / 340px repeat; opacity: .5; pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: .3em; }
.cta-band p { color: #D3DAEE; margin: 0; }
@media (min-width: 820px) { .cta-band { grid-template-columns: 1fr auto; } }

.flow { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: flow; margin: 0; padding: 0; list-style: none; }
.flow li { counter-increment: flow; position: relative; margin: 0; padding: 18px 18px 18px 18px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.flow li::before { content: counter(flow); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .85rem var(--font-display); margin-bottom: 12px; }
.flow h3 { font-size: 1rem; margin-bottom: 4px; }
.flow p { margin: 0; color: var(--text-muted); font-size: .92rem; }
@media (min-width: 900px) { .flow li:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 33px; width: 16px; height: 2px; background: var(--accent-line); } }

.tl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px solid var(--accent-line); display: grid; gap: 22px; }
.tl__item { position: relative; margin: 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.tl__item::before { content: ""; position: absolute; left: -35px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--accent-line); }
.tl__year { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1.15rem; margin: 0 0 6px; }
.tl__item p:last-child { margin: 0; color: var(--text-muted); }

.def { display: grid; grid-template-columns: 1fr; margin: 0; border: 1px solid var(--border-soft); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.def > div { display: grid; gap: 2px 20px; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); }
.def > div:last-child { border-bottom: 0; }
.def dt { font-family: var(--font-display); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.def dd { margin: 0; color: var(--text); }
@media (min-width: 720px) { .def > div { grid-template-columns: 240px 1fr; } }

.map-embed { width: 100%; max-width: 1100px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--surface); aspect-ratio: 16 / 9; min-height: 320px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

.vacancy { display: grid; gap: 18px; }
.vacancy__main h3 { margin-bottom: 6px; }
.vacancy__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vacancy__tags li { margin: 0; }
.vacancy__tags .pill { font-size: .8rem; padding: 5px 11px; }
@media (min-width: 760px) { .vacancy { grid-template-columns: 1fr auto; align-items: center; } }

.plan-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.plan-picks button { appearance: none; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font: 700 .88rem/1 var(--font-body); padding: 11px 16px; border-radius: var(--r-pill); cursor: pointer; transition: all .15s var(--ease); }
.plan-picks button:hover { color: var(--text); border-color: var(--accent-line); }
.plan-picks button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.plan-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; }
.plan-card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; margin: 6px 0 0; }
.plan-card__sub { color: var(--text-muted); font-size: .88rem; margin: 0 0 16px; }
.plan-card .list-check { margin-bottom: 20px; }
.plan-card .btn { margin-top: auto; }
.plan-card--feat { transform: translateY(-6px); }

/* fee estimator */
.feecalc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 860px) { .feecalc { grid-template-columns: 1fr 1fr; align-items: start; } }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 700; font-size: .92rem; }
.field output { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--fill, 30%), var(--surface-3) var(--fill, 30%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); cursor: grab; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent); cursor: grab; }
.range:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.range-minmax { display: flex; justify-content: space-between; color: var(--text-dim); font-size: .8rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button { appearance: none; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-muted); font: 700 .86rem/1 var(--font-body); padding: 11px 15px; border-radius: 10px; cursor: pointer; transition: all .15s var(--ease); }
.seg button[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.readout { display: grid; gap: 12px; }
.readout__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.readout__row span { color: var(--text-muted); font-size: .92rem; }
.readout__row strong { font-family: var(--font-display); font-size: 1.12rem; }
.readout__row--sum { border-color: var(--accent-line); background: var(--accent-tint); }

/* AI reaction simulator */
.aisim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 860px) { .aisim { grid-template-columns: 1fr 1fr; align-items: center; } }
.aisim__gauge { position: relative; max-width: 340px; margin-inline: auto; width: 100%; }
.aisim__gauge svg { width: 100%; height: auto; overflow: visible; }
.aisim__needle { transform-origin: 100px 100px; transition: transform .35s var(--ease); }
.aisim__state { margin-top: 6px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-2); }
.aisim__state strong { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 6px; }
.aisim__state i { width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.aisim__state[data-level="watch"] i { background: var(--accent); }
.aisim__state[data-level="pause"] i { background: var(--red); }
.aisim__state p { margin: 0; color: var(--text-muted); font-size: .94rem; }

/* tab-style definitions row used for glossary-like chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; }

.ticker-table td:first-child { font-family: var(--font-display); font-weight: 700; color: var(--accent); white-space: nowrap; }

.article-card h3 { font-size: 1.3rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: .86rem; color: var(--text-dim); margin-bottom: 14px; }
.article-meta span { display: inline-flex; gap: 6px; align-items: center; }
.article-meta svg { width: 16px; height: 16px; color: var(--accent); }

/* ---------- hidden special-offer page ---------- */
.urgency { background: linear-gradient(90deg, #7a0d19, var(--red-flag) 40%, #7a0d19); color: #fff; font-size: .88rem; font-weight: 700; }
.urgency__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; padding: 9px 0; }
.urgency__item { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.urgency__item svg { width: 17px; height: 17px; }
.urgency__bar { position: relative; width: 90px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.urgency__bar i { position: absolute; inset: 0 auto 0 0; background: #fff; border-radius: 99px; }
.special-hero .eyebrow { margin-bottom: 18px; }
.bonus-table .table { min-width: 480px; }
.bonus-figure { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); line-height: 1; color: var(--accent); }
.timer { display: inline-flex; align-items: flex-start; gap: 8px; }
.timer__seg { text-align: center; }
.timer__digits { display: flex; gap: 4px; }
.timer__digit { display: grid; place-items: center; width: clamp(34px, 9vw, 46px); height: clamp(48px, 12vw, 62px); border-radius: 10px; background: var(--bg); border: 1px solid var(--accent-line); box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .35), var(--shadow-sm); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--accent); font-variant-numeric: tabular-nums; }
.timer__label { display: block; margin-top: 6px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.timer__sep { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 62px; color: var(--accent); }
.sx-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), visibility .22s; }
.sx-modal.is-open { opacity: 1; visibility: visible; }
.sx-modal__overlay { position: absolute; inset: 0; background: rgba(3, 6, 20, .82); backdrop-filter: blur(6px); }
.sx-modal__card { position: relative; width: min(100%, 560px); max-height: calc(100vh - 32px); overflow-y: auto; background: linear-gradient(170deg, var(--surface-2), var(--surface)); border: 1px solid var(--accent-line); border-radius: var(--r-xl); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-lg), var(--glow); text-align: center; transform: translateY(14px) scale(.98); transition: transform .26s var(--ease); }
.sx-modal.is-open .sx-modal__card { transform: none; }
.sx-modal__close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s; }
.sx-modal__close:hover { background: var(--surface-3); transform: rotate(90deg); }
.sx-modal__art { max-width: 270px; margin: 4px auto 6px; }
.sx-modal h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem); margin-bottom: .35em; }
.sx-modal p { color: var(--text-muted); }
.sx-modal .timer { margin: 6px 0 20px; }
body.sx-lock { overflow: hidden; }

@media (max-width: 560px) {
  .officeline { padding: 10px 12px; }
  .hero h1 { max-width: none; }
  .btn--lg { padding: 0 20px; }
  .iconlink { grid-template-columns: 44px 1fr auto; }
}

.sticky-col { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) { .sticky-col { position: static; } }
ul.adv { padding: 0; margin: 0; list-style: none; }

/* calculator widget: bring its CTA in line with the site buttons (site CSS only, module untouched) */
.calc-widget__cta { font-family: var(--font-body) !important; font-weight: 800 !important; font-size: 1rem !important; min-height: 52px; padding: 0 28px !important; letter-spacing: .01em; transition: transform .16s var(--ease), filter .16s var(--ease) !important; }
.calc-widget__cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
.calc-widget__title { font-family: var(--font-display) !important; letter-spacing: -.02em; }

/* inner heroes on mobile: title, then the form, then the rest of the copy */
@media (max-width: 979px) {
  .page-hero__grid--form > :first-child { display: contents; }
  .page-hero__grid--form > :first-child > * { order: 3; }
  .page-hero__grid--form > :first-child > .eyebrow { order: 0; justify-self: start; }
  .page-hero__grid--form > :first-child > h1 { order: 1; }
  .page-hero__grid--form > :last-child { order: 2; }
}
@media (max-width: 640px) {
  .urgency { font-size: .62rem; }
  .urgency__inner { flex-wrap: nowrap; justify-content: space-between; gap: 6px; padding: 7px 0; }
  .urgency__item { gap: 4px; line-height: 1.2; }
  .urgency__item svg, .urgency__bar { display: none; }
}
@media (max-width: 640px) {
  .mkt__tabs { flex-wrap: nowrap; width: 100%; gap: 2px; }
  .mkt__tab { flex: 1 1 0; min-width: 0; padding: 9px 4px; font-size: .74rem; text-align: center; }
}
@media (max-width: 979px) {
  .hero__grid { grid-template-areas: none; }
  .hero__head { display: contents; }
  .hero__head > * { order: 3; grid-area: auto; }
  .hero__head > h1 { order: 1; }
  .hero__form { order: 2; grid-area: auto; }
  .hero__more { order: 4; grid-area: auto; }
}