/* AONET Empresas: base layer shared by every section.
   Desktop replicates the Canva canvas (1366 wide) and scales with the page width:
   1 design px = var(--u). Elements are placed with the .a helper and inline custom props. */

@font-face {
  font-family: 'Montserrat';
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #233d6f;
  --navy-deep: #1b2f57;
  --green: #00bf63;
  --green-dark: #3daa32;
  --lime: #8cc63f;
  --red: #ff3131;
  --ink: #010101;
  --white: #ffffff;
  --mist: #e6e7eb;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--navy);
  background: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.page {
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  --u: calc(100cqw / 1366);
}

/* Section = a window onto the Canva canvas between two y values */
.s {
  position: relative;
  height: calc(var(--h) * var(--u));
  overflow: hidden;
}
/* rodada 13: seções escuras que seguem seções escuras sobrepõem 1 px a anterior; em telas de alta densidade um pé de altura
   fracionária deixaria uma linha clara do fundo branco da página entre as duas (03→04, 04→05, 05→06, 06→07; 10→11 e 11→12 nos
   próprios arquivos) */
.s04, .s05, .s06, .s07 { margin-top: -1px; }

/* Absolute element placed with design coordinates (inline --x --y --w --hh --r) */
.a {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--hh) * var(--u));
  transform: rotate(calc(var(--r, 0) * 1deg));
}

/* Canva text box: font size in design px, Canva's 1.04 line height, no reflow.
   Canva draws glyphs about 0.07em lower than a CSS line box does (measured on 4 sizes);
   --tdy corrects it. Texts with line height 1.4 need --tdy:-0.075. */
.t {
  font-size: calc(var(--fs) * var(--u));
  line-height: var(--lh, 1.04);
  white-space: nowrap;
  translate: 0 calc(var(--fs) * var(--tdy, 0.07) * var(--u));
}
.b { font-weight: 700; }

/* Image clipped inside its frame: --ix --iy --iw --ih = Canva imageBox */
.crop { overflow: hidden; }
.crop > img {
  position: absolute;
  left: calc(var(--ix, 0) * var(--u));
  top: calc(var(--iy, 0) * var(--u));
  width: calc(var(--iw) * var(--u));
  height: calc(var(--ih) * var(--u));
  max-width: none;
}
.fill { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Shared components (the single source of truth for the polish pass) ---------- */

/* Type scale: design px on desktop, fixed px on mobile (see the media query below) */
.h2      { font-size: calc(41.2 * var(--u)); font-weight: 400; line-height: 1.1; }
.h2-caps { font-size: calc(32 * var(--u));   font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.kicker  { font-size: calc(24 * var(--u));   font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; }
.feat-h  { font-size: calc(40 * var(--u));   font-weight: 700; line-height: 1.1; }
.body    { font-size: calc(17.3 * var(--u)); font-weight: 400; line-height: 1.35; }
.label   { font-size: calc(26 * var(--u));   font-weight: 400; line-height: 1.15; }
.h2 b, .h2-caps b, .kicker b, .body b { font-weight: 700; }

/* Call to action (06, 07, 09, 11). Rodada 13: no desenho dos botões da landing residencial (rodada 5) e do cabeçalho
   compartilhado: sólido, raio 6 px, caixa alta Montserrat 700 com leve espaçamento, sem caixa/ícone de seta, altura 46-52 px,
   hover = verde mais escuro, foco visível. O verde é o da marca Empresas (--green) com texto azul-marinho (contraste 5:1). */
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: clamp(48px, calc(52 * var(--u)), 52px); padding: 0 24px;
  border: 0; border-radius: 6px;
  background: var(--green); color: var(--navy);
  font-family: 'Montserrat', system-ui, sans-serif; font-size: clamp(13px, calc(13 * var(--u)), 14px); font-weight: 700; line-height: 1.25;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; white-space: nowrap;
  box-shadow: none; overflow: visible; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.cta__label { display: inline-flex; align-items: center; justify-content: center; padding: 0; white-space: inherit; }
.cta__cap { display: none; }
.cta:hover, .cta:focus-visible { background: #00a857; color: var(--navy); }
.cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.cta:disabled { cursor: wait; }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }

/* Cards and pills */
.card { border-radius: calc(15 * var(--u)); overflow: hidden; }
.shadow-dark  { box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.35); }
.shadow-light { box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(35, 61, 111, 0.15); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(36 * var(--u)); padding: 0 calc(18 * var(--u));
  border: calc(1 * var(--u)) solid var(--navy); border-radius: 999px;
  background: #fff; color: var(--navy);
  font-size: calc(18 * var(--u)); line-height: 1; white-space: nowrap;
}
.pill--alert { border-color: var(--red); color: var(--red); }

/* Plus sign used next to titles and on photo cards */
.plus { width: calc(26 * var(--u)); height: calc(26 * var(--u)); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mobile: sections leave the canvas and flow. Each section file adds its own layout. */
@media (max-width: 900px) {
  .page { --u: 1px; }
  .s { height: auto; }
  .t { translate: none; white-space: normal; }
  .desk { display: none !important; }

  /* Mobile rhythm shared by every section */
  .m-wrap { max-width: 560px; margin: 0 auto; padding: 56px 20px; }
  .h2      { font-size: 28px; }
  .h2-caps { font-size: 22px; }
  .kicker  { font-size: 13px; }
  .feat-h  { font-size: 26px; }
  .body    { font-size: 16px; line-height: 1.5; }
  .label   { font-size: 16px; line-height: 1.3; }
  .cta { height: 50px; font-size: 13px; padding: 0 20px; width: 100%; max-width: 360px; white-space: normal; }
  .card { border-radius: 15px; }
  .shadow-dark  { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
  .shadow-light { box-shadow: 0 8px 24px rgba(35, 61, 111, 0.15); }
  .pill { height: 40px; padding: 0 18px; border-width: 1px; font-size: 15px; white-space: normal; text-align: center; }
  .plus { width: 22px; height: 22px; }
}
@media (min-width: 901px) {
  .mob { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== 01 hero ===== */
/* 01 hero: fixed header (seg links + city selector + social on one row, logo, nav + button) over the
   3D logo backdrop, then a pinned stage where the four stats count with the scroll.
   The header lives OUTSIDE the clipped section (<header class="s01-head"> before <section class="s s01">)
   and is position: fixed with the design coordinates (1 design px = --u). In the hero it has no
   background; once the page scrolls past the hero's own header zone (.is-compact, toggled by
   s01-hero.js) it gets the translucent white bar, a hairline and a compact height (86 design px):
   only translate / scale / opacity / background change, nothing re-flows.
   Section: natural height 1100 + 900 travel (--h 2000). The stage (1100 tall) is sticky with its
   bottom anchored to the viewport bottom when the viewport is shorter than the hero, so the stats
   stay on screen for the whole travel while the numbers count 0 -> value (progress-mapped).
   Desktop only: a scroll-scrubbed video (1366 x 812 box, object-fit cover) of the same 3D logo sits
   over the baked logo of the backdrop (which spans y ~250-700), its bottom edge masked into the
   backdrop; it fades in once it can show frames (.is-on, s01-hero.js). Mobile / reduced motion: hidden. */
.s01 { background: #f3f4f7; color: var(--navy); overflow: clip; }
.s01 ul, .s01-head ul { list-style: none; }

/* ---------- header ---------- */
.s01-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  width: 100%; max-width: 1920px; margin: 0 auto;
  height: calc(86 * var(--u));
  color: var(--navy);
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 1px 0 rgba(35, 61, 111, 0);
  transition: background-color .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1), backdrop-filter .4s ease;
}
.s01-head.is-compact {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(35, 61, 111, .10);
  transition: background .5s ease, box-shadow .5s ease;
}
/* over dark sections the glass turns dark and the header content goes white */
.s01-head.is-dark { background: rgba(8, 20, 48, .38); box-shadow: 0 1px 0 rgba(255, 255, 255, .10); }
.s01-head.is-dark .s01-link, .s01-head.is-dark .s01-small, .s01-head.is-dark .s01-city-btn, .s01-head.is-dark .s01-soc { color: #fff; }
.s01-head.is-dark .s01-link:hover, .s01-head.is-dark .s01-small:hover { color: rgba(255, 255, 255, .8); }
.s01-head.is-dark .s01-logo img { filter: brightness(0) invert(1); }
.s01-head .s01-logo img, .s01-head .s01-link, .s01-head .s01-small, .s01-head .s01-city-btn, .s01-head .s01-soc { transition: color .5s ease, filter .5s ease; }
.s01-head .s01-head-in { position: absolute; inset: 0; }
.s01-head .s01-panel { display: contents; }
.s01-head .s01-burger { display: none; }
.s01-head .s01-logo, .s01-head .s01-bar, .s01-head .s01-row {
  transition: translate .7s cubic-bezier(.16, 1, .3, 1), scale .7s cubic-bezier(.16, 1, .3, 1);
}
.s01-head .s01-logo { transform-origin: 0 0; }
.s01-head.is-compact .s01-row { translate: 0 calc(-7 * var(--u)); }
.s01-head.is-compact .s01-logo { translate: 0 calc(-12 * var(--u)); scale: .68; }
.s01-head.is-compact .s01-bar { translate: 0 calc(-24 * var(--u)); }

/* top row (y 15.4, 18 tall): seg links on the left (design positions), city selector + social on the
   right, aligned to the nav edge (x 1244) */
.s01-head .s01-row { display: flex; align-items: center; justify-content: flex-end; }
.s01-head .s01-small { width: auto; height: auto; color: var(--navy); font-weight: 500; }
.s01-head .s01-cur { color: var(--lime); }
.s01-head .s01-cur::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(20 * var(--u)); height: calc(2 * var(--u));
  background: var(--lime);
}
.s01-head .s01-tools { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.s01-head .s01-city { position: relative; }
.s01-head .s01-city-btn {
  display: flex; align-items: center; height: calc(18 * var(--u));
  color: var(--navy); font-size: calc(13 * var(--u)); font-weight: 500; line-height: 1; white-space: nowrap;
}
.s01-head .s01-city-btn:hover { color: var(--navy-deep); }
.s01-head .s01-city-pin { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin-right: calc(5 * var(--u)); }
.s01-head .s01-city-chev {
  flex: none; width: calc(9 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(7 * var(--u));
  transition: transform .25s ease;
}
.s01-head .s01-city.is-open .s01-city-chev { transform: rotate(180deg); }
.s01-head .s01-city-list {
  position: absolute; right: 0; top: calc(100% + 10 * var(--u)); z-index: 6;
  width: calc(260 * var(--u)); max-height: calc(300 * var(--u)); overflow-y: auto; padding: calc(6 * var(--u)) 0;
  background: #fff; border: 1px solid var(--mist); border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(35, 61, 111, 0.15);
  font-size: calc(13 * var(--u)); line-height: 1.3; text-align: left;
}
.s01-head .s01-city-list[hidden] { display: none; }
.s01-head .s01-city-list li { padding: calc(8 * var(--u)) calc(14 * var(--u)); cursor: pointer; outline: 0; }
.s01-head .s01-city-list li:hover, .s01-head .s01-city-list li:focus { background: #f3f4f7; color: var(--navy-deep); }
.s01-head .s01-city-list li[aria-selected="true"] { font-weight: 700; }

.s01-head .s01-social { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.s01-head .s01-soc { display: block; color: var(--navy); transition: color .25s ease; }
.s01-head .s01-soc svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.s01-head .s01-soc-ig:hover, .s01-head .s01-soc-ig:focus-visible { color: #E1306C; }
.s01-head .s01-soc-fb:hover, .s01-head .s01-soc-fb:focus-visible { color: #1877F2; }

/* logo, nav links and the outlined button share one row (x 396 to 1244), aligned on the text baseline */
.s01-head .s01-logo img { width: 100%; height: 100%; }
.s01-head .s01-bar { display: flex; align-items: baseline; justify-content: space-between; }
.s01-head .s01-menu { display: flex; align-items: center; gap: calc(40 * var(--u)); }
.s01-head .s01-link {
  display: flex; align-items: center; height: calc(40 * var(--u));
  color: var(--navy); font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1; white-space: nowrap;
}
.s01-head .s01-link:hover, .s01-head .s01-small:hover { color: var(--navy-deep); }
.s01-head .s01-chev {
  flex: none;
  width: calc(11 * var(--u)); height: calc(7.4 * var(--u));
  margin: calc(1 * var(--u)) 0 0 calc(9 * var(--u));
}
.s01-head .s01-cta {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(246 * var(--u)); height: calc(54 * var(--u));
  border: calc(2 * var(--u)) solid var(--lime); border-radius: calc(5 * var(--u));
  color: var(--lime); font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.s01-head .s01-cta:hover { background: var(--lime); color: #fff; }
.s01-head a:focus-visible, .s01-head button:focus-visible, .s01-head .s01-city-list li:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.s01-head .s01-city-list li:focus-visible { outline-offset: -2px; }

/* ---------- pinned stage ---------- */
/* The stage (1100 design px: backdrop with the 3D logo, stats at y 818) pins while the section scrolls
   its extra travel; on viewports shorter than 1100u its bottom is anchored so the stats stay visible. */
.s01 .s01-stage {
  position: sticky;
  top: min(0px, calc(100vh - 1100 * var(--u)));
  height: calc(1100 * var(--u));
}
.s01 .s01-bg { position: absolute; inset: 0; overflow: hidden; }
/* Apple-style gloss sweep over the 3D logo, driven by the scroll (s01-hero.js sets --shine 0..1).
   The layer is clipped to the logo shape by a luminance mask cut from the backdrop; a soft diagonal
   white band inside it slides from the left of the logo to the right as the page scrolls. */
.s01 .s01-shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(../img/s01-logo-mask.webp) center / 100% 100% no-repeat luminance;
  mask: url(../img/s01-logo-mask.webp) center / 100% 100% no-repeat luminance;
}
.s01 .s01-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 60%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 44%, rgba(255,255,255,.65) 50%, rgba(255,255,255,.28) 56%, rgba(255,255,255,0) 70%);
  transform: translate3d(calc(-60% + var(--shine, 0) * 230%), 0, 0);
  will-change: transform;
}

/* stats: four equal columns centred on the page, one baseline, dividers between them.
   Rodada 18: divisórias em fio de 1 px (azul-marinho a 26%, esmaecendo nas pontas) no lugar das barras de 3 px a 80%;
   "+" menor e mais leve (0,62em, peso 500, 75%), centrado na altura das versais; rótulos 20 px a 82% com entrelinha 1,22. */
.s01 .s01-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) 0;
}
.s01 .s01-stat + .s01-stat::before {
  content: ""; position: absolute; top: 8%; bottom: 8%;
  left: -0.5px; width: 1px;
  background: linear-gradient(180deg, rgba(35, 61, 111, 0) 0, rgba(35, 61, 111, .26) 18%, rgba(35, 61, 111, .26) 82%, rgba(35, 61, 111, 0) 100%);
  border-radius: 0; pointer-events: none;
}
.s01 .s01-num { display: flex; align-items: baseline; justify-content: center; font-size: calc(60 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.s01 .s01-plus {
  display: inline-block; font-size: 0.62em; font-weight: 500; opacity: .75;
  margin-right: 0.08em; translate: 0 -0.24em;
}
.s01 .s01-n { display: inline-block; font-variant-numeric: tabular-nums; }
.s01 .s01-lbl { font-size: calc(20 * var(--u)); line-height: 1.22; margin-top: calc(10 * var(--u)); color: rgba(35, 61, 111, .82); }

@media (prefers-reduced-motion: reduce) {
  .s01-head, .s01-head .s01-logo, .s01-head .s01-bar, .s01-head .s01-row,
  .s01-head .s01-city-chev, .s01-head .s01-soc, .s01-head .s01-cta { transition: none; }
  /* no pin: natural height, final numbers (s01-hero.js writes them); no video, the backdrop's logo stays */
  .s01 { height: calc(1100 * var(--u)); }
  .s01 .s01-stage { position: static; }
}

/* ---------- mobile: compact fixed bar (logo + hamburger menu), then the 3D logo visual and the 2x2 stats card ----------
   Round 15 (replaces the round 10 pinned stage): no pin, one compact screen under the header. The 3D logo is a tight crop
   of the backdrop (the logo itself about 60% of the screen width, capped on tablets) with the gloss sweep played once
   when the hero shows (s01-hero.js animates --shine 0 -> 1); below it the four stats sit in a white card, 2 x 2, with
   thin dividers; the numbers count up once (1.5 s, ease-out) as soon as the card is in view (.is-in: fades the card
   in, transform/opacity only). Without JS or with reduced motion: card visible, final numbers, no sweep. */
@media (max-width: 900px) {
  .s01 { background: linear-gradient(180deg, #f3f4f7 0%, #fff 62%); height: auto; overflow: clip; }
  /* white wave texture behind the stats, faded in and out so it has no hard edge */
  .s01::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 480px;
    background: url(../img/onda-branca.webp) 50% 50% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40%, #000 72%, transparent 100%);
    pointer-events: none;
  }
  .s01 .a, .s01-head .a { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; translate: none; scale: none; }
  .s01 .s01-stage { position: static; height: auto; }
  .s01 .s01-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 72px; padding-bottom: 40px; }

  /* the bar: 60 px, white, logo left, hamburger right */
  .s01-head {
    height: 60px; max-width: none;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(35, 61, 111, .12);
  }
  .s01-head .s01-head-in { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; }
  .s01-head .s01-logo { display: block; width: 124px; flex: none; }
  .s01-head .s01-logo img { height: auto; }
  .s01-head .s01-burger {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px; border-radius: 8px; color: var(--navy);
  }
  .s01-head .s01-burger span, .s01-head .s01-burger span::before, .s01-head .s01-burger span::after {
    display: block; width: 22px; height: 2px; border-radius: 1px; background: currentColor;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
  }
  .s01-head .s01-burger span { position: relative; }
  .s01-head .s01-burger span::before, .s01-head .s01-burger span::after { content: ""; position: absolute; left: 0; }
  .s01-head .s01-burger span::before { top: -7px; }
  .s01-head .s01-burger span::after { top: 7px; }
  .s01-head.is-open .s01-burger span { background: transparent; }
  .s01-head.is-open .s01-burger span::before { transform: translateY(7px) rotate(45deg); }
  .s01-head.is-open .s01-burger span::after { transform: translateY(-7px) rotate(-45deg); }

  /* the menu panel under the bar: nav links + button, then seg links and city selector + social */
  .s01-head .s01-panel {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto;
    padding: 18px 20px 24px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 12px 24px rgba(35, 61, 111, .12);
    visibility: hidden; opacity: 0; translate: 0 -8px;
    transition: opacity .35s cubic-bezier(.16, 1, .3, 1), translate .5s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .35s;
  }
  .s01-head.is-open .s01-panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .s01-head .s01-bar { order: 1; flex-direction: column; align-items: stretch; }
  .s01-head .s01-menu { display: flex; flex-direction: column; gap: 2px; }
  .s01-head .s01-link { height: 44px; font-size: 16px; }
  .s01-head .s01-chev { width: 11px; height: 7.4px; margin: 1px 0 0 8px; }
  .s01-head .s01-cta { width: 100%; max-width: 360px; height: 52px; margin-top: 14px; border-width: 2px; border-radius: 6px; font-size: 16px; }
  .s01-head .s01-row {
    order: 2; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 16px; border-top: 1px solid var(--mist);
  }
  .s01-head .s01-seg { display: flex; gap: 20px; }
  .s01-head .s01-small { font-size: 14px; line-height: 1.4; padding: 6px 0; }
  .s01-head .s01-cur::after { top: auto; bottom: 2px; height: 2px; }
  .s01-head .s01-tools { gap: 18px; }
  .s01-head .s01-city-btn { height: 40px; font-size: 14px; }
  .s01-head .s01-city-list { right: auto; left: 0; top: calc(100% + 4px); width: min(280px, calc(100vw - 40px)); max-height: 50vh; }
  .s01-head .s01-soc svg { width: 20px; height: 20px; }

  /* 3D logo visual: a tight crop of the hero artwork around the logo. In the backdrop (2200 x 1772) the logo spans 27.4%
     of the width, centred at 49.7% / 39.6%; the crop box is 1.22 x the logo (room for its shadow and the gloss), so the
     backdrop is 3 x the box and the logo itself is ~60% of the screen width (box 73vw, capped at 330 px on tablets).
     The backdrop box (.s01-bg) is the image itself, so the gloss mask inside it lines up with the logo as on the desktop. */
  .s01 .s01-media {
    order: 2; position: relative; overflow: hidden;
    width: min(73vw, 330px); aspect-ratio: 1 / 0.953; margin: 0 auto;
    /* soft edges on all four sides (intersection of two gradients): the crop has no visible border */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .s01 .s01-bg {
    position: absolute; inset: auto; left: 50%; top: 50%;
    width: 300%; aspect-ratio: 2200 / 1772; overflow: visible;
    transform: translate(-49.68%, -39.56%);
  }
  .s01 .s01-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; }
  /* no video on phones (and s01-hero.js never gives it a source here, so nothing is downloaded) */

  /* stats: white card, 2 x 2, thin dividers (1 px, navy at 14%) between the columns and the rows */
  .s01 .s01-stats {
    order: 3; display: grid; grid-template-columns: 1fr 1fr;
    width: 100%; max-width: 420px; margin-top: 18px;
    background: #fff; border: 1px solid rgba(35, 61, 111, .14); border-radius: 18px;
    box-shadow: 0 12px 32px rgba(35, 61, 111, .08);
    overflow: hidden;
  }
  .s01 .s01-stat { padding: 18px 10px 17px; }
  /* rodada 18: o mesmo fio das colunas do desktop (1 px, esmaecendo nas pontas) */
  .s01 .s01-stat + .s01-stat::before { left: 0; top: 12px; bottom: 12px; width: 1px; border-radius: 0; background: linear-gradient(180deg, rgba(35, 61, 111, 0) 0, rgba(35, 61, 111, .22) 20%, rgba(35, 61, 111, .22) 80%, rgba(35, 61, 111, 0) 100%); }
  .s01 .s01-stat:nth-child(odd)::before { display: none; }
  .s01 .s01-stat:nth-child(n+3) { border-top: 1px solid rgba(35, 61, 111, .14); }
  .s01 .s01-num { font-size: clamp(30px, 8.7vw, 36px); letter-spacing: 0; }
  .s01 .s01-plus { font-size: .66em; margin-right: .08em; translate: 0 -.19em; }
  .s01 .s01-lbl { font-size: 12.5px; line-height: 1.25; margin-top: 5px; color: rgba(35, 61, 111, .8); }
  /* with JS the card fades in (14 px, opacity) as it starts counting; reduced motion skips the JS, so no class = visible */
  .s01.s01--m .s01-stats { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
  .s01.s01--m .s01-stats.is-in { opacity: 1; transform: none; }
}

/* rodada 13, emenda 01 → 02 no desktop: o pé da seção (cinza-claro com a textura) esmaece em branco nos últimos 140 px,
   que é a cor com que o 02 começa (nenhum degrau na fronteira) */
@media (min-width: 901px) {
  .s01::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(140 * var(--u)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
}

/* rodada 44: passagem do topo para "Sua operação, Resolvida": o cinza do topo (#f3f4f7) desce em degradê até o branco do 02, sem a linha reta */
@media (min-width: 901px) {
  .s01::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 110px; background: linear-gradient(180deg, rgba(243, 244, 247, 0), #fff); pointer-events: none; }
}

/* ===== 02 diagrama ===== */
/* 02 diagrama: "Sua operação, Resolvida." + problem / solution diagram (Monad-style traffic).
   Layout is symmetric about the page axis (hub centre 683, 526.68): six pills per side on a 64 px pitch,
   each pill emits one cubic that bends into a 9 px-pitch bundle of parallel lines entering / leaving the disc. */

.s02 { background: #fff; }
.s02 .s02-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s02 .s02-bg { max-width: none; }

/* connectors (one SVG in canvas coordinates): thin 1.5 px lines at 0.35 */
.s02 .s02-lines { overflow: hidden; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.s02 .s02-lines .s02-red { stroke: var(--red); }
.s02 .s02-lines .s02-navy { stroke: var(--navy); }
.s02 .s02-lines .s02-soft { opacity: .35; }

/* heading */
.s02 .s02-title { color: var(--navy); text-align: center; }

/* pills (shared .pill / .pill--alert) with a 16 px line icon before the text, same colour as the text */
.s02 .s02-list { list-style: none; }
.s02 .pill { gap: calc(8 * var(--u)); }
.s02 .s02-pi { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* centre */
.s02 .s02-hub-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.s02 .s02-disc { fill: #fff; stroke: var(--navy); stroke-width: 1; }
.s02 .s02-orbit { fill: none; stroke: #d7dbe3; stroke-width: 1; }
.s02 .s02-dots { fill: var(--navy); }
.s02 .s02-words { fill: var(--navy); font-family: inherit; font-size: 16.3px; }
.s02 .s02-logo { border-radius: 50%; }

/* nested placed elements must not inherit their parent's size props */
.s02 .a > .a { --w: initial; --hh: initial; }

/* ---------- motion (driven by s02-diagrama.js) ----------
   Travellers: pooled chips moved along a connector with CSS offset-path; offset-distance and the lit dash are
   animated with the Web Animations API (2.4 s linear per crossing) so a chip can be reused without a reflow.
   Lit segments: dash copies of the connector with pathLength=1, dash .25 of the line, its head under the chip.
   Problems light the left side red; solutions light the right side blue (a brighter navy so it reads on the 0.35 line). */
.s02 .s02-lit { stroke-linecap: butt; }
.s02 .s02-lit--red { stroke: var(--red); }
.s02 .s02-lit--blue { stroke: #2f6bff; }
.s02 .s02-lit path { stroke-dasharray: .25 1; stroke-dashoffset: .25; }

/* "resolvido" seal: hidden at the left edge of every solution pill; the script pops it in (scale + opacity,
   ~1.2 s) when a solution chip arrives, and the pill gets a brief green glow (opacity-only pseudo-element) */
.s02 .s02-seal {
  position: absolute; z-index: 2; left: 0; top: 50%;
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(4 * var(--u));
  border: calc(1 * var(--u)) solid #00bf63; border-radius: 999px;
  background: #fff; color: #00bf63;
  font-size: calc(10 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .01em;
  box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 191, 99, .25);
  translate: calc(-100% + 14 * var(--u)) -50%;
  transform-origin: 80% 50%;
  opacity: 0; pointer-events: none;
}
.s02 .s02-seal svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.s02 .s02-list--r .pill::after {
  content: ""; position: absolute; inset: calc(-1 * var(--u)); border-radius: 999px;
  box-shadow: 0 0 0 calc(1.5 * var(--u)) #00bf63, 0 0 calc(16 * var(--u)) rgba(0, 191, 99, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);
}
.s02 .s02-list--r .pill.s02-ok::after { opacity: 1; transition-duration: .2s; }

.s02 .s02-mv { stroke: none; }
.s02 .s02-trav {
  opacity: 0;
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: fill-box; transform-origin: center;
  font-size: 9.7px; font-weight: 700;
  color: var(--navy);
}
.s02 .s02-trav rect { fill: #fff; stroke: var(--navy); stroke-width: 1; }
.s02 .s02-trav text { fill: var(--navy); }
.s02 .s02-trav--alert { color: var(--red); }
.s02 .s02-trav--alert rect { stroke: var(--red); }
.s02 .s02-trav--alert text { fill: var(--red); }

/* hub dots ring: slow rotation (the group holds a ghost circle so its box is centred on the hub) */
.s02 .s02-dots {
  transform-box: fill-box; transform-origin: center;
  animation: s02-spin 48s linear infinite;
}
@keyframes s02-spin { to { transform: rotate(360deg); } }

/* off screen (class set by s02-diagrama.js; the chips are paused by the script) */
.s02.s02--off .s02-dots, .s02.s02--off .s02-link::after { animation-play-state: paused; }

/* reduced motion: static diagram (the script does not start the traffic) */
@media (prefers-reduced-motion: reduce) {
  .s02 .s02-lit, .s02 .s02-mv, .s02 .s02-link::after, .s02 .s02-seal, .s02 .s02-list--r .pill::after { display: none; }
  .s02 .s02-dots { animation: none; }
}

/* ---------- mobile (round 15): the desktop composition turned 90 degrees, after the client's sketch ----------
   Top: the six problem pills stand as tall vertical capsules side by side (42 px wide, text written bottom-to-top
   with the icon at the top end: writing-mode vertical-rl + rotate 180deg), tops on one line and bottoms staggered
   (per-capsule min-height); from each bottom a red line runs down, turns with a rounded elbow towards the centre and
   drops into the top of the hub disc as a 7 px-pitch bundle. Bottom: the navy lines leave under the disc, fan out with
   the same elbows and run down into six solution capsules (bottoms on one line, tops staggered). Paths are
   written by s02-diagrama.js from the measured layout (SVG .s02-mlines fills the wrap, 1 unit = 1 px); the engine
   (chip pools, lit dashes, "resolvido" seals) is the desktop one, chips upright (offset-rotate 0). The seal pops at
   the top of its capsule (where the chip arrives), counter-rotated so it reads upright. Fits 360 to 820 px: the row is
   6 x 42 px + 5 gaps of clamp(8, 2.6vw, 16) px, centred. */
@media (max-width: 900px) {
  .s02 { background: linear-gradient(180deg, #fff 0%, #fff 40%, #f3f4f7 72%, #d1d6e1 100%); }
  .s02 .s02-wrap { position: relative; padding-bottom: 48px; }

  /* flow the pieces */
  .s02 .s02-title, .s02 .pill, .s02 .s02-hub {
    position: relative; left: auto; top: auto; transform: none;
  }
  .s02 .s02-title { width: auto; height: auto; }

  /* the connector layer: behind the capsules and the hub (the white disc hides the line ends) */
  .s02 .s02-mlines {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: 100%; height: 100%; overflow: visible;
    fill: none; stroke-width: 1.5; stroke-linecap: round;
  }
  .s02 .s02-mlines .s02-red { stroke: var(--red); }
  .s02 .s02-mlines .s02-navy { stroke: var(--navy); }
  .s02 .s02-mlines .s02-soft { opacity: .35; }
  /* chips at 90%: transform (applied inside the motion-path offset), never the scale property, which is composed outside
     the offset and would shrink the chip's position towards the SVG origin, pulling it off its line */
  .s02 .s02-mlines .s02-trav { font-size: 10.5px; transform: scale(.9); }

  /* rows of standing capsules */
  .s02 .s02-list {
    position: relative; z-index: 1;
    display: flex; flex-direction: row; justify-content: center; align-items: flex-start;
    gap: clamp(8px, 2.6vw, 16px); width: 100%; margin: 0; padding: 0;
  }
  .s02 .s02-list--l { margin-top: 28px; }
  .s02 .s02-list--r { align-items: flex-end; }
  .s02 .pill {
    writing-mode: vertical-rl; rotate: 180deg;
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px;
    width: 42px; max-width: none; height: auto; min-height: var(--mh, 220px); padding: 15px 0;
    font-size: 13.5px; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; text-align: center;
  }
  .s02 .s02-pi { order: 2; width: 16px; height: 16px; }
  /* staggered ends (the sketch): problems end at different heights, solutions start at different heights */
  .s02 .s02-list--l .pill:nth-child(1) { --mh: 216px; }
  .s02 .s02-list--l .pill:nth-child(2) { --mh: 244px; }
  .s02 .s02-list--l .pill:nth-child(3) { --mh: 228px; }
  .s02 .s02-list--l .pill:nth-child(4) { --mh: 198px; }
  .s02 .s02-list--l .pill:nth-child(5) { --mh: 236px; }
  .s02 .s02-list--l .pill:nth-child(6) { --mh: 206px; }
  .s02 .s02-list--r .pill:nth-child(1) { --mh: 208px; }
  .s02 .s02-list--r .pill:nth-child(2) { --mh: 226px; }
  .s02 .s02-list--r .pill:nth-child(3) { --mh: 240px; }
  .s02 .s02-list--r .pill:nth-child(4) { --mh: 196px; }
  .s02 .s02-list--r .pill:nth-child(5) { --mh: 232px; }
  .s02 .s02-list--r .pill:nth-child(6) { --mh: 244px; }

  /* the seal pops at the top of the solution capsule (where the chip arrives): placed at the capsule's far end in its own
     (rotated) frame, written horizontally and spun back upright with the rotate property, so the script's scale pop
     (transform) still composes on top */
  .s02 .s02-seal {
    left: 50%; top: auto; bottom: 0; height: 20px; padding: 0 8px 0 4px; font-size: 10px;
    writing-mode: horizontal-tb;
    translate: -50% calc(100% - 10px); rotate: 180deg; transform-origin: 50% 50%;
  }
  .s02 .s02-seal svg { width: 13px; height: 13px; }

  /* room for the elbows between each row and the disc */
  .s02 .s02-link { position: relative; height: 118px; }

  /* centre circle keeps its design size (250 at 1 px per unit); the lines end under the disc */
  .s02 .s02-hub { margin: 0 auto; isolation: isolate; }
  .s02 .s02-hub::before {
    content: ""; position: absolute; inset: -70px; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 191, 99, .38) 0%, rgba(140, 198, 63, .22) 40%, rgba(255, 255, 255, 0) 70%);
  }
  .s02 .s02-hub-svg { position: relative; }
}
/* narrow phones: slightly slimmer capsules so six of them keep a gutter of 20 px */
@media (max-width: 374px) {
  .s02 .pill { width: 40px; }
}

/* rodada 44: o fundo de pontos do 02 nasce em degradê (antes começava cortado na emenda com o topo) */
@media (min-width: 901px) {
  .s02 .s02-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); }
}

/* ===== 03 clientes ===== */
/* 03 clientes: kicker on a light-to-navy fade, white client logos over the navy.
   The fade and the navy are the section's own background, so they reach both page edges and both
   section seams by construction (no separate background pieces, no light strip at the right).
   Colours: only the navy token. The fade is a white veil over it that thins out from 79% to 0,
   which gives navy tints of 21 / 35 / 53 / 75 / 100% and follows --navy if the token changes.
   The top (21% navy) is the colour section 02 ends with; the bottom is the solid navy band that
   continues into 04. */
.s03 {
  margin-top: -1px; /* rodada 13: cobre a linha parcial do pé do 02 (em 2,75x as duas bordas antisserrilhadas deixavam passar o branco da página: fio claro) */
  /* rodada 13: a cor base é o próprio azul-marinho (o degradê vai até o pé), mas a primeira linha de pixel, em telas de densidade
     fracionária (2,75x), misturava o véu com a base e desenhava um fio escuro: a base passa a ser o tom claro do alto (#d1d6e1,
     = navy + 79% de branco, a cor com que o 02 termina) e o véu cobre a seção inteira, ficando sólido navy de 452 px ao pé */
  background: #d1d6e1 linear-gradient(180deg,
      rgba(35, 61, 111, 0) 0%, rgba(35, 61, 111, 0.177) calc(113 * var(--u)), rgba(35, 61, 111, 0.405) calc(226 * var(--u)),
      rgba(35, 61, 111, 0.684) calc(339 * var(--u)), var(--navy) calc(452 * var(--u)), var(--navy) 100%) no-repeat 0 0 / 100% 100%;
}
.s03 .s03-title { color: var(--navy); text-align: center; }

/* Two-row belt. The original 1983 x 793 logos image (shown at 1366 x 546.4, scale 0.689) was cut
   into its two rows: s03-row1.webp (1472 x 102, 4 logos) and s03-row2.webp (1730 x 139, 5 logos),
   each with its seam gap baked in as transparent padding on the right, so a track of repeated copies
   is evenly spaced across the seam. The rows sit exactly where the two logo rows were in the image
   (row 1 at y 267..368 and row 2 at y 398..536 of the source, times 0.689). Each track holds 4 copies
   and slides by half its width (2 copies) per cycle, so the loop is seamless and 2 copies always cover
   the 1366 canvas (row 1: 2 x 1014, row 2: 2 x 1192 design px). Durations give both rows the same
   speed (about 50 design px per second): row 1 leftwards, row 2 rightwards (reversed keyframes). */
/* Round 2: the rows are at 90% of their size (same row centres: 219.11 and 322.12) and a mask fades
   both edges of the strip over the outer 8% so logos enter and leave softly instead of being cut by
   the viewport. Mask and the belt transform are compositor work; nothing is laid out while it runs.
   Round 3: the glare came from the art itself. The Canva export had a soft white glow baked around
   every logo (a near-opaque haze, alpha up to 0.85 between tight letters), so dimming the strip
   only made grey glowing logos. The strips were rebuilt from the original (same crops and sizes):
   the glow was estimated as a blur of the alpha and subtracted, the edge re-thresholded, and the
   logos filled with a flat, slightly cool white (#eef2f8, the logo's own shading kept as a darker
   tint). They are shown as they are: opacity 1, no filters, so they read as crisp normal white
   over the navy, not glaring and not dimmed. */
.s03 .s03-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.s03 .s03-belt { position: absolute; left: 0; width: 100%; overflow: hidden; }
.s03 .s03-belt--1 { top: calc(187.49 * var(--u)); height: calc(63.25 * var(--u)); }
.s03 .s03-belt--2 { top: calc(279.02 * var(--u)); height: calc(86.2 * var(--u)); }
.s03 .s03-belt__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: s03-belt 40s linear infinite;
}
.s03 .s03-belt--2 .s03-belt__track { animation-duration: 47s; animation-direction: reverse; }
.s03 .s03-row { display: block; flex: none; height: 100%; width: auto; max-width: none; }
@keyframes s03-belt { to { transform: translateX(-50%); } }

/* GPU hint only while the loop runs; paused off screen (JS toggles .is-off) and on hover (desktop). */
.s03:not(.is-off) .s03-belt__track { will-change: transform; }
.s03.is-off .s03-belt__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .s03 .s03-strip:hover .s03-belt__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .s03 .s03-belt__track, .s03:not(.is-off) .s03-belt__track { animation: none; will-change: auto; }
}

/* Mobile: the desktop idea stacked. Kicker centred on the light part of the fade, then the two belts,
   full bleed, with smaller logos (rows 40 and 54 px tall, 20 px apart; 2 copies of a row are at least
   1154 px wide, so the loop stays seamless up to the 900 px breakpoint). The page never overflows:
   each belt clips its own track.
   The fade is anchored to the content, measured from the bottom of the section: solid navy up to
   the middle of the belts, 64% navy where the logos start, 38% where the kicker ends (navy text
   on it is 5.1:1 or better, whatever the number of lines or the width), 21% at the top seam. */
@media (max-width: 900px) {
  .s03 {
    --s03-pad: 56px;                                   /* bottom rhythm, same as .m-wrap */
    --s03-gap: 40px;                                   /* kicker to belts */
    --s03-band: 114px;                                 /* belts: 40 + 20 + 54 (rows at 90%) */
    padding-bottom: var(--s03-pad);
    /* rodada 13: mesmas paradas de antes (véu branco de 0 a 79% sobre o navy), escritas como navy sobre a base clara #d1d6e1
       (navy a = 1 - véu/0,79), porque a base da seção agora é o tom claro do alto */
    background-image: linear-gradient(0deg,
      var(--navy) calc(var(--s03-pad) + var(--s03-band) * 0.5),
      rgba(35, 61, 111, 0.544) calc(var(--s03-pad) + var(--s03-band)),
      rgba(35, 61, 111, 0.367) calc(var(--s03-pad) + var(--s03-band) + var(--s03-gap) * 0.5),
      rgba(35, 61, 111, 0.215) calc(var(--s03-pad) + var(--s03-band) + var(--s03-gap)),
      rgba(35, 61, 111, 0.114) calc(var(--s03-pad) + var(--s03-band) + var(--s03-gap) + 24px),
      rgba(35, 61, 111, 0) 100%);
    background-size: 100% 100%;
  }
  .s03 .s03-head { padding-bottom: 0; }
  .s03 .s03-title {
    position: static; width: auto; height: auto; transform: none;
    line-height: 1.5;
    text-wrap: balance;
  }
  .s03 .s03-strip {
    position: static; width: auto; height: var(--s03-band); transform: none;
    margin-top: var(--s03-gap);
  }
  .s03 .s03-belt { position: static; }
  .s03 .s03-belt--1 { height: 40px; }
  .s03 .s03-belt--2 { height: 54px; margin-top: 20px; }
}

/* ===== 04 recursos ===== */
/* 04 recursos: pinned tracker (Ayocin behaviour, round 4). The section is tall (--h 3800) and holds one
   sticky stage of 100vh. While the stage is pinned, s04-recursos.js turns the section's scroll progress
   into ONE smoothed value that drives everything, so nothing ever jumps or blinks:
   - the router picture pans/zooms (1.35x max so the 1122 px source stays crisp) through four framings
     (antenna, LED row, logo, base);
   - the target (white dot, thin ring, a tiny satellite orbiting on the ring: CSS loop) glides over the
     router from one framed part to the next;
   - a thin dotted line (round dots) ALWAYS joins the target to the card's left edge at the card's
     vertical centre, as a gentle curve; its dots flow slowly towards the card (CSS loop);
   - the card (dark translucent, 15 px radius) stays still in the right column, vertically centred. It is
     a window: the four blocks are stacked in one column inside it and the stack slides up with the
     scroll (clipped by the card, faded at its top and bottom), so the next block comes in from below.
   Geometry: the router frame runs from x -13 to the card's left edge (858); the card is 460 wide with
   36 px side padding (text column at 894, 388 wide). The script sets the card height (--s04-ch) and the
   gap between blocks (--s04-gap) in design px from the measured blocks.
   overflow: clip (not hidden) on the section so the sticky stage still works. */
.s04 { background: var(--navy); color: var(--white); overflow: clip; }

.s04 .s04-stage { position: sticky; top: 0; height: min(100vh, calc(var(--h) * var(--u))); overflow: hidden; }

.s04 .s04-scene { display: contents; }

.s04 .s04-router {
  position: absolute; left: calc(-13 * var(--u)); top: 0;
  width: calc(1379 * var(--u)); height: 100%;
  overflow: hidden;
}
.s04 .s04-router > img {
  position: absolute; left: 0; top: 0;
  width: calc(1127.12 * var(--u)); height: calc(1408.4 * var(--u)); max-width: none;
  transform-origin: 0 0;
  transform: translate(calc(-368.11 * var(--u)), calc(12.73 * var(--u))); /* design position until the script runs */
}

/* connector: thin dotted curve (round caps on 0.1 dashes = round dots every 6.1 user units) whose dots
   flow towards the card at 12 px/s (10 periods = 61 units in 5.083 s). The loop runs only on screen. */
.s04 .s04-connector { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s04 .s04-dash {
  fill: none; stroke: var(--white); stroke-opacity: 0.6; stroke-width: 1.3;
  stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 6 5;
}
/* the dot flow is driven by the script (steady drift + a burst whenever the target moves) */

/* target: 48 design px box centred on the tracked point (the script moves it with a transform); white
   dot, thin ring and a tiny satellite orbiting on the ring (3 s a turn, only while on screen) */
.s04 .s04-target {
  position: absolute; left: 0; top: 0; width: calc(48 * var(--u)); height: calc(48 * var(--u));
  transform: translate(calc(512 * var(--u)), calc(300 * var(--u))); /* framing 1 (antenna) on a 900 px stage, until the script runs */
  pointer-events: none;
}
.s04 .s04-target svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s04 .s04-target-dot { fill: var(--white); }
.s04 .s04-target-ring { fill: none; stroke: var(--white); stroke-opacity: 0.6; stroke-width: 1.2; }
.s04 .s04-target-orbit { fill: var(--white); animation: s04-spin 3s linear infinite paused; }
.s04.is-live .s04-target-orbit { animation-play-state: running; }
@keyframes s04-spin { to { transform: rotate(360deg); } }

/* card: a fixed window (right column, vertically centred). The blocks sit in one column (.s04-track)
   that the script slides with a transform; .s04-win clips it to the card and fades its top and bottom. */
.s04 .s04-items {
  position: absolute; left: calc(858 * var(--u)); top: 50%; width: calc(460 * var(--u));
  height: calc(var(--s04-ch, 360) * var(--u));
  translate: 0 -50%;
}
.s04 .s04-card {
  position: absolute; inset: 0;
  background: rgba(6, 16, 40, 0.72);
  border-radius: calc(15 * var(--u));
}
.s04 .s04-win {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.93) 15%, #000 18%, #000 82%, rgba(0, 0, 0, 0.93) 85%, rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.3) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.3) 5%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.93) 15%, #000 18%, #000 82%, rgba(0, 0, 0, 0.93) 85%, rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.3) 95%, transparent 100%);
}
.s04 .s04-track {
  position: absolute; left: calc(36 * var(--u)); right: calc(36 * var(--u)); top: 0;
  display: flex; flex-direction: column; gap: calc(var(--s04-gap, 150) * var(--u));
  transform: translateY(calc(61 * var(--u))); /* block 1 centred until the script runs */
}
.s04 .s04-item .feat-h { margin-bottom: calc(16 * var(--u)); }
.s04 .s04-item .body { opacity: 0.85; }
.s04 .s04-ico {
  display: block; width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-bottom: calc(14 * var(--u));
  fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Only while the section is on screen (class set by the script) do the moving parts ask for a layer. */
.s04.is-live .s04-router > img, .s04.is-live .s04-target, .s04.is-live .s04-track { will-change: transform; }

/* Mobile (round 10): the router travels behind the cards. The scene (router picture, 320 px max) is sticky
   under the landing header (--s04-top = header height, see landing-head.css) while the four cards, translucent
   over the navy, scroll over it; s04-recursos.js adds a scroll-linked glide (translate/scale/opacity of the
   router over the section's progress) so it recedes as the cards pass. Cards still fade/slide in once (.s04-pre /
   .is-in). The target marker, the connector and the card window are dropped. Reduced motion: static (no sticky,
   no glide). overflow: clip (not hidden) keeps the sticky scene working. */
@media (max-width: 900px) {
  .s04 { overflow: clip; --s04-top: var(--aonet-lh-h, 0px); }
  .s04 .s04-stage { position: static; height: auto; overflow: visible; }
  .s04 .s04-connector, .s04 .s04-target, .s04 .s04-card { display: none; }
  .s04 .s04-scene {
    display: block; position: sticky; top: calc(var(--s04-top) + 3vh); z-index: 0;
    width: min(76vw, 320px); margin: -16px auto 0; pointer-events: none;
  }
  .s04 .s04-router { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1122 / 1402; overflow: visible; transform-origin: 50% 40%; }
  .s04.is-live .s04-router { will-change: transform, opacity; }
  .s04 .s04-router > img { position: static; width: 100%; height: auto; transform: none; }
  .s04 .s04-items { position: relative; left: auto; top: auto; z-index: 1; width: auto; height: auto; translate: none; margin-top: -72px; }
  .s04 .s04-win { position: static; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .s04 .s04-track { position: static; transform: none; display: flex; flex-direction: column; gap: 20px; }
  .s04 .s04-ico { width: 26px; height: 26px; margin-bottom: 12px; }
  .s04 .s04-item { padding: 24px 20px 28px; background: rgba(6, 16, 40, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 15px; }
  .s04 .s04-item .body { text-wrap: pretty; }
  .s04 .s04-item { transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .s04 .s04-item.s04-pre { opacity: 0; translate: 0 24px; }
  .s04 .s04-item.is-in { opacity: 1; translate: none; }
}
/* Small phones: a slimmer inset keeps the text column from getting too narrow. */
@media (max-width: 360px) {
  .s04 .s04-item { padding: 20px 16px 24px; }
}

/* Reduced motion: no loops (the satellite rests on top of the ring, the dots stand still). */
@media (prefers-reduced-motion: reduce) {
  .s04 .s04-item { transition: none; }
  .s04 .s04-scene { position: static; }
  .s04 .s04-router { transform: none !important; opacity: 1 !important; }
  .s04 .s04-item.s04-pre { opacity: 1; translate: none; }
  .s04 .s04-target-orbit, .s04.is-live .s04-target-orbit, .s04 .s04-dash, .s04.is-live .s04-dash { animation: none; }
}

/* ===== 05 marca ===== */
/* 05 marca: solid navy band with the giant brand words AONET / EMPRESAS.
   The band is 700 design px tall: about 119 px of navy above "AONET", 112 between the words
   and 119 below "EMPRESAS". "AONET" bleeds off the right edge (the E is partly cut, the T is
   off-screen). "EMPRESAS" bleeds off the left edge by part of the stem of its first "E" only
   (x -48), so the whole word reads, and it ends about 24 px before the right edge.
   The navy reaches both page edges. */
.s05 { background: var(--navy); color: var(--white); }
.s05 .s05-words { position: absolute; inset: 0; }
.s05 .s05-w1, .s05 .s05-w2 { color: var(--white); font-weight: 700; }

/* Motion (s05-marca.js): the words cross the band as the page scrolls, driven by an inline
   translateX. will-change only while the band is on screen; reduced motion keeps the static
   Canva positions (the script does not run). The band already clips (.s overflow: hidden). */
.s05.is-on .s05-w1, .s05.is-on .s05-w2 { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .s05 .s05-w1, .s05 .s05-w2 { transform: none !important; will-change: auto; }
}

/* Mobile: the same motif, stacked. Both words are 17% of the width (the desktop is
   241 / 1366 = 17.6%), a touch smaller so "EMPRESAS" keeps a clear margin on the right.
   "AONET" bleeds off the right with the E partly cut (the T is off-screen) and "EMPRESAS"
   starts -0.15em to the left, so only part of the stem of its first "E" is cut (a little less than on
   the desktop, to keep the stem legible at phone sizes).
   The band stays compact, with even navy above, between and below the words. */
@media (max-width: 900px) {
  .s05 { padding: 7cqw 0; }
  .s05 .s05-words { position: relative; inset: auto; }
  .s05 .s05-w1, .s05 .s05-w2 {
    position: relative;
    left: auto; top: auto; width: auto; height: auto;
    font-size: 17cqw;
    line-height: 1.04;
    white-space: nowrap;
  }
  .s05 .s05-w1 { margin-left: 52.5cqw; }
  .s05 .s05-w2 { margin-left: -0.15em; margin-top: 3.4cqw; }
}

/* ===== 06 planos ===== */
/* 06 planos: dark galaxy section with the plan card and the 1.000 Mbps statement.
   Everything is centred on the page axis (x 683): the card, the prev/next buttons, the rings
   and the statement. The statement is a pinned stage: the section is 2263 (natural) + 900 (travel)
   design px tall and the stage inside .s06-speed is sticky while the number counts with the scroll. */
.s06 { background: linear-gradient(180deg, var(--navy) 0, var(--navy) 60px, #0d1b3b 200px, #0d1b3b 100%); color: var(--navy); overflow: clip; } /* rodada 13: o fundo só aparece na linha de borda fracionária de telas 2,75x: azul-marinho no alto (05), tom base da galáxia no pé (07); antes era branco e virava um fio claro */ /* clip, not hidden: hidden would kill the sticky stage */
/* procedural galaxy (canvas drawn by JS, continued on the same canvas of 07 so the seam is a plain
   continuation); the gradient under it is the base and the no-JS look */
.s06 .s06-sky {
  /* rodada 13: o canvas começa 3 px abaixo da borda da seção. O canvas é uma camada própria do compositor: quando a borda dele
     coincide com a borda (fracionária em telas 2,75x) do recorte da seção, a linha parcial mostra o canvas escuro por baixo do
     véu navy (um fio escuro na emenda 05→06). Os 3 px ficam no navy do fundo da seção, que é a cor do véu. */
  position: absolute; left: 0; top: 3px; width: 100%; height: calc(100% - 3px);
  background: linear-gradient(to bottom, #0b1a3a 0%, #14274d 55%, #0d1b3b 100%);
}
/* seam with the navy band of 05: the navy melts into the galaxy instead of stopping on a hard edge */
.s06 .s06-fade {
  background: linear-gradient(to bottom,
    var(--navy) 0%,
    rgba(35, 61, 111, 0.78) 22%,
    rgba(35, 61, 111, 0.42) 50%,
    rgba(35, 61, 111, 0.14) 78%,
    rgba(35, 61, 111, 0) 100%);
  pointer-events: none;
  top: -2px; height: calc(220 * var(--u) + 2px); /* rodada 13: a borda de cima fica fora do recorte da seção (em 2,75x a primeira linha misturava véu e galáxia num fio) */
}
/* rings around the statement: four ripples born at the centre, growing and fading out (frequency
   pulse). They run only while the count runs (.is-on = on screen) and the whole group fades out over
   600 ms when the count reaches 1.000 (.is-done); it fades back in if the count drops again. Once the
   fade is over the loop is paused (.is-idle, set by JS) so nothing animates behind an invisible group.
   No rings at all under reduced motion or without JS. Each ring is a full-size circle scaled by
   transform, so only transform/opacity animate. */
.s06 .s06-rings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; }
.s06 .s06-pulse { position: absolute; inset: 0; display: block; transition: opacity 0.6s ease; }
.s06 .s06-rings i {
  position: absolute; inset: 0;
  display: block;
  border: calc(4 * var(--u)) solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}
.s06 .s06-pulse i {
  opacity: 0;
  transform: scale(0.05);
  animation: s06-ring 6.4s linear infinite paused;
}
.s06 .s06-rings.is-on .s06-pulse i { animation-play-state: running; will-change: transform, opacity; }
.s06 .s06-rings.is-idle .s06-pulse i { animation-play-state: paused; }
.s06 .s06-pulse i:nth-child(1) { animation-delay: -0.1s; }
.s06 .s06-pulse i:nth-child(2) { animation-delay: -1.7s; }
.s06 .s06-pulse i:nth-child(3) { animation-delay: -3.3s; }
.s06 .s06-pulse i:nth-child(4) { animation-delay: -4.9s; }
@keyframes s06-ring {
  0%   { transform: scale(0.05); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 0.55; }
  100% { transform: scale(var(--rmax, 1)); opacity: 0; }
}
/* count complete: the ripples fade out and stay hidden */
.s06 .s06-rings.is-done .s06-pulse { opacity: 0; }
html:not(.js) .s06 .s06-pulse { display: none; }
/* round 10, seam with 07: the last 110 px melt into the flat base tone the sky of 07 starts on (#0d1b3b), so the two
   canvases (different nebulae and stars) meet on one colour; z 0 keeps it under the content (wrap/speed are z 1+) */
.s06::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 110px;
  background: linear-gradient(to bottom, rgba(13, 27, 59, 0), #0d1b3b);
  pointer-events: none;
}

/* the plan card: the white rect is the desktop card, the article only groups the content */
.s06 .s06-card { background: #fff; }
.s06 .s06-photo { border-radius: calc(15 * var(--u)); }
.s06 .s06-infobox { z-index: 4; }
.s06 .s06-info {
  display: block; width: 100%; height: 100%; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--navy); opacity: 0.7; cursor: pointer;
  transition: opacity 0.2s;
}
.s06 .s06-info svg { display: block; width: 100%; height: 100%; }
.s06 .s06-info:hover, .s06 .s06-info:focus-visible, .s06 .s06-infobox.is-open .s06-info { opacity: 1; }
.s06 .s06-info:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* legend panel: hangs from the icon, right aligned; the transparent top is the hover bridge */
.s06 .s06-tip {
  position: absolute; right: calc(-6 * var(--u)); top: 100%;
  width: calc(340 * var(--u));
  padding-top: calc(10 * var(--u));
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-6 * var(--u)));
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.s06 .s06-infobox:hover .s06-tip, .s06 .s06-info:focus-visible + .s06-tip, .s06 .s06-infobox.is-open .s06-tip {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.s06 .s06-tip__box {
  background: #fff; color: var(--navy);
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0, 0, 0, 0.3);
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  text-align: left;
}
.s06 .s06-tip__h { font-size: calc(13 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: calc(8 * var(--u)); }
.s06 .s06-tip__list { list-style: none; font-size: calc(13.5 * var(--u)); line-height: 1.35; }
.s06 .s06-tip__list li { padding: calc(3 * var(--u)) 0; }
.s06 .s06-tip__list b { font-weight: 700; }
.s06 .s06-title { font-size: calc(53 * var(--u)); font-weight: 700; color: var(--navy); }
.s06 .s06-sub { color: #6b7384; }
.s06 .s06-slogan { color: var(--navy); }

/* feature grid: 4 x 2, one circle size, first and last circle flush with the column edges,
   labels centred under each icon */
.s06 .s06-feats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, calc(80 * var(--u)));
  justify-content: space-between;
  row-gap: calc(18 * var(--u));
}
.s06 .s06-feats li {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  min-height: calc(116.3 * var(--u)); /* circle + gap + two label lines: both rows the same */
}
.s06 .s06-ic {
  position: relative;
  flex: none;
  width: calc(80 * var(--u)); height: calc(80 * var(--u));
  border: calc(1 * var(--u)) solid var(--navy);
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
/* the icon files carry their own thin circle; scale them a little so it falls outside the clip */
.s06 .s06-ic img { position: absolute; inset: -6%; width: 112%; height: 112%; }
/* line icons drawn inline (IP Fixo, Gerente de Contas) in the same weight as the files */
.s06 .s06-ic svg { position: absolute; inset: 24%; width: 52%; height: 52%; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the 1000 Mega plan has ten features: five smaller circles per row in the same column width */
.s06 .s06-feats--10 { grid-template-columns: repeat(5, calc(70 * var(--u))); row-gap: calc(14 * var(--u)); }
.s06 .s06-feats--10 li { min-height: calc(106.3 * var(--u)); }
.s06 .s06-feats--10 .s06-ic { width: calc(70 * var(--u)); height: calc(70 * var(--u)); }
.s06 .s06-feats--10 .s06-lbl { font-size: calc(11.2 * var(--u)); }
.s06 .s06-lbl {
  font-size: calc(12.3 * var(--u));
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}

/* shared CTA on the white card: full width of the text column (--w 454 from the .a box), the shared .cta look */
.s06 .s06-cta { display: flex; }
.s06 .s06-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* prev / next: equal white circles with the shared chevron, centred in the side gutters (60% of the
   original 70 px, same centres) */
.s06 .s06-nav {
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  transition: background-color 0.2s;
}
.s06 .s06-nav:hover { background: var(--mist); }
.s06 .s06-nav svg { width: calc(14.4 * var(--u)); height: calc(9.6 * var(--u)); }
.s06 .s06-prev svg { transform: rotate(90deg) translateY(4%); }
.s06 .s06-next svg { transform: rotate(-90deg) translateY(4%); }
.s06 .s06-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.s06 .s06-nav:disabled { cursor: default; opacity: 0.85; }
/* plan indicator under the card */
.s06 .s06-dots { display: flex; justify-content: center; align-items: center; gap: calc(14 * var(--u)); }
.s06 .s06-dot {
  width: calc(10 * var(--u)); height: calc(10 * var(--u)); padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
.s06 .s06-dot[aria-current="true"] { background: #fff; transform: scale(1.3); }
.s06 .s06-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* carousel: the article is the slide (translateX + opacity during a change, 450 ms) */
.s06 .s06-plan.is-moving, .s06 .s06-cardwrap.is-moving { will-change: transform, opacity; }

/* the 1.000 Mbps statement: white, centred on the rings */
.s06 .s06-speed-txt { color: #fff; text-align: center; }
.s06 .s06-kicker { white-space: nowrap; }
.s06 .s06-big { font-size: calc(85 * var(--u)); font-weight: 700; line-height: 1.1; margin-top: calc(10 * var(--u)); white-space: nowrap; }
.s06 .s06-num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.s06 .s06-cap { margin-top: calc(10 * var(--u)); color: rgba(255, 255, 255, 0.85); }
.s06 .s06-cap b { color: #fff; }

@media (min-width: 901px) {
  .s06 .s06-head { display: contents; }
  /* both boxes start at the section origin so the .a children keep their design coordinates;
     the height covers only the card area, so the animated layers stay small. The card is drawn at
     85% of the design size around its own centre (683, 486.12), so it stays centred. */
  .s06 .s06-cardwrap, .s06 .s06-plan { position: absolute; left: 0; top: 0; width: 100%; height: calc(800 * var(--u)); }
  .s06 .s06-cardwrap { z-index: 2; scale: 0.85; transform-origin: calc(683 * var(--u)) calc(486.12 * var(--u)); }
  .s06 .s06-plan { border-radius: 0; box-shadow: none; }
  /* pinned statement: the track starts at 880 (the stage is 900 tall, so the ring centre lands on the
     design row 1330) and is the stage plus 900 of travel; the stage sticks to the top of the viewport */
  .s06 .s06-speed { position: absolute; left: 0; top: calc(880 * var(--u)); width: 100%; height: calc(900 * var(--u)); z-index: 1; }
  .s06--pin .s06-speed { height: calc(1800 * var(--u)); }
  .s06 .s06-stage { position: sticky; top: 0; height: min(100vh, calc(900 * var(--u))); }
  .s06 .s06-rings { width: calc(1786 * var(--u)); height: calc(1786 * var(--u)); }
  /* the block is centred on the ring centre whatever its height */
  .s06 .s06-speed-txt { position: absolute; left: calc(233 * var(--u)); top: 50%; width: calc(900 * var(--u)); transform: translateY(-50%); }
  /* no pin (reduced motion, no JS): the natural height of the design */
  .s06:not(.s06--pin) { height: calc(2263 * var(--u)); }
}

/* Mobile: the desktop idea stacked on the same galaxy backdrop */
@media (max-width: 900px) {
  .s06 { --d: min(100vw - 24px, 420px); } /* diameter of the inner ring */
  .s06 .a { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }

  .s06 .s06-fade { position: absolute; left: 0; top: -2px; width: 100%; height: 122px; }
  .s06 .s06-wrap { position: relative; z-index: 1; }

  .s06 .s06-cardwrap { position: relative; z-index: 1; touch-action: pan-y; }
  .s06 .s06-plan { position: relative; z-index: 1; display: flex; flex-direction: column; background: #fff; padding: 12px 12px 16px; }
  .s06 .s06-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; }
  .s06 .s06-photo > img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

  .s06 .s06-head { position: relative; margin: 20px 4px 0; }
  /* the (!) sits on the card's top right corner, over the photo, on a white disc */
  .s06 .s06-infobox { position: absolute; right: 22px; top: 22px; width: 32px; height: 32px; z-index: 4; }
  .s06 .s06-info { padding: 5px; background: #fff; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
  .s06 .s06-tip { right: 0; width: min(320px, calc(100vw - 60px)); padding-top: 8px; }
  .s06 .s06-tip__box { border-radius: 12px; padding: 12px 14px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); }
  .s06 .s06-tip__h { font-size: 12px; margin-bottom: 6px; }
  .s06 .s06-tip__list { font-size: 13px; }
  .s06 .s06-tip__list li { padding: 2px 0; }
  .s06 .s06-title { font-size: clamp(34px, 10.5vw, 40px); line-height: 1.1; }
  .s06 .s06-sub { margin-top: 2px; font-size: 16px; line-height: 1.3; }

  .s06 .s06-feats, .s06 .s06-feats--10 { grid-template-columns: repeat(4, 1fr); justify-content: normal; gap: 20px 0; margin: 24px 0 0; }
  .s06 .s06-feats li, .s06 .s06-feats--10 li { gap: 8px; min-height: 0; }
  .s06 .s06-ic, .s06 .s06-feats--10 .s06-ic { width: 64px; height: 64px; border-width: 1px; }
  .s06 .s06-lbl, .s06 .s06-feats--10 .s06-lbl { font-size: 13px; line-height: 1.2; }

  .s06 .s06-slogan { margin: 28px 4px 12px; font-size: clamp(16px, 5vw, 20px); line-height: 1.2; }
  .s06 .s06-cta { display: flex; width: 100%; max-width: none; height: 50px; }

  .s06 .s06-navs { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
  .s06 .s06-nav { width: 56px; height: 56px; }
  .s06 .s06-dots { gap: 12px; padding: 0 8px; }
  .s06 .s06-dot { width: 10px; height: 10px; }
  .s06 .s06-nav svg { width: 22px; height: 15px; }

  /* the rings block: the track is the stage (the square around the inner ring, the statement in its
     centre) plus 600 px of travel when pinned; the two outer rings run behind the card and off the sides */
  /* round 10: a shorter track (360 px of travel, the count is done at 85% of it) and no gap after it, so
     "Seu negócio" (07) follows right after the statement */
  .s06 .s06-speed { position: relative; margin: 24px 0 0; }
  .s06--pin .s06-speed::after { content: ""; display: block; height: 360px; } /* the travel: a block, never padding (a sticky box cannot travel into padding) */
  .s06 .s06-wrap { padding-bottom: 8px; }
  .s06 .s06-stage {
    position: sticky; top: var(--aonet-lh-h, 0px); /* under the landing header, which is sticky on phones */
    display: flex; flex-direction: column; justify-content: center;
    height: auto; padding: 40px 0 32px; /* the stage is just the statement; the rings stay centred on it */
  }
  .s06 .s06-rings { width: calc(var(--d) * 2.3293); height: calc(var(--d) * 2.3293); max-width: none; }
  .s06 .s06-speed-txt { position: relative; }
  /* the ripples stop at the second design ring (the outer one would be chopped by the seam with 07) */
  .s06 .s06-pulse i { --rmax: 0.4; } /* round 10: the stage is short, so the ripples stop well before the seam with 07 */
  .s06 .s06-rings i { border-width: 3px; }
  .s06 .s06-kicker { white-space: normal; text-wrap: balance; }
  .s06 .s06-big { margin-top: 8px; font-size: clamp(42px, 13vw, 64px); }
  .s06 .s06-cap { max-width: 330px; margin: 10px auto 0; text-wrap: balance; }
}

/* Phones: 13 px caps labels do not fit four across, so the same eight features become a
   two-column list (icon + label), still a 4 x 2 grid */
@media (max-width: 479px) {
  .s06 .s06-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; margin-top: 22px; padding: 0 4px; }
  .s06 .s06-feats li { flex-direction: row; gap: 10px; }
  .s06 .s06-ic, .s06 .s06-feats--10 .s06-ic { width: 44px; height: 44px; }
  .s06 .s06-lbl, .s06 .s06-feats--10 .s06-lbl { text-align: left; }
}
@media (max-width: 379px) {
  .s06 .s06-feats { padding: 0; }
  .s06 .s06-ic, .s06 .s06-feats--10 .s06-ic { width: 40px; height: 40px; }
  .s06 .s06-feats li { gap: 8px; }
}
/* narrow phones: the label steps down so it stays on one line */
@media (max-width: 359px) {
  .s06 .s06-cta { font-size: 12px; }
}
@media (max-width: 339px) {
  .s06 .s06-feats { grid-template-columns: 1fr; }
  .s06 .s06-cta { font-size: 11px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .s06 .s06-pulse { display: none; }
  .s06 .s06-tip { transition: none; }
}

/* ===== 07 segmentos ===== */
/* 07 segmentos: the galaxy of 06 goes on behind the four segment cards and fades into white fog.
   Motion: the left block is pinned (sticky) while the two card columns move at different speeds (JS parallax),
   cards zoom their photo and swap "+" for the arrow on hover. */
.s07 { background: linear-gradient(180deg, #0d1b3b 0, #0d1b3b 60%, #fff 100%); isolation: isolate; overflow: clip; } /* rodada 13: fundo escuro no alto e branco no pé (só aparece nas linhas de borda do canvas em telas 2,75x; era branco e desenhava um fio claro sobre o 06) */ /* clip, not hidden: hidden would make the section the scroll container and kill the sticky block */
/* the sky is the same procedural galaxy as 06 (canvas drawn by JS through the shared AONET.drawGalaxy, another
   seed), starting on the tone 06 ends on so the seam is a plain continuation; the gradient under it is the
   base and the no-JS look */
.s07 .s07-sky {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;
  background: linear-gradient(to bottom, #0d1b3b 0%, #14274d 55%, #0b1a3a 100%);
}
/* round 10, seam with 06: the first 110 px come out of the same flat base tone (#0d1b3b) the end of 06 melts into */
.s07::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 110px;
  background: linear-gradient(to bottom, #0d1b3b, rgba(13, 27, 59, 0));
  pointer-events: none;
}
.s07 .s07-h, .s07 .s07-rot { color: #fff; }
.s07 .s07-rot { font-weight: 400; }
/* the CTA is placed by its .a box (x 75.8, y 116); rodada 13: content width, shared .cta look */
.s07 .s07-cta { width: auto; padding: 0 calc(36 * var(--u)); }
.s07 .s07-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.s07 .s07-cards, .s07 .s07-col { list-style: none; }

/* Desktop canvas: the wrap is the sticky container (ends above the fog so the white title never pins over it),
   the pinned block sits in flow at the top of it, the card columns are absolute (positions in the fragment).
   The columns live entirely to the right of the pinned block (x >= 580, block ends at 546): the parallax only
   moves them vertically, so the title/CTA never covers a card while pinned. */
.s07 .s07-wrap { position: absolute; left: 0; top: 0; width: 100%; height: calc(1060 * var(--u)); z-index: 2; }
.s07 .s07-topo { position: sticky; top: 0; height: calc(200 * var(--u)); z-index: 2; }
.s07 .s07-cards { position: absolute; inset: 0; z-index: 1; }
.s07 .s07-col { transform: translate3d(0, 0, 0); }
.s07.is-live .s07-col { will-change: transform; }

/* photo cards: the whole card is a link; a soft shade under the label so white text reads on the bright photos too */
.s07 .s07-link { position: absolute; inset: 0; display: block; color: #fff; }
.s07 .s07-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.s07 .s07-rot, .s07 .s07-link .plus, .s07 .s07-seta { z-index: 1; }
.s07 .s07-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* hover / focus: subtle photo zoom, "+" gives way to the arrow pill */
.s07 .s07-link > img { transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.s07 .s07-link .plus { transition: opacity .25s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.s07 .s07-seta { color: #fff; opacity: 0; transform: translateX(calc(-10 * var(--u))); transition: opacity .3s ease .05s, transform .45s cubic-bezier(.16, 1, .3, 1) .05s; }
.s07 .s07-link:hover > img, .s07 .s07-link:focus-visible > img { transform: scale(1.06); }
.s07 .s07-link:hover .plus, .s07 .s07-link:focus-visible .plus { opacity: 0; transform: rotate(90deg) scale(.5); }
.s07 .s07-link:hover .s07-seta, .s07 .s07-link:focus-visible .s07-seta { opacity: 1; transform: none; }
@media (hover: none) { /* touch: the "+" stays */
  .s07 .s07-link:hover > img { transform: none; }
  .s07 .s07-link:hover .plus { opacity: 1; transform: none; }
  .s07 .s07-link:hover .s07-seta { opacity: 0; }
}

/* Emenda com o 09 (rodada 19: só cor, sem imagem). A névoa (s07-nevoa.webp, cinza-azulada) saiu; no pé da seção há um
   véu em duas fases, acima do céu (z 0) e abaixo dos cartões (z 2):
   1) --fade: transparente → azul-marinho opaco (#0f2043, o tom que o canvas tem nesta altura): as estrelas e as nebulosas
      somem por completo antes de a cor começar a clarear;
   2) --grad: azul-marinho → branco em 12 paradas calculadas em OKLab (chaves #0f2043 → #2a4a80 → #8aa4cc → #e6edf7 → #fff,
      luminosidade com entrada suave e saída branda: 1 - (1 - t²)^1,3), sempre com um resto de azul (nada de cinza);
      240 px de design no desktop, 180 no tablet, 150 no celular. O 09 (branco) começa logo depois. */
.s07 { --fade: calc(120 * var(--u)); --grad: calc(240 * var(--u)); }
.s07 .s07-nevoa { display: none; }
.s07::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fade) + var(--grad));
  background: linear-gradient(to bottom,
    rgba(15, 32, 67, 0) 0,
    #0f2043 var(--fade),
    #102245 calc(var(--fade) + var(--grad) * .083),
    #13274d calc(var(--fade) + var(--grad) * .167),
    #192f59 calc(var(--fade) + var(--grad) * .25),
    #203b6a calc(var(--fade) + var(--grad) * .333),
    #2b4b81 calc(var(--fade) + var(--grad) * .417),
    #405f92 calc(var(--fade) + var(--grad) * .5),
    #5976a6 calc(var(--fade) + var(--grad) * .583),
    #7591bc calc(var(--fade) + var(--grad) * .667),
    #96aed2 calc(var(--fade) + var(--grad) * .75),
    #bccce4 calc(var(--fade) + var(--grad) * .833),
    #e1e9f5 calc(var(--fade) + var(--grad) * .917),
    #fff 100%);
  pointer-events: none; z-index: 1;
}

/* Mobile: the desktop idea stacked. Title + CTA, cards in one column (in-view fade), colour seam at the bottom */
@media (max-width: 900px) {
  .s07 { --fade: 70px; --grad: 150px; }
  /* the sky canvas keeps covering the section (its height follows the content; JS redraws it on resize) */

  /* rodada 19: o último cartão termina 10 px antes de o degradê começar a clarear (o esmaecer das estrelas fica atrás dele) */
  .s07 .s07-wrap { position: relative; width: auto; height: auto; z-index: 2; padding-bottom: calc(var(--grad) + 10px); }
  .s07 .s07-topo { position: static; height: auto; }
  .s07 .s07-titulo { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .s07 .s07-h, .s07 .s07-mais-h { position: static; }
  .s07 .s07-h { width: auto; height: auto; text-align: center; }
  .s07 .s07-mais-h { flex: none; }
  .s07 .s07-cta { position: relative; left: auto; top: auto; display: flex; margin: 24px auto 0; }

  /* the two columns dissolve into one grid; order restores the design sequence (1 Alimentício, 2 Governo, 3 Indústrias, 4 Varejo) */
  .s07 .s07-cards { position: static; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .s07 .s07-col { display: contents; }
  .s07 .s07-col--b .s07-card:first-child { order: 2; }
  .s07 .s07-col--a .s07-card:last-child { order: 3; }
  .s07 .s07-col--b .s07-card:last-child { order: 4; }
  .s07 .s07-card { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .s07 .s07-link > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Governo: crop from the top (as on desktop) so the Congresso towers stay whole with sky above */
  .s07 .s07-col--b .s07-card:first-child .s07-link > img { object-position: 50% 0; }
  .s07 .s07-rot { left: 24px; top: auto; bottom: 22px; width: auto; height: auto; font-size: 22px; line-height: 1.2; }
  .s07 .s07-link .plus { left: auto; top: auto; right: 24px; bottom: 24px; }
  .s07 .s07-seta { display: none; }

  /* in-view fade (JS adds .is-in when the card enters the viewport) */
  .js .s07 .s07-card { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
  .js .s07 .s07-card.is-in { opacity: 1; transform: none; }
}
/* tablet: two columns, the right one raised like the desktop stagger */
@media (min-width: 600px) and (max-width: 900px) {
  .s07 { --fade: 90px; --grad: 180px; }
  .s07 .s07-wrap { max-width: 760px; }
  .s07 .s07-cards { grid-template-columns: 1fr 1fr; margin-top: 88px; }
  .s07 .s07-card { aspect-ratio: 450 / 410; }
  .s07 .s07-col--b .s07-card { translate: 0 -48px; }
}

/* Reduced motion: no parallax (JS skips it), no fade, no zoom; everything at its final state */
@media (prefers-reduced-motion: reduce) {
  .s07 .s07-col { transform: none !important; }
  .js .s07 .s07-card { opacity: 1; transform: none; }
  .s07 .s07-link:hover > img, .s07 .s07-link:focus-visible > img { transform: none; }
}

/* ===== 08 infra ===== */
/* Section 08: infraestrutura. Rodada 13: seção removida a pedido do cliente (roteador + 6 ícones). O arquivo fica vazio para o montador (montar-empresas-css.mjs) manter a ordem; 07 emenda direto em 09, ambas em branco. */

/* ===== 09 mapa ===== */
/* 09 mapa (round 10): "Nossa cobertura" as a white card over a live map.
   The map band (.s09-mapbox) holds the static region image (fallback, shown until Leaflet is live) and the Leaflet
   container (.s09-map, faded in once the map exists: .s09--live). The card holds the title, the city select, the
   street + number fields, the shared green CTA, the result line and the WhatsApp hand-over.
   Desktop: the band is full-bleed from y 80 to the bottom of the section and the card overlaps it on the left
   (x 103, y 150, 400 wide). Mobile: card in flow, then the band (320 px tall, rounded). The Leaflet container is an
   isolated stacking context (its panes use z-index 400..1000) so the fixed/sticky header always stays above it. */
.s09 { background: #fff; margin-top: -1px; } /* rodada 13: cobre a última linha do canvas do 07 (cinza em telas 2,75x) */
/* rodada 19: a textura de onda pontilhada (onda-branca.webp) saiu desta seção em todas as larguras: o 07 termina num degradê
   de cor que chega ao branco e o 09 começa branco liso (o mapa em y 34 no desktop, o cartão 28 px abaixo da emenda no celular).
   A mesma textura continua no 10. O elemento fica no HTML escondido (a imagem é lazy: não chega a ser baixada). */
.s09 .s09-onda { display: none; }
/* rodada 18: o mapa começa em y 34 (era 80) e o cartão em y 104 (era 150), seção 1027 (era 1073);
   rodada 19: mapa em y 28, cartão em 98, seção 1021 (branco liso entre o fim do degradê do 07 e o mapa: 28 px de design, 39 px em 1920) */

/* ---------- map band ---------- */
.s09 .s09-mapbox { position: relative; z-index: 0; isolation: isolate; background: var(--mist); overflow: hidden; }
.s09 .s09-mapa { position: absolute; inset: 0; z-index: 1; transition: opacity .6s ease; }
.s09 .s09-mapa > img { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.s09 .s09-map { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .6s ease; background: #e9ecf1; }
.s09.s09--live .s09-map { opacity: 1; }
.s09.s09--live .s09-mapa, .s09.s09--live .s09-linhas { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.s09 .s09-linhas { pointer-events: none; z-index: 1; }
.s09 .s09-map .leaflet-container { width: 100%; height: 100%; font-family: inherit; background: #e9ecf1; outline: 0; }
/* a light basemap out of the standard OSM tiles: less colour, a touch brighter */
.s09 .s09-map .leaflet-tile-pane { filter: saturate(.45) brightness(1.03); }
.s09 .s09-map .leaflet-control-attribution { font-size: 10px; color: #566; background: rgba(255, 255, 255, .8); }
.s09 .s09-map .leaflet-control-attribution a { color: var(--navy); }
.s09 .s09-map .leaflet-bar a { color: var(--navy); }
/* city pins (circle markers): navy, white ring; the chosen city turns green and grows */
.s09 .s09-pin { cursor: pointer; transition: fill .3s ease, r .3s ease; }
.s09 .s09-pin--active { filter: drop-shadow(0 2px 6px rgba(0, 191, 99, .45)); }
.s09 .s09-tip { font-size: 12px; font-weight: 600; color: var(--navy); border: 0; border-radius: 8px; box-shadow: 0 4px 14px rgba(35, 61, 111, .18); }
/* address pin (div icon): green drop with a white dot */
.s09 .s09-pin-addr { background: none; border: 0; }
.s09 .s09-pin-addr svg { display: block; width: 32px; height: 40px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
/* touch: the map only pans after a tap (so the page scroll is never trapped); the badge says so */
.s09 .s09-hint {
  position: absolute; left: 50%; bottom: 36px; z-index: 3; translate: -50% 0;
  display: none; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--navy);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(35, 61, 111, .25); pointer-events: none;
  transition: opacity .3s ease;
}
.s09 .s09-hint svg { width: 18px; height: 18px; }
.s09.s09--live.s09--touch .s09-hint { display: flex; }
.s09.s09--live.s09--touch .s09-mapbox.is-active .s09-hint { opacity: 0; }
.s09 .s09-mapbox:not(.is-active) .leaflet-container { touch-action: pan-x pan-y !important; }

/* ---------- card ---------- */
.s09 .s09-card {
  position: relative; z-index: 3;
  background: #fff; color: var(--navy);
  border-radius: calc(15 * var(--u));
  box-shadow: 0 calc(12 * var(--u)) calc(36 * var(--u)) rgba(35, 61, 111, .22);
  padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u));
}
.s09 .s09-tit { font-size: calc(34 * var(--u)); font-weight: 400; line-height: 1.1; color: var(--navy); }
.s09 .s09-tit b { font-weight: 700; }
.s09 .s09-sub { margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.45; color: #5b6478; }
.s09 .s09-form { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(22 * var(--u)); }
.s09 .s09-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(96 * var(--u)); gap: calc(12 * var(--u)); }
.s09 .s09-field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.s09 .s09-lbl { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.s09 .s09-selwrap { position: relative; display: block; }
.s09 .s09-city, .s09 .s09-rua, .s09 .s09-num {
  width: 100%; height: calc(46 * var(--u)); padding: 0 calc(14 * var(--u));
  border: calc(1 * var(--u)) solid #c9d0dc; border-radius: calc(10 * var(--u));
  background: #fff; color: var(--navy); font: inherit; font-size: calc(15 * var(--u));
  -webkit-appearance: none; appearance: none;
}
.s09 .s09-city { padding-right: calc(36 * var(--u)); cursor: pointer; }
.s09 .s09-chev { position: absolute; right: calc(14 * var(--u)); top: 50%; width: calc(12 * var(--u)); height: calc(8 * var(--u)); translate: 0 -50%; color: var(--navy); pointer-events: none; }
.s09 .s09-rua::placeholder, .s09 .s09-num::placeholder { color: #9aa3b5; }
.s09 .s09-city:focus-visible, .s09 .s09-rua:focus-visible, .s09 .s09-num:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--green); }
.s09 .s09-cta { display: flex; width: 100%; max-width: none; margin-top: calc(4 * var(--u)); }
.s09 .s09-cta:disabled { opacity: .7; cursor: wait; }
.s09 .s09-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.s09 .s09-result { display: none; font-size: calc(14 * var(--u)); line-height: 1.45; color: var(--navy); }
.s09 .s09-result.is-on { display: block; }
.s09 .s09-result.is-ok::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%; background: var(--green); vertical-align: 0.05em; }
/* rodada 13: botão secundário no mesmo desenho (branco, borda clara, caixa alta), ícone do WhatsApp mantido */
.s09 .s09-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 18px;
  border: 1px solid #b3c6d8; border-radius: 6px; background: #fff;
  color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.s09 .s09-wa[hidden] { display: none; }
.s09 .s09-wa svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.s09 .s09-wa:hover, .s09 .s09-wa:focus-visible { background: #e9f1f8; border-color: #8aa9c4; }
.s09 .s09-wa:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- desktop: full-bleed band, card over its left side ---------- */
@media (min-width: 901px) {
  /* rodada 19: nunca menos de 30 px de branco antes do mapa (em 1024 os 28 px de design seriam 21 px: a borda do mapa entraria na faixa de ±24 px da varredura de emendas) */
  .s09 .s09-mapbox { position: absolute; left: 0; top: max(calc(28 * var(--u)), 30px); width: 100%; height: calc(993 * var(--u)); border-radius: 0; }
  .s09 .s09-card { position: absolute; left: calc(103 * var(--u)); top: calc(98 * var(--u)); width: calc(400 * var(--u)); }
  /* the band ends in white (seam with 10): a fade over the map, above the tiles, below nothing clickable.
     Rodada 18: 110 px, branco liso nos últimos 30 (era 70 px linear: em 1024 os traços do mapa ainda apareciam na linha da emenda) */
  .s09 .s09-mapbox::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(110 * var(--u)); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 72%); pointer-events: none; }
}

/* ---------- mobile: card, then the map ---------- */
@media (max-width: 900px) {
  .s09 .a { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }
  /* card first, map below: the section flows as a column and the band takes the second slot */
  .s09 { display: flex; flex-direction: column; }
  .s09 .s09-wrap { order: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 28px; padding-bottom: 20px; } /* rodada 18: 28 em cima (era 56 do .m-wrap): o cartão vem logo depois da névoa do 07 */
  .s09 .s09-mapbox { order: 2; }
  .s09 .s09-card { padding: 24px 20px 22px; border-radius: 15px; box-shadow: 0 8px 24px rgba(35, 61, 111, 0.15); }
  .s09 .s09-tit { font-size: 28px; }
  .s09 .s09-sub { font-size: 14px; }
  .s09 .s09-form { gap: 12px; margin-top: 18px; }
  .s09 .s09-row { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
  .s09 .s09-city, .s09 .s09-rua, .s09 .s09-num { height: 46px; font-size: 16px; } /* 16 px: iOS does not zoom the page on focus */
  .s09 .s09-cta { max-width: none; }
  .s09 .s09-wa { min-height: 48px; }
  /* the band: a rounded 320 px window inside the shared wrap (max 560), below the card */
  .s09 .s09-mapbox { flex: none; height: 320px; width: calc(100% - 40px); max-width: 520px; margin: 0 auto 56px; border-radius: 15px; box-shadow: 0 8px 24px rgba(35, 61, 111, 0.15); }
}
@media (max-width: 374px) {
  .s09 .s09-card { padding: 22px 16px 20px; }
  .s09 .s09-row { grid-template-columns: minmax(0, 1fr) 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .s09 .s09-map, .s09 .s09-mapa, .s09 .s09-linhas, .s09 .s09-pin, .s09 .s09-hint, .s09 .s09-wa { transition: none; }
}

/* Rodada 14: com JS, a imagem estática da região não aparece antes do mapa real (só volta se o Leaflet falhar: .s09--static);
   até os blocos do mapa chegarem fica o fundo neutro com um brilho suave de carregamento */
.s09.s09--js:not(.s09--static) .s09-mapa, .s09.s09--js:not(.s09--static) .s09-linhas { opacity: 0; visibility: hidden; transition: none; }
.s09.s09--js:not(.s09--live):not(.s09--static) .s09-mapbox { background: linear-gradient(100deg, #e9ecf1 30%, #f4f6f9 50%, #e9ecf1 70%) 0 0 / 300% 100%; animation: s09-carrega 1.6s ease-in-out infinite; }
@keyframes s09-carrega { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .s09.s09--js .s09-mapbox { animation: none; } }

/* Rodada 22: as três respostas da cobertura (mesma regra da landing residencial). O título da resposta em negrito com o
   ícone, a nota abaixo; "Escolha seu plano" (verde, rola até os planos) ou o botão do WhatsApp (consultor / simular pedido). */
.s09 .s09-outra[hidden], .s09 .s09-go[hidden] { display: none; }
.s09 .s09-result.is-on { display: flex; flex-direction: column; gap: 6px; padding-top: calc(14 * var(--u)); border-top: 1px solid #e3e8f0; }
.s09 .s09-result strong { display: flex; align-items: center; gap: 10px; font-size: calc(16 * var(--u)); font-weight: 800; line-height: 1.3; color: var(--navy); }
.s09 .s09-result strong::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #233d6f; }
.s09 .s09-result.is-atende strong::before { background: var(--green); box-shadow: 0 0 0 4px rgba(0, 191, 99, .18); }
.s09 .s09-result .s09-note { font-size: calc(14 * var(--u)); line-height: 1.45; color: #5b6478; }
.s09 .s09-result.is-aviso { border-top: 0; padding-top: 0; }
.s09 .s09-go { display: flex; width: 100%; max-width: none; }
@media (max-width: 900px) { .s09 .s09-result strong { font-size: 16px; } .s09 .s09-result .s09-note { font-size: 14px; } }

/* rodada 44: o mapa nasce em degradê a partir do branco que vem do "Seu negócio" (antes começava com uma borda reta);
   os botões + e − do mapa descem para fora do degradê */
@media (min-width: 901px) {
  .s09 .s09-mapbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: calc(120 * var(--u)); background: linear-gradient(180deg, #fff 8%, rgba(255, 255, 255, 0)); pointer-events: none; }
  .s09 .s09-map .leaflet-top { top: calc(96 * var(--u)); }
}

/* ===== 10 depoimentos ===== */
/* 10 depoimentos: "Quem usa Recomenda!" + four phone mockups on the white/navy wave.
   The phones run off both page edges on purpose: they are a belt that slides left in a seamless
   loop (the script clones the set once; the CSS animation moves the row by half its width in 45 s).
   Pauses on hover (pointer devices), while a finger holds it (.is-held) and off screen (.is-off).
   Reduced motion: no animation, the four phones stay where the approved layout puts them. */
/* white on top, navy in the last tenth (always under the navy shape): the bottom edge stays solid navy
   at any page width, so no light hairline can show at the seam with the FAQ */
.s10 {
  background: linear-gradient(#fff 90%, var(--navy) 90%);
  /* one phone unit: the device is drawn on the 206.3 x 408.2 grid of the Canva frame,
     365.16 design px wide, so 1 unit = 1.77 design px */
  --k: calc(1.77 * var(--u));
  --s10-aspas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'%3E%3Cpath d='M0 34V19C0 8 6 1.6 18 0v7.4c-5.4 1.2-8.3 4.4-8.8 9.6H18v17zM26 34V19C26 8 32 1.6 44 0v7.4c-5.4 1.2-8.3 4.4-8.8 9.6H44v17z'/%3E%3C/svg%3E");
}
.s10 .s10-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s10 .s10-onda2 > img { transform: scaleY(-1); }
/* rodada 13: a textura do alto entra em fade a partir do branco com que o 09 termina (desktop; o celular já faz isso) */
@media (min-width: 901px) {
  .s10 .s10-onda1 { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(120 * var(--u))); mask-image: linear-gradient(180deg, transparent 0, #000 calc(120 * var(--u))); }
}
.s10 .s10-azul { color: var(--navy); }
.s10 .s10-tit { color: var(--navy); text-align: center; z-index: 1; }
/* the phone row: a window over the section (overflow hidden) with the belt inside */
.s10 .s10-lista { position: absolute; inset: 0; overflow: hidden; }
/* the belt: the first phone at x -146.69 / y 479.95 of the Canva layout, 434 px steps (76.63 of
   air after each 357.37 px phone), every second phone 69.59 px lower */
.s10 .s10-belt {
  position: absolute; left: calc(-146.69 * var(--u)); top: calc(479.95 * var(--u));
  display: flex; align-items: flex-start; width: max-content;
}
.s10 .s10-ph:nth-child(even) { margin-top: calc(69.59 * var(--u)); }
/* the loop (only once the script has cloned the set, so the row is exactly two sets wide) */
.s10 .s10-belt.is-loop { animation: s10-belt 45s linear infinite; will-change: transform; }
.s10 .s10-belt.is-held { animation-play-state: paused; }
.s10 .s10-belt.is-off { animation-play-state: paused; will-change: auto; }
@media (hover: hover) {
  .s10 .s10-belt.is-loop:hover { animation-play-state: paused; }
}
@keyframes s10-belt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .s10 .s10-belt.is-loop { animation: none; will-change: auto; }
}

/* ---------- Phone: drawn in CSS with the measures of the Canva frame (body 201.9 units wide,
   2-unit rim, radius 29.9, screen inset 12.3 with radius 16.5, notch 101.2 x 13.8), so its height
   can follow the text on small screens. Four identical phones, equal 434 px steps, symmetric about
   the page centre. The figure box is the body; the side buttons stick out 2.2 units. ---------- */
.s10 .s10-ph {
  position: relative; flex: none;
  width: calc(357.37 * var(--u)); height: calc(722.54 * var(--u));
  margin: 0 calc(76.63 * var(--u)) 0 0;
  display: flex; flex-direction: column; justify-content: center;
  /* bezel (+ notch on top) + the inner margin of the screen */
  padding:
    calc(24.1 * var(--k) + 14 * var(--u))
    calc(10.3 * var(--k) + 22 * var(--u))
    calc(9.9 * var(--k) + 20 * var(--u));
  border: calc(2 * var(--k)) solid #6b7384;
  border-radius: calc(29.9 * var(--k));
  background: var(--ink);
  color: var(--navy);
}
/* the screen: white with two pale rings on the free (right) side, as in the original cards */
.s10 .s10-ph::before {
  content: ""; position: absolute;
  inset: calc(10.3 * var(--k)) calc(10.3 * var(--k)) calc(9.9 * var(--k));
  border-radius: calc(16.5 * var(--k));
  background:
    radial-gradient(circle at 100% 0, transparent calc(44 * var(--k)), #f3f4f7 calc(44.4 * var(--k)), #f3f4f7 calc(76 * var(--k)), transparent calc(76.4 * var(--k))),
    radial-gradient(circle at 100% 100%, transparent calc(44 * var(--k)), #f3f4f7 calc(44.4 * var(--k)), #f3f4f7 calc(76 * var(--k)), transparent calc(76.4 * var(--k))),
    #fff;
}
/* the notch */
.s10 .s10-ph::after {
  content: ""; position: absolute;
  top: calc(10.3 * var(--k) - 1px); left: 50%;
  width: calc(101.2 * var(--k)); height: calc(13.8 * var(--k) + 1px);
  margin-left: calc(-50.6 * var(--k));
  border-radius: 0 0 calc(9.3 * var(--k)) calc(9.3 * var(--k));
  background: var(--ink);
}
/* hardware details: the four side buttons (painted as strips beside the body), speaker and camera */
.s10 .s10-hw {
  position: absolute; z-index: 2;
  top: calc(-2 * var(--k)); left: calc(-4.2 * var(--k)); right: calc(-4.2 * var(--k));
  height: calc(152 * var(--k));
  background:
    linear-gradient(var(--ink), var(--ink)) 0 calc(54 * var(--k)) / calc(2.4 * var(--k)) calc(16.8 * var(--k)),
    linear-gradient(var(--ink), var(--ink)) 0 calc(83.3 * var(--k)) / calc(2.4 * var(--k)) calc(30.3 * var(--k)),
    linear-gradient(var(--ink), var(--ink)) 0 calc(120.2 * var(--k)) / calc(2.4 * var(--k)) calc(30.4 * var(--k)),
    linear-gradient(var(--ink), var(--ink)) 100% calc(93.3 * var(--k)) / calc(2.4 * var(--k)) calc(48.7 * var(--k));
  background-repeat: no-repeat;
  pointer-events: none;
}
.s10 .s10-hw::before, .s10 .s10-hw::after { content: ""; position: absolute; background: #6b7384; border-radius: 999px; }
.s10 .s10-hw::before { left: 50%; top: calc(15.6 * var(--k)); width: calc(27.4 * var(--k)); height: calc(3.4 * var(--k)); margin-left: calc(-14.85 * var(--k)); }
.s10 .s10-hw::after { left: 50%; top: calc(14.8 * var(--k)); width: calc(5 * var(--k)); height: calc(5 * var(--k)); margin-left: calc(21.25 * var(--k)); }

/* ---------- The testimonial on the screen: one style for the four (stars, quote, author) ---------- */
.s10 .s10-nota, .s10 .s10-q, .s10 .s10-cap { position: relative; z-index: 1; }
/* rating stars keep the gold of the original cards */
.s10 .s10-stars { width: calc(98.6 * var(--u)); height: calc(17 * var(--u)); fill: #fdb105; }
/* 13 design px: the largest size at which the longest quote (Band Paulista e Nativa FM) still fits
   the screen, so the four are set alike */
.s10 .s10-q {
  margin-top: calc(42 * var(--u));
  font-size: calc(13 * var(--u)); line-height: 1.4;
}
/* the pale quotation mark between the stars and the text (a drawn shape, tinted with the mist token) */
.s10 .s10-q::before {
  content: ""; position: absolute; z-index: -1;
  left: 0; top: calc(-30 * var(--u));
  width: calc(30 * var(--u)); height: calc(22 * var(--u));
  background: var(--mist);
  -webkit-mask: var(--s10-aspas) center / 100% 100% no-repeat;
  mask: var(--s10-aspas) center / 100% 100% no-repeat;
}
.s10 .s10-q p + p { margin-top: calc(7 * var(--u)); }
.s10 .s10-cap {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  margin-top: calc(14 * var(--u)); padding-top: calc(14 * var(--u));
}
.s10 .s10-cap::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: calc(40 * var(--u)); height: calc(2 * var(--u)); border-radius: 999px;
  background: #d7dbe3;
}
.s10 .s10-avs { display: flex; flex: none; }
.s10 .s10-av { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; }
.s10 .s10-av + .s10-av { margin-left: calc(-8 * var(--u)); box-shadow: 0 0 0 calc(2 * var(--u)) #fff; }
.s10 .s10-who { min-width: 0; font-size: calc(14 * var(--u)); line-height: 1.25; }
.s10 .s10-who strong { display: block; font-weight: 700; text-wrap: balance; }
.s10 .s10-since { display: block; margin-top: calc(2 * var(--u)); font-size: calc(13 * var(--u)); color: #6b7384; }

/* ---------- Mobile: the desktop idea, stacked. Title, then the same belt of phones sliding
   inside the section (hold a finger on it to pause); the page never scrolls sideways. ---------- */
@media (max-width: 900px) {
  .s10 .a { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }
  /* the wave texture fades in from white (section 09 ends in plain white) and back out before the phones */
  .s10 .s10-onda1 {
    position: absolute; left: 0; top: 0; width: 100%; height: 360px;
    -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 55%, transparent);
    mask-image: linear-gradient(transparent, #000 25%, #000 55%, transparent);
  }
  .s10 .s10-onda1 > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  /* the navy wave, stretched to the section (a few px wider so its left edge never shows white) */
  .s10 .s10-azul { position: absolute; left: -8px; top: 0; width: calc(100% + 8px); height: 100%; }
  .s10 .s10-head { position: relative; z-index: 1; padding-bottom: 16px; }
  /* the phones: as wide as the screen allows, the next one always peeking in (1.04 phones visible
     at 390, about 2.1 at 768). The quotes are real text at 13 px (the mobile floor), so every phone
     is as tall as the longest quote needs and never shorter than the real device proportion. The
     bottom padding is the shared 56 px rhythm (kept inside the scroller so no shadow is clipped). */
  .s10 .s10-lista {
    --pw: min(340px, 100vw - 48px);
    --k: calc(var(--pw) / 201.9);
    position: relative; inset: auto; z-index: 1;
    overflow: hidden;
    padding: 16px 0 56px;
  }
  .s10 .s10-belt { position: relative; left: 0; top: 0; align-items: stretch; }
  .s10 .s10-ph {
    flex: 0 0 var(--pw);
    width: var(--pw); height: auto; min-height: calc(var(--pw) * 2.0218);
    margin: 0 16px 0 0;
    padding:
      calc(24.1 * var(--k) + 22px)
      calc(10.3 * var(--k) + clamp(14px, 4.6vw, 18px))
      calc(9.9 * var(--k) + 26px);
  }
  /* the desktop stagger: every second phone sits a little lower (all keep the same height) */
  .s10 .s10-ph:nth-child(odd) { margin-bottom: 32px; }
  .s10 .s10-ph:nth-child(even) { margin-top: 32px; }
}
/* mobile + reduced motion: the belt stands still, so it becomes a swipe row again (scroll-snap) */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .s10 .s10-lista {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    padding-left: 20px; padding-right: 20px;
    scrollbar-width: none;
  }
  .s10 .s10-lista::-webkit-scrollbar { display: none; }
  .s10 .s10-ph { scroll-snap-align: start; }
}

/* ===== 11 faq ===== */
/* 11 faq (rodada 13): no desenho da seção "Dúvidas" da landing residencial. Fundo azul sólido #2353a0, sem ondas nem
   formas; à esquerda a marca (logo AONET Empresas em branco, por filtro sobre s01-logo.webp, + "Aonet, responde!" +
   "Antes de escolher, entenda."), presa ao rolar no desktop; à direita a sanfona com as 15 perguntas (uma aberta por vez,
   altura animada) e um CTA. A marca entra suave quando aparece (.has-reveal/.is-in) e a logo dá um aceno ao abrir uma
   pergunta (.is-react). Emenda com o 10 (que termina em azul-marinho): degradê de 180 px no alto desta seção
   (--navy → #2353a0), e a seção sobrepõe 1 px a anterior. Movimento reduzido: tudo estático. Medidas em px (não no canvas). */
.s11 {
  --s11-blue: #2353a0; --s11-sky: #46bcf2;
  position: relative; height: auto; min-height: 0; overflow: clip; margin-top: -1px;
  padding: 236px 0 96px;
  color: #fff;
  background: linear-gradient(180deg, var(--navy) 0, #22488a 90px, var(--s11-blue) 180px, var(--s11-blue) 100%);
}
.s11 .s11-wrap {
  position: relative; width: min(1192px, 100% - 64px); margin: 0 auto;
  display: grid; grid-template-columns: minmax(240px, .75fr) 1.45fr; gap: 64px; align-items: start;
}
.s11 .s11-aside { position: sticky; top: calc(var(--aonet-lh-h, 120px) + 30px); }
.s11 .s11-brand { display: flex; flex-direction: column; align-items: flex-start; }
.s11 .s11-logo { display: block; width: min(100%, 236px); height: auto; margin: 0 0 26px; filter: brightness(0) invert(1); }
.s11 .s11-title { margin: 0 0 14px; max-width: none; font-size: clamp(34px, 3.1vw, 44px); font-weight: 800; line-height: 1.06; letter-spacing: -1.5px; color: #fff; }
.s11 .s11-lead { margin: 0; max-width: 300px; font-size: 22px; font-weight: 600; line-height: 1.3; color: #dbeefc; }
.s11 .s11-brand > * { transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); }
.s11 .s11-brand > .s11-title { transition-delay: .12s; }
.s11 .s11-brand > .s11-lead { transition-delay: .24s; }
.s11 .s11-brand.has-reveal:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
.s11 .s11-brand.is-react .s11-logo { animation: s11-logo-nod .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes s11-logo-nod { 0% { transform: none; } 35% { transform: translateY(-6px) scale(1.035); } 70% { transform: translateY(2px) scale(.995); } 100% { transform: none; } }

/* ---- sanfona ---- */
.s11 .s11-lista { display: grid; gap: 12px; min-width: 0; }
.s11 .s11-q {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: rgba(255, 255, 255, .04);
  transition: background-color .25s ease, border-color .25s ease;
}
.s11 .s11-q:hover, .s11 .s11-q.is-open { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .42); }
.s11 .s11-q__h { margin: 0; font: inherit; }
.s11 .s11-q__b {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; min-height: 72px; padding: 20px 22px;
  background: none; border: 0; border-radius: 14px; color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s11 .s11-q__b:focus-visible { outline: 2px solid var(--s11-sky); outline-offset: 3px; }
.s11 .s11-q__t { font: inherit; text-wrap: balance; font-variant-ligatures: none; }
/* o "+" num disco: vira "-" ao abrir (só transform/cor) */
.s11 .s11-q__i {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(70, 188, 242, .16); border: 1px solid rgba(70, 188, 242, .55);
  transition: background-color .25s ease, border-color .25s ease;
}
.s11 .s11-q__i::before, .s11 .s11-q__i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #8fd6ff; border-radius: 2px; transform: translate(-50%, -50%); }
.s11 .s11-q__i::before { width: 14px; height: 2px; }
.s11 .s11-q__i::after { width: 2px; height: 14px; transition: transform .35s ease; }
.s11 .s11-q.is-open .s11-q__i { background: var(--s11-sky); border-color: var(--s11-sky); }
.s11 .s11-q.is-open .s11-q__i::before, .s11 .s11-q.is-open .s11-q__i::after { background: var(--navy); }
.s11 .s11-q.is-open .s11-q__i::after { transform: translate(-50%, -50%) scaleY(0); }
/* resposta: linha de grade 0fr → 1fr (altura animada), invisível quando fechada */
.s11 .s11-q__p { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .4s; }
.s11 .s11-q.is-open .s11-q__p { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s, 0s; }
.s11 .s11-q__c { overflow: hidden; min-height: 0; }
.s11 .s11-q__a { margin: 0; padding: 0 74px 22px 22px; font-size: 15px; line-height: 1.75; color: #d2e4f4; max-width: 760px; text-align: left; font-variant-ligatures: none; }

/* CTA único ao pé da lista (o mesmo .cta compartilhado) */
.s11 .s11-cta { display: inline-flex; width: auto; margin: 36px 0 0; padding: 0 32px; }

@media (max-width: 1020px) { .s11 .s11-wrap { grid-template-columns: minmax(200px, .7fr) 1.5fr; gap: 40px; } }

/* Celular: tudo numa coluna, marca centrada acima das perguntas, degradê de emenda menor (140 px) */
@media (max-width: 900px) {
  .s11 { padding: 180px 0 64px; background: linear-gradient(180deg, var(--navy) 0, #22488a 70px, var(--s11-blue) 140px, var(--s11-blue) 100%); }
  .s11 .s11-wrap { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 28px; }
  .s11 .s11-aside { position: static; }
  .s11 .s11-brand { align-items: center; text-align: center; margin: 0 auto; }
  .s11 .s11-logo { width: min(62%, 200px); margin: 0 auto 18px; }
  .s11 .s11-title { font-size: clamp(28px, 8vw, 34px); letter-spacing: -1px; margin-bottom: 10px; }
  .s11 .s11-lead { font-size: 17px; max-width: none; }
  .s11 .s11-q__b { min-height: 64px; padding: 16px 16px; font-size: 15px; gap: 14px; }
  .s11 .s11-q__i { width: 30px; height: 30px; }
  .s11 .s11-q__a { padding: 0 18px 18px 16px; font-size: 14px; line-height: 1.7; }
  .s11 .s11-cta { display: flex; width: 100%; max-width: 360px; margin: 28px auto 0; }
}
@media (max-width: 374px) { .s11 .s11-wrap { width: calc(100% - 32px); } }

@media (prefers-reduced-motion: reduce) {
  .s11 .s11-q, .s11 .s11-q__i, .s11 .s11-q__i::after, .s11 .s11-q__p, .s11 .s11-brand > * { transition: none !important; }
  .s11 .s11-brand.has-reveal:not(.is-in) > * { opacity: 1; transform: none; }
  .s11 .s11-brand.is-react .s11-logo { animation: none !important; }
}

/* rodada 44: menos vão azul vazio entre os depoimentos e as dúvidas, e entre o botão e o rodapé (computador) */
@media (min-width: 901px) {
  .s11 { padding: 150px 0 48px; }
}

/* ===== 12 rodape ===== */
/* 12 rodape: footer. Blue dotted wave behind a white wave (clean texture, no baked text or lines),
   with the header logo, four link columns and the copyright line as real HTML on top.
   Motion phase: real links (external ones in a new tab), "Nossas Unidades" in two sub-columns,
   Bauru opens a small native <dialog> with its three stores, columns rise in once when in view. */
/* rodada 13: sem as ondas de imagem; o alto do rodapé é um degradê longo do azul das dúvidas (#2353a0) até a cor do rodapé
   (#f3f4f7), sem formas, e o rodapé sobrepõe 1 px a seção anterior (nenhum fio claro em telas de alta densidade) */
.s12 { margin-top: -1px; color: var(--navy); background: linear-gradient(180deg, #2353a0 0, #2353a0 calc(10 * var(--u)), #f3f4f7 calc(240 * var(--u)), #f3f4f7 100%); }
.s12 ul { list-style: none; }

.s12 .s12-logo img { width: 100%; height: 100%; }

/* four columns, each one opened by a thin divider; the last one is wider to hold two lists */
.s12 .s12-cols { display: grid; grid-template-columns: 195fr 195fr 195fr 335fr; }
.s12 .s12-col { border-left: max(1px, calc(1 * var(--u))) solid #d7dbe3; padding: calc(2 * var(--u)) 0 0 calc(24 * var(--u)); min-width: 0; }
.s12 .s12-h { font-size: calc(15 * var(--u)); font-weight: 700; line-height: 1.2; margin-bottom: calc(12 * var(--u)); }
.s12 .s12-col li { font-size: calc(14 * var(--u)); font-weight: 400; line-height: 1.2; white-space: nowrap; }
.s12 .s12-col li a,
.s12 .s12-col li .s12-pop { display: inline-block; padding: calc(5.6 * var(--u)) 0; }

/* the Bauru trigger is a button that reads exactly like the links around it */
.s12 .s12-pop {
  appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; line-height: inherit;
}
.s12 .s12-pop::after {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.45em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-0.25em) rotate(45deg);
  opacity: 0.7; transition: transform .25s ease, opacity .25s ease;
}
.s12 .s12-pop:hover::after, .s12 .s12-pop[aria-expanded="true"]::after { opacity: 1; transform: translateY(-0.1em) rotate(45deg); }

/* two sub-columns of units, same rhythm as the other columns */
.s12 .s12-units { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: calc(22 * var(--u)); }

.s12 .s12-cr { font-size: calc(13 * var(--u)); font-weight: 400; line-height: 1.4; color: #6b7384; text-align: center; }
.s12 .s12-cr a { font-weight: 700; color: var(--navy); }
.s12 .s12-nb { white-space: nowrap; }

.s12 a:hover, .s12 .s12-pop:hover { color: var(--navy-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.s12 .s12-logo:hover { text-decoration: none; }
.s12 a:focus-visible, .s12 button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

/* in-view reveal: the columns rise in one after the other (JS adds .is-in once) */
.js .s12 .s12-col { opacity: 0; transform: translateY(14px); will-change: opacity, transform; }
.js .s12.is-in .s12-col {
  opacity: 1; transform: none; will-change: auto;
  transition: opacity .6s ease calc(var(--i, 0) * 90ms), transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 90ms);
}

/* Bauru dialog: sized in px (top layer, independent of the canvas unit) */
.s12 .s12-dlg {
  position: fixed; inset: 0; margin: auto; border: 0; padding: 0; background: transparent;
  width: min(92vw, 400px); max-height: 90vh; overflow: visible; color: var(--navy);
}
.s12 .s12-dlg::backdrop { background: rgba(27, 47, 87, .45); animation: s12-fade .25s ease both; }
.s12 .s12-dlg[open] .s12-dlg__card { animation: s12-pop .32s cubic-bezier(.16, 1, .3, 1) both; }
.s12 .s12-dlg__card {
  position: relative; background: #fff; border-radius: 16px; padding: 26px 28px 20px;
  box-shadow: 0 24px 60px rgba(27, 47, 87, .28);
}
.s12 .s12-dlg__x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center;
  appearance: none; border: 1px solid #b3c6d8; border-radius: 6px; background: #fff; color: var(--navy); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.s12 .s12-dlg__x:hover { background: #e9f1f8; border-color: #8aa9c4; }
.s12 .s12-dlg__h { font-size: 18px; font-weight: 700; line-height: 1.2; padding-right: 36px; }
.s12 .s12-dlg__p { font-size: 13px; line-height: 1.4; color: #6b7384; margin: 6px 0 10px; }
/* rodada 13: as lojas são botões secundários no desenho da marca (brancos, borda clara, caixa alta, raio 6 px, sem setas) */
.s12 .s12-dlg__list { display: grid; gap: 8px; margin-top: 6px; }
.s12 .s12-dlg__list a {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 16px;
  border: 1px solid #b3c6d8; border-radius: 6px; background: #fff; color: var(--navy);
  font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; text-align: center;
  transition: background-color .18s ease, border-color .18s ease;
}
.s12 .s12-dlg__list a:hover, .s12 .s12-dlg__list a:focus-visible { text-decoration: none; color: var(--navy); background: #e9f1f8; border-color: #8aa9c4; }

@keyframes s12-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes s12-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .s12 .s12-col { opacity: 1; transform: none; transition: none; will-change: auto; }
  .s12 .s12-dlg::backdrop, .s12 .s12-dlg[open] .s12-dlg__card { animation: none; }
  .s12 .s12-pop::after, .s12 .s12-dlg__list a, .s12 .s12-dlg__x { transition: none; }
}

@media (max-width: 900px) {
  /* rodada 13: degradê de 180 px do azul das dúvidas até a cor do rodapé, depois o conteúdo */
  .s12 { background: linear-gradient(180deg, #2353a0 0, #2353a0 8px, #f3f4f7 180px, #f3f4f7 100%); padding-top: 170px; }

  .s12 .s12-in { position: relative; z-index: 1; padding-bottom: 28px; }
  .s12 .s12-in .a { position: static; width: auto; height: auto; transform: none; }

  .s12 .s12-in .s12-logo { display: block; width: 200px; margin: 0 auto 40px; }
  .s12 .s12-logo img { height: auto; }

  /* two content-aware columns: each track is at least as wide as its longest link when the space
     allows it, and the rest of the row is shared equally, so no link wraps on phones.
     The units column takes a full row and keeps its two lists side by side. */
  .s12 .s12-cols { grid-template-columns: auto auto; gap: 32px 12px; }
  .s12 .s12-col { border-left-width: 1px; padding: 0 0 0 12px; }
  .s12 .s12-col--units { grid-column: 1 / -1; }
  .s12 .s12-units { column-gap: 28px; }
  .s12 .s12-h { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
  .s12 .s12-col li { font-size: 14px; line-height: 1.35; }
  .s12 .s12-col li a, .s12 .s12-col li .s12-pop { padding: 7px 0; }

  .s12 .s12-cr {
    margin-top: 40px; padding-top: 20px; border-top: 1px solid #d7dbe3;
    font-size: 13px; line-height: 1.5;
  }
  .s12 .s12-dlg__card { padding: 22px 20px 16px; }
}
/* tablets: the units column fits beside "Contato", so the grid stays two by two */
@media (min-width: 560px) and (max-width: 900px) {
  .s12 .s12-col--units { grid-column: auto; }
}
/* narrow phones (360 to 379): links at the 13 px minimum so both columns still fit on one line each */
@media (min-width: 360px) and (max-width: 379px) {
  .s12 .s12-col li { font-size: 13px; }
}
/* below 360 the two columns no longer fit: single column, and the unit lists stack too */
@media (max-width: 359px) {
  .s12 .s12-cols { grid-template-columns: 1fr; }
  .s12 .s12-units { grid-template-columns: 1fr; }
}