/* qombo v3 — estilos */

/* tokens/colors.css */
/* Qombo — Color tokens
   Brand anchors (from Manual de Marca):
   Azul oscuro #14123A · Negro #231F20 · Blanco #FFFFFF · Verde #84DCCF
   Sober, digital, trustworthy base + one fresh mint accent.

   Rebrand accents (2026, additive — anchors above are unchanged):
   Iris #6E6BF2 · Amber #F6A93B — expressive accents for the open-brand
   direction. Use sparingly alongside navy + mint. */

:root {
  /* ---- Brand anchors (exact) ---- */
  --qombo-navy: #14123A;   /* azul oscuro — primary brand color */
  --qombo-ink:  #231F20;   /* negro — text */
  --qombo-white:#FFFFFF;   /* blanco */
  --qombo-mint: #84DCCF;   /* verde — accent */

  /* ---- Navy scale (deep, cool indigo) ---- */
  --navy-950: #0C0A20;
  --navy-900: #14123A;     /* base */
  --navy-800: #1E1B4B;
  --navy-700: #2B2760;
  --navy-600: #3D3879;
  --navy-500: #524C93;
  --navy-400: #756FAE;

  /* ---- Mint scale (accent) ---- */
  --mint-50:  #EEFBF8;
  --mint-100: #D6F4EE;
  --mint-200: #B2E8DD;
  --mint-300: #84DCCF;     /* base accent */
  --mint-400: #54C6B5;
  --mint-500: #2BA593;     /* accent on light surfaces / hover */
  --mint-600: #1E8475;
  --mint-700: #1A6960;

  /* ---- Iris scale (rebrand accent — periwinkle indigo) ---- */
  --iris-50:  #EFEEFE;
  --iris-100: #E0DFFC;
  --iris-200: #C3C0FA;
  --iris-300: #A7A2FF;     /* iris claro — on navy */
  --iris-400: #8985F6;
  --iris-500: #6E6BF2;     /* base accent */
  --iris-600: #514ED6;
  --iris-700: #3E3BA8;

  /* ---- Amber scale (rebrand accent — warm signal) ---- */
  --amber-50:  #FEF6E9;
  --amber-100: #FCEACB;
  --amber-200: #FAD491;
  --amber-300: #F6A93B;    /* base accent */
  --amber-400: #E5942A;
  --amber-500: #C98A1B;    /* on light surfaces / hover */
  --amber-600: #A06A12;
  --amber-700: #7C520E;

  /* ---- Neutral scale (cool, navy-tinted grays) ---- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F8FB;
  --gray-100: #EFF1F6;
  --gray-200: #E2E5EE;
  --gray-300: #CDD2E0;
  --gray-400: #A2A8BD;
  --gray-500: #717892;
  --gray-600: #4F5468;
  --gray-700: #363A4A;
  --gray-800: #231F20;     /* ink */
  --gray-900: #14123A;     /* navy */

  /* ---- Semantic status (harmonized) ---- */
  --positive: #1E8475;     /* uses mint family — finance "paid/up" */
  --positive-soft: #D6F4EE;
  --warning:  #C98A1B;
  --warning-soft: #FBEFD3;
  --danger:   #C8443A;
  --danger-soft:  #FBE2DF;
  --info:     #3D3879;     /* navy family */
  --info-soft:    #E6E4F2;

  /* ---- Semantic aliases (use these in UI) ---- */
  --bg-page:        var(--gray-50);
  --bg-surface:     var(--gray-0);
  --bg-surface-2:   var(--gray-100);
  --bg-inverse:     var(--navy-900);
  --bg-inverse-2:   var(--navy-800);
  --bg-accent:      var(--mint-300);
  --bg-accent-soft: var(--mint-50);
  --bg-accent-iris: var(--iris-500);
  --bg-accent-amber:var(--amber-300);

  --text-strong:    var(--navy-900);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-on-navy:   var(--gray-0);
  --text-on-navy-muted: #B9B6D4;
  --text-on-accent: var(--navy-900);
  --text-accent:    var(--mint-600);
  --text-link:      var(--mint-600);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-accent:  var(--mint-300);

  --focus-ring:     var(--mint-400);
}

/* tokens/typography.css */
/* Qombo — Typography tokens
   Single family (Inter). Hierarchy built from weight + size + tracking.
   Principal = SemiBold 600 · Texto base = Regular 400 · Apoyo = Light 300. */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */

  /* Type scale (px-based, 1.250 major-third-ish, tuned) */
  --fs-display:  56px;
  --fs-h1:       40px;
  --fs-h2:       30px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-lg:       18px;
  --fs-base:     16px;
  --fs-sm:       14px;
  --fs-xs:       13px;
  --fs-2xs:      11px;

  /* Line heights */
  --lh-tight:    1.1; /* @kind other */
  --lh-snug:     1.25; /* @kind other */
  --lh-normal:   1.5; /* @kind other */
  --lh-relaxed:  1.65; /* @kind other */

  /* Letter spacing — Inter benefits from slight negative tracking at display sizes */
  --ls-display: -0.02em; /* @kind other */
  --ls-heading: -0.015em; /* @kind other */
  --ls-base:     0; /* @kind other */
  --ls-caps:     0.08em; /* @kind other */

  /* ---- Semantic text roles ---- */
  --text-display-size:   var(--fs-display);
  --text-display-weight: var(--fw-semibold); /* @kind other */
  --text-h1-size:        var(--fs-h1);
  --text-h2-size:        var(--fs-h2);
  --text-body-size:      var(--fs-base);
  --text-body-weight:    var(--fw-regular); /* @kind other */
  --text-support-weight: var(--fw-light); /* @kind other */
  --text-label-weight:   var(--fw-medium); /* @kind other */
}

/* tokens/spacing.css */
/* Qombo — Spacing, radii, shadows, borders, motion
   The brand reads as clean, structured, ordered: generous whitespace,
   soft-but-restrained radii, light layered shadows. */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (cool, navy-tinted, low spread) ---- */
  --shadow-xs:  0 1px 2px rgba(20, 18, 58, 0.06);
  --shadow-sm:  0 1px 3px rgba(20, 18, 58, 0.08), 0 1px 2px rgba(20, 18, 58, 0.04);
  --shadow-md:  0 4px 12px rgba(20, 18, 58, 0.08), 0 2px 4px rgba(20, 18, 58, 0.04);
  --shadow-lg:  0 12px 28px rgba(20, 18, 58, 0.12), 0 4px 8px rgba(20, 18, 58, 0.05);
  --shadow-xl:  0 24px 56px rgba(20, 18, 58, 0.16);
  --shadow-accent: 0 6px 18px rgba(43, 165, 147, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --sidebar-w: 256px;
  --header-h: 64px;
}

/* components/components.css */
/* Qombo — component styles.
   Class-based so hover/focus/active/disabled states work natively.
   All values reference design tokens. Prefix: qb- */

/* ============ BUTTON ============ */
.qb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  line-height: 1; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  text-decoration: none; user-select: none;
}
.qb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-btn:active { transform: scale(0.98); }
.qb-btn[disabled], .qb-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.qb-btn svg { width: 1.05em; height: 1.05em; }

/* sizes */
.qb-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.qb-btn--md { height: 40px; padding: 0 var(--space-5); }
.qb-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--fs-base); border-radius: var(--radius-lg); }

/* variants */
.qb-btn--primary { background: var(--mint-300); color: var(--navy-900); }
.qb-btn--primary:hover { background: var(--mint-400); }
.qb-btn--primary:active { background: var(--mint-500); }

.qb-btn--navy { background: var(--navy-900); color: var(--gray-0); }
.qb-btn--navy:hover { background: var(--navy-800); }
.qb-btn--navy:active { background: var(--navy-700); }

.qb-btn--secondary { background: var(--gray-0); color: var(--text-strong); border-color: var(--border-default); }
.qb-btn--secondary:hover { background: var(--gray-50); border-color: var(--border-strong); }

.qb-btn--ghost { background: transparent; color: var(--text-body); }
.qb-btn--ghost:hover { background: var(--gray-100); }

.qb-btn--danger { background: var(--danger); color: #fff; }
.qb-btn--danger:hover { filter: brightness(0.94); }

.qb-btn--block { width: 100%; }

/* ============ ICON BUTTON ============ */
.qb-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); cursor: pointer; border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.qb-iconbtn:hover { background: var(--gray-100); color: var(--text-strong); }
.qb-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-iconbtn:active { transform: scale(0.96); }
.qb-iconbtn[disabled] { opacity: 0.4; pointer-events: none; }
.qb-iconbtn--sm { width: 32px; height: 32px; }
.qb-iconbtn--md { width: 40px; height: 40px; }
.qb-iconbtn--solid { background: var(--navy-900); color: var(--gray-0); }
.qb-iconbtn--solid:hover { background: var(--navy-800); color: var(--gray-0); }
.qb-iconbtn svg { width: 18px; height: 18px; }

/* ============ INPUT ============ */
.qb-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); }
.qb-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.qb-label .qb-req { color: var(--danger); margin-left: 2px; }
.qb-input-wrap { position: relative; display: flex; align-items: center; }
.qb-input-wrap .qb-affix { position: absolute; display: flex; align-items: center; color: var(--text-muted); pointer-events: none; }
.qb-input-wrap .qb-affix svg { width: 18px; height: 18px; }
.qb-input-wrap .qb-affix--left { left: 12px; }
.qb-input-wrap .qb-affix--right { right: 12px; }
.qb-input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 var(--space-3);
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-strong);
  background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.qb-input::placeholder { color: var(--text-muted); }
.qb-input:hover { border-color: var(--border-strong); }
.qb-input:focus { outline: none; border-color: var(--mint-400); box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-input--has-left { padding-left: 38px; }
.qb-input--has-right { padding-right: 38px; }
.qb-input--error { border-color: var(--danger); }
.qb-input--error:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.qb-input[disabled] { background: var(--gray-100); color: var(--text-muted); cursor: not-allowed; }
.qb-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.qb-hint--error { color: var(--danger); }

/* ============ SELECT ============ */
.qb-select-wrap { position: relative; display: flex; align-items: center; }
.qb-select {
  appearance: none; -webkit-appearance: none; width: 100%; box-sizing: border-box;
  height: 40px; padding: 0 38px 0 var(--space-3); font-family: var(--font-sans);
  font-size: var(--fs-sm); color: var(--text-strong); background: var(--gray-0);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.qb-select:hover { border-color: var(--border-strong); }
.qb-select:focus { outline: none; border-color: var(--mint-400); box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-select[disabled] { background: var(--gray-100); color: var(--text-muted); cursor: not-allowed; }
.qb-select-chev { position: absolute; right: 12px; pointer-events: none; color: var(--text-muted); display: flex; }
.qb-select-chev svg { width: 18px; height: 18px; }

/* ============ CHECKBOX ============ */
.qb-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-body); user-select: none; }
.qb-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.qb-check__box { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1.5px solid var(--border-strong); background: var(--gray-0); display: inline-flex; align-items: center; justify-content: center; color: var(--navy-900); transition: all var(--dur-fast) var(--ease-standard); flex: none; }
.qb-check__box svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.6); transition: all var(--dur-fast) var(--ease-out); }
.qb-check input:checked + .qb-check__box { background: var(--mint-300); border-color: var(--mint-300); }
.qb-check input:checked + .qb-check__box svg { opacity: 1; transform: scale(1); }
.qb-check input:focus-visible + .qb-check__box { box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-check input:disabled + .qb-check__box { opacity: 0.45; }

/* ============ SWITCH ============ */
.qb-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-body); user-select: none; }
.qb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.qb-switch__track { width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--gray-300); position: relative; transition: background var(--dur-base) var(--ease-standard); flex: none; }
.qb-switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); }
.qb-switch input:checked + .qb-switch__track { background: var(--mint-500); }
.qb-switch input:checked + .qb-switch__track .qb-switch__thumb { transform: translateX(18px); }
.qb-switch input:focus-visible + .qb-switch__track { box-shadow: 0 0 0 3px var(--focus-ring); }
.qb-switch input:disabled + .qb-switch__track { opacity: 0.45; }

/* ============ BADGE ============ */
.qb-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); letter-spacing: 0.02em; padding: 3px 9px; border-radius: var(--radius-pill); line-height: 1.4; }
.qb-badge .qb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qb-badge--positive { background: var(--positive-soft); color: var(--positive); }
.qb-badge--warning  { background: var(--warning-soft);  color: var(--warning); }
.qb-badge--danger   { background: var(--danger-soft);   color: var(--danger); }
.qb-badge--info     { background: var(--info-soft);     color: var(--info); }
.qb-badge--neutral  { background: var(--gray-100);      color: var(--gray-600); }
.qb-badge--accent   { background: var(--mint-100);      color: var(--mint-700); }

/* ============ TAG ============ */
.qb-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-body); background: var(--gray-100); border: 1px solid var(--border-subtle); padding: 4px 10px; border-radius: var(--radius-sm); }
.qb-tag__close { display: inline-flex; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-xs); }
.qb-tag__close:hover { color: var(--text-strong); }
.qb-tag__close svg { width: 13px; height: 13px; }

/* ============ AVATAR ============ */
.qb-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--navy-700); color: var(--gray-0); font-family: var(--font-sans); font-weight: var(--fw-semibold); flex: none; }
.qb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qb-avatar--sm { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.qb-avatar--md { width: 36px; height: 36px; font-size: var(--fs-xs); }
.qb-avatar--lg { width: 48px; height: 48px; font-size: var(--fs-base); }

/* ============ CARD ============ */
.qb-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; font-family: var(--font-sans); }
.qb-card--flat { box-shadow: none; }
.qb-card--pad { padding: var(--space-6); }
.qb-card--hover { transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.qb-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ============ STAT CARD ============ */
.qb-stat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-family: var(--font-sans); }
.qb-stat__head { display: flex; align-items: center; justify-content: space-between; }
.qb-stat__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.qb-stat__icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--mint-50); color: var(--mint-600); display: inline-flex; align-items: center; justify-content: center; }
.qb-stat__icon svg { width: 18px; height: 18px; }
.qb-stat__value { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.qb-stat__value small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.qb-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.qb-stat__delta svg { width: 15px; height: 15px; }
.qb-stat__delta--up { color: var(--positive); }
.qb-stat__delta--down { color: var(--danger); }
.qb-stat__delta--flat { color: var(--text-muted); }

/* ============ TABS ============ */
.qb-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-sans); }
.qb-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); padding: var(--space-3) var(--space-3); position: relative; transition: color var(--dur-fast) var(--ease-standard); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.qb-tab:hover { color: var(--text-strong); }
.qb-tab--active { color: var(--text-strong); border-bottom-color: var(--mint-400); }
.qb-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--radius-sm); }

/* base */
body { margin: 0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: var(--navy-900); text-decoration: none; }
a:hover { color: var(--mint-600); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* interacciones */
.pcard:hover { background: var(--gray-100) !important; border-color: var(--gray-300) !important; box-shadow: var(--shadow-md) !important; }
.pcard:hover .pmark { opacity: .07 !important; transform: rotate(0deg) scale(1) !important; }
.srow:hover .stitle { transform: translateX(8px) !important; color: var(--navy-900) !important; }
.srow:hover .chip { background: var(--mint-50) !important; border-color: var(--mint-300) !important; color: var(--navy-900) !important; }
@media (max-width: 860px) {
  html, body { overflow-x: clip; }

  header > div,
  footer > div,
  section > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  header > div {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  header nav {
    width: 100%;
    justify-content: flex-start;
    gap: 12px 18px !important;
  }

  section[style*="padding: 104px"],
  section[style*="padding: 112px"],
  section[style*="padding: 100px"],
  section[style*="padding: 96px"],
  section[style*="padding: 40px"] {
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }
  section[data-screen-label="Hero"] > div:nth-child(3) {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
  section[data-screen-label="Hero"] > img {
    width: 240px !important;
    max-width: 55vw !important;
    opacity: .28 !important;
  }

  h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  section h2 { font-size: clamp(28px, 7.4vw, 40px) !important; }

  .fgrid {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    margin-top: 32px !important;
  }
  .fstep { min-height: 0 !important; padding: 24px 20px !important; }
  .fstep h3 { font-size: 28px !important; }

  .srow {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    min-width: 0 !important;
  }
  .stitle { font-size: 22px !important; }
  .schips { grid-column: 1 / -1 !important; min-width: 0 !important; }
  .chip {
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  [style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }

  [style*="padding: 72px 56px"],
  [style*="padding: 64px 56px"],
  [style*="padding: 56px 48px"],
  [style*="padding: 36px 34px"] {
    padding: 28px 20px !important;
  }
  article[style*="padding: 40px"],
  [style*="padding: 36px;"] {
    padding: 22px 18px !important;
  }

  [style*="font-size: 88px"],
  [style*="font-size: clamp(96px"] {
    font-size: 64px !important;
  }
  [style*="align-items: baseline"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  [style*="padding: 96px 32px"],
  [style*="padding: 96px 32px 80px"],
  [style*="padding: 96px 32px 88px"] {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }

  .wa { right: 16px; bottom: 16px; }
}

.wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(18, 24, 38, .22);
}
.wa:hover { background: #1ebe5a; }

/* hover / focus */
.h1:hover { color: #fff !important; }
.h2:hover { color: #fff !important; }
.h3:hover { color: #fff !important; }
.h4:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.h5:hover { color: var(--mint-600) !important; }
.h6:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.h7:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.h8:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.h9:hover { color: inherit !important; }
.h10:hover { color: inherit !important; }
.h11:hover { color: inherit !important; }
.h12:hover { color: inherit !important; }
.h13:hover { color: inherit !important; }
.h14:hover { color: inherit !important; }
.h15:hover { color: var(--mint-600) !important; }
.h16:hover { color: var(--mint-300) !important; }
.h17:hover { color: var(--mint-300) !important; }
.h18:hover { color: var(--mint-300) !important; }
.h19:hover { color: #fff !important; }
.h20:hover { color: #fff !important; }
.h21:hover { color: #fff !important; }
.h22:hover { color: #fff !important; }
.h23:hover { color: #fff !important; }
.h24:hover { color: #fff !important; }
.h25:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h26:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h27:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h28:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h29:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h30:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h31:hover { color: #fff !important; }
.h32:hover { color: #fff !important; }
.h33:hover { color: #fff !important; }
.h34:hover { color: #fff !important; }
.h35:hover { color: #fff !important; }
.h36:hover { color: #fff !important; }
.h37:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h38:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h39:hover { border-color: var(--mint-300) !important; color: #fff !important; }
.h40:hover { color: #fff !important; }
.h41:hover { color: #fff !important; }
.h42:hover { color: #fff !important; }
.h43:hover { color: #fff !important; }
.h44:hover { color: #fff !important; }
.h45:hover { color: #fff !important; }
.h46:hover { color: #fff !important; }
.h47:hover { color: #fff !important; }
.h48:hover { color: #fff !important; }
.h49:hover { color: #fff !important; }
.h50:hover { color: #fff !important; }
.h51:hover { color: #fff !important; }
.h52:hover { color: #fff !important; }
.h53:hover { color: var(--mint-300) !important; }
.h54:hover { color: var(--mint-300) !important; }
.h55:hover { color: var(--mint-300) !important; }
.h56:focus { border-color: var(--mint-500) !important; box-shadow: var(--focus-ring) !important; }
.h57:focus { border-color: var(--mint-500) !important; box-shadow: var(--focus-ring) !important; }
.h58:focus { border-color: var(--mint-500) !important; box-shadow: var(--focus-ring) !important; }
.h59:focus { border-color: var(--mint-500) !important; box-shadow: var(--focus-ring) !important; }
.h60:hover { background: var(--mint-500) !important; }
.h61:active { transform: scale(.98) !important; }
.h62:hover { color: #fff !important; }
.h63:hover { color: #fff !important; }
.h64:hover { color: #fff !important; }
.h65:hover { color: #fff !important; }