/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #1ab9b0;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* Accent ramp — retuned around the Brain teal (#1ab9b0); 600 is the
     primary step, 700 the darker hover. */
  --color-accent-100: #e6f8f6;
  --color-accent-200: #c5efea;
  --color-accent-300: #96e2db;
  --color-accent-400: #5fd0c6;
  --color-accent-500: #2ec2b7;
  --color-accent-600: #1ab9b0;
  --color-accent-700: #13a097;
  --color-accent-800: #0b766f; /* darkened from #0d7f78 → AA 4.89:1 on --color-bg */
  --color-accent-900: #0a5e59;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  /* Brand — navy bands (header, hero, banner, footer) and WhatsApp CTAs. */
  --color-navy: #2d2e83;
  --color-navy-d: #1f2060;
  --color-wa: #25d366;
  --color-wa-d: #1ebe5a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* 88px clears the sticky header */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* ═══ Site institucional ═══════════════════════════════════════════════════
   Port of the Hotsite prototype (Brain/Hotsite). Classes here are local to
   the institutional page and deliberately avoid the DS names (.nav, .tag,
   .card) so the blueprint reset above (square corners) does not reach them.
   Buttons reuse .btn for type/padding and override shape via .btn.btn--*
   (specificity 0,2,0 beats the 0,1,0 reset). Colors only via tokens. */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.ico { width: 22px; height: 22px; flex: none; }

/* — header — */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-navy);
  box-shadow: 0 2px 20px color-mix(in srgb, #000 18%, transparent);
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px;
}
.logo {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: 22px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
}
.logo img { height: 36px; width: auto; }
.logo em { font-style: normal; color: var(--color-accent); }
.logo--sm { font-size: 17px; gap: 12px; }
.logo--sm img { height: 28px; }
.nav-site { display: flex; align-items: center; gap: 28px; }
.nav-site a:not(.btn) {
  color: var(--color-accent); text-decoration: none; font-size: 15px; white-space: nowrap;
  padding-block: 12px; transition: color .2s;
}
.nav-site a:not(.btn):hover { color: #fff; }

/* — buttons (institutional) — */
.btn.btn--wa, .btn.btn--ghost {
  gap: 10px; border-radius: 999px; min-height: 44px;
  font-family: var(--font-body); font-weight: 600; white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn.btn--wa:hover, .btn.btn--ghost:hover { transform: translateY(-3px); }
.btn.btn--wa {
  background: var(--color-wa); border-color: var(--color-wa);
  color: color-mix(in srgb, var(--color-wa) 20%, #000);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-wa) 35%, transparent);
}
.btn.btn--wa:hover {
  background: var(--color-wa-d); border-color: var(--color-wa-d);
  color: color-mix(in srgb, var(--color-wa) 20%, #000);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--color-wa) 50%, transparent);
}
.btn.btn--ghost {
  border: 2px solid color-mix(in srgb, #fff 45%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent); color: #fff;
}
.btn.btn--ghost:hover { background: color-mix(in srgb, #fff 16%, transparent); border-color: #fff; color: #fff; }
.btn.btn--sm { padding: 10px 18px; font-size: 14.5px; }
.btn.btn--lg { padding: 14px 20px; font-size: 15px; min-height: 56px; }
.btn--lg span { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.btn--lg small { font-weight: 400; font-size: 12px; opacity: .85; }

/* — hero — */
.hero-ins {
  color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% 20%, #3d3fb0 0%, transparent 60%),
    var(--color-navy);
}
.hero-ins__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding-block: 70px 80px;
}
@media (min-width: 1200px) {
  .hero-ins__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.hero-ins__text { min-width: 0; }
.eyebrow {
  color: var(--color-accent); letter-spacing: .14em; text-transform: uppercase;
  font-size: 12.8px; font-weight: 500; margin: 0 0 18px;
}
.lead {
  font-size: 17.3px; line-height: 28px; max-width: 520px; margin: 0 0 34px;
  color: #dcdcf5;
}
.hero-ins__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* — carousel — */
.carousel { position: relative; min-width: 0; }
.carousel__viewport {
  border-radius: 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 30px 60px color-mix(in srgb, var(--color-navy-d) 60%, transparent);
}
.carousel__track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .25, 1); }
.slide { min-width: 100%; position: relative; aspect-ratio: 16 / 11; background: var(--color-navy-d); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--color-navy-d) 95%, transparent) 100%);
}
.slide__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 26px 28px; }
.slide h3 { font-size: 27px; text-transform: uppercase; margin: 0 0 8px; color: #fff; }
.slide p { font-size: 15px; max-width: 480px; margin: 0; color: color-mix(in srgb, #fff 86%, transparent); }
.tag--service {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: var(--color-accent); color: var(--color-navy-d);
  font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.carousel__ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.car-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 2px solid color-mix(in srgb, #fff 40%, transparent);
  background: color-mix(in srgb, #fff 8%, transparent); color: #fff;
  font-size: 24px; line-height: 1; transition: background .2s, border-color .2s, color .2s;
}
.car-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-navy-d); }
.dots { display: flex; gap: 2px; }
/* 44px-tall hit area (touch); the visible 10px pill is drawn by ::before */
.dots button {
  position: relative; width: 24px; height: 44px; padding: 0; border: 0; cursor: pointer;
  background: transparent; transition: width .3s;
}
.dots button::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 17px; height: 10px; border-radius: 99px;
  background: color-mix(in srgb, #fff 35%, transparent); transition: background .3s;
}
.dots button.on { width: 44px; }
.dots button.on::before { background: var(--color-accent); }

/* — section headings — */
.sec-title {
  font-size: clamp(30px, 3.4vw, 43px); line-height: 1.05; letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0; color: var(--color-navy);
}

/* — process — */
.process { padding: 0 0 72px; }
.steps {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.steps li {
  background: #fff; border: 1px solid var(--color-neutral-200); border-radius: 16px; padding: 24px;
  transition: transform .25s, box-shadow .25s;
}
.steps li:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-navy) 14%, transparent);
}
.steps b { display: block; font-family: var(--font-heading); font-size: 38px; line-height: 1.1; color: var(--color-accent-800); }
.steps h3 { font-size: 21px; text-transform: uppercase; margin: 4px 0 8px; color: var(--color-navy); }
.steps p { margin: 0; font-size: 15px; color: var(--color-neutral-700); }

/* — banner IA (blueprint frame kept, colors from tokens) — */
.banner-ia {
  background: var(--color-navy); border-color: var(--color-navy); color: var(--color-bg);
  padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.banner-ia__hl { color: var(--color-accent); }

/* — results — */
.results { padding: 0 0 96px; }
.results__sub { margin: 8px 0 34px; color: var(--color-neutral-700); }
.widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.widget {
  position: relative; overflow: hidden; padding: 28px; border-radius: 20px;
  background: #fff; border: 1px solid var(--color-neutral-200);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.widget:hover {
  transform: translateY(-6px); border-color: var(--color-accent);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--color-navy) 16%, transparent);
}
.widget__icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
  display: grid; place-items: center; font-size: 21px;
  background: linear-gradient(135deg, var(--color-navy), color-mix(in srgb, var(--color-navy), #5d60ef 50%));
}
.widget__num {
  font-family: var(--font-heading); font-size: 64px; font-weight: 600; line-height: 1;
  color: var(--color-navy); font-variant-numeric: tabular-nums;
}
.widget h3 { font-size: 20px; text-transform: uppercase; margin: 8px 0 6px; }
.widget p { font-size: 15px; margin: 0 0 16px; color: var(--color-neutral-700); }
.bar { height: 8px; border-radius: 99px; overflow: hidden; background: var(--color-neutral-200); }
.bar > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-400));
  transition: width 1.6s ease .2s;
}
.widget.in .bar > i { width: var(--w); }
.widget--cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-d));
}
.widget--cta h3 { font-size: 30px; }
.widget--cta p { color: color-mix(in srgb, #fff 86%, transparent); }
.note { margin: 20px 0 0; font-size: 13px; color: var(--color-neutral-700); }

/* — footer — */
.footer-site { background: var(--color-navy); color: var(--color-bg); }
.footer-site__in {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
  padding-block: 36px;
}
.footer-site a {
  font-size: 14px; text-decoration: none; padding-block: 12px;
  color: color-mix(in srgb, var(--color-bg) 90%, transparent);
}
.footer-site a:hover { color: var(--color-accent); text-decoration: underline; }
.footer-site small { font-size: 13px; color: color-mix(in srgb, var(--color-bg) 78%, transparent); }

/* — floating WhatsApp — */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-wa); color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, #000 30%, transparent);
  animation: pulse 2.4s infinite;
}
.wa-float:hover { background: var(--color-wa-d); color: #fff; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-wa) 60%, transparent); }
  70%  { box-shadow: 0 0 0 18px color-mix(in srgb, var(--color-wa) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-wa) 0%, transparent); }
}

/* — focus on navy surfaces (teal ring is 4.7:1 on navy) — */
.topbar :focus-visible, .hero-ins :focus-visible, .banner-ia :focus-visible,
.footer-site :focus-visible, .widget--cta :focus-visible { outline-color: var(--color-accent); outline-offset: 3px; }

/* — responsive — */
@media (max-width: 960px) {
  .hero-ins__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px 64px; }
  .steps, .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-site a:not(.btn) { display: none; }
}
@media (max-width: 620px) {
  .steps, .widgets { grid-template-columns: minmax(0, 1fr); }
  .btn.btn--lg { width: 100%; }
  .slide__body { padding: 20px; }
  .slide h3 { font-size: 22px; }
  .slide p { font-size: 14px; }
  .widget__num { font-size: 54px; }
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}
@media (max-width: 480px) {
  /* header CTA collapses to icon-only; the label stays for screen readers */
  .topbar .btn--wa .btn__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .topbar .btn.btn--wa { width: 44px; padding: 0; }
  .logo { font-size: 18px; gap: 10px; }
  .logo img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wa-float { animation: none; }
  .carousel__track, .bar > i, .dots button, .dots button::before { transition: none; }
  .btn.btn--wa, .btn.btn--ghost, .steps li, .widget { transition: none; }
  .btn.btn--wa:hover, .btn.btn--ghost:hover, .steps li:hover, .widget:hover { transform: none; }
}