/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-2.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-2.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-600-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-300.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-300-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-300-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-300-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-400-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-500-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-600-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-700-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ── Design tokens — one light theme (spec 2026-10-10). Every colour of
   the site lives here; tests/theme.test.mjs holds AA contrast and "no literal outside :root". ── */
:root {
  color-scheme: only light; /* "only" is the opt-out Chrome's Auto Dark Theme documents (Android origin trial, Chrome 96, 2021); plain "light" is not named as one */
  --bg:           #FFFFFF;
  --surface:      #F8F9FB;
  --border:       rgba(11,18,32,.09);
  --text:         #0B1220;
  --heading:      #1F3D5C;   /* titles: dark Aço, softer than --text (Marcelo, 2026-10-10: option E) */
  --muted:        #4D5B78;
  --accent:       #2B5C8A;
  --accent-hover: #234B71;
  --on-accent:    #FFFFFF;
  --danger:       #B42318;
  --card-bg:      var(--surface);
  --accent-tint:  color-mix(in srgb, var(--accent) 8%, transparent);  /* badges, icons, code: accent on it ≥5.77:1 (measured 2026-10-10) */
  --font:         'Plus Jakarta Sans', sans-serif;
  --mono:         'JetBrains Mono', monospace;
  /* Type: 7 sizes for the 45 that grew in layers (measured 2026-10-10). */
  --fs-xs:      .75rem;                       /* labels, eyebrows, badges (uppercase) */
  --fs-sm:      .875rem;                      /* meta, card text, nav links */
  --fs-base:    1rem;                         /* body */
  --fs-lg:      1.25rem;                      /* lead, card titles */
  --fs-xl:      clamp(1.5rem, 3vw, 2rem);     /* section titles (h2) */
  --fs-2xl:     clamp(2rem, 5vw, 3.25rem);    /* page titles (h1), stat numbers */
  --fs-display: clamp(4rem, 12vw, 8rem);      /* the hero wordmark only */
  /* Space: 4 px steps. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 96px;
  /* Radius: controls, cards, pills. */
  --r-sm: 6px; --r-md: 12px; --r-pill: 999px;
}
/* A card sits on the other surface: grey on white sections, white on grey ones. */
section.alt, .sol-section.alt, .filtro-section.alt, .cta-strip, .portal-promo, .site-footer { --card-bg: var(--bg); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}

img { display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { color: var(--heading); }
/* Only form fields had a focus style; on white the browser default is easy to miss. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Wordmark: one solid colour; the WIN|SERV split is weight (spec L4) ── */
.wordmark, .hero-wordmark { color: var(--accent); }
.wordmark { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.04em; text-decoration: none; line-height: 1; }
.wordmark .serv, .hero-wordmark .serv { font-weight: 400; }

/* ── Nav ── */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-7);
  height: 64px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-links {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }

.btn-nav {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-nav:hover { background: var(--accent); color: var(--on-accent); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  cursor: pointer;
  padding: var(--sp-1);
  background: none;
  border: none;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: var(--r-sm);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-6);
  z-index: 99;
  flex-direction: column;
  gap: 0;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: var(--fs-base);
  font-family: var(--font);
  border-radius: var(--r-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-secondary {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-base);
  font-family: var(--font);
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--accent-tint); }

/* ── Layout ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-6); }
section { padding: var(--sp-9) 0; }
section.alt { background: var(--surface); }

.section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.section-desc {
  color: var(--muted);
  max-width: 560px;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-7);
}

/* ── Page hero (secondary pages) ── */
.page-hero {
  padding: 9rem var(--sp-6) var(--sp-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero .section-label { margin-bottom: var(--sp-3); }
.page-hero h1 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.page-hero p { color: var(--muted); max-width: 520px; margin: 0 auto; font-size: var(--fs-base); }

/* ── CTA strip ── */
.cta-strip {
  padding: var(--sp-9) var(--sp-6);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.cta-strip .section-title { margin-bottom: var(--sp-3); }
.cta-strip p { color: var(--muted); max-width: 480px; margin: 0 auto var(--sp-6); }

/* ── Footer ── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-8) 0 var(--sp-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-7);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-brand p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 260px; }

.footer-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-wrap: wrap;
  gap: var(--sp-2);
}


/* ── Home — Hero ── */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  position: relative;
  overflow: hidden;
}
.hero-inner { position: relative; max-width: 720px; margin: 0 auto; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--accent-tint);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-7);
}

.hero-wordmark {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.hero-tagline {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-5);
}
.hero-sub {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto var(--sp-7);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Home — Service cards ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color 0.25s, transform 0.2s;
}
.service-card:hover { border-color: var(--accent); }

.service-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
}

.service-card h3 { font-size: var(--fs-base); font-weight: 700; }
.service-card p  { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; flex: 1; }
.service-link    { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }

/* ── Home — About ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: start;
}
.about-body { color: var(--muted); font-size: var(--fs-base); line-height: 1.85; margin-bottom: var(--sp-6); }

.about-stats {
  display: flex;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
}
.stat-num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

.about-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.about-item { display: flex; align-items: flex-start; gap: var(--sp-4); }
.about-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: var(--sp-2);
  flex-shrink: 0;
}
.about-item-title { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.about-item-desc  { font-size: var(--fs-sm); color: var(--muted); }

/* ── Home — Content grid ── */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.content-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.2s;
}
.content-card:hover { border-color: var(--accent); }
.content-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.content-card-body { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.content-card h3  { font-size: var(--fs-base); font-weight: 700; }
.content-card p   { font-size: var(--fs-sm); color: var(--muted); flex: 1; }
.content-card-link { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin-top: var(--sp-2); }

/* ── Solucoes — solution sections ── */
.sol-section { padding: var(--sp-9) 0; }
.sol-section.alt { background: var(--surface); }

.sol-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.sol-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--accent-tint);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.sol-content h2 {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--sp-5);
}
.sol-content p { color: var(--muted); font-size: var(--fs-base); line-height: 1.8; margin-bottom: var(--sp-4); }
.sol-content p b { color: var(--text); font-weight: 600; }

.sol-proposal {
  margin-top: var(--sp-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5);
}
.sol-proposal h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.sol-proposal ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.sol-proposal li { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.sol-proposal li::before, .tips-list li::before, .w-tier li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }

/* Never wider than the file (700 px; tests/images.test.mjs): the frame shrinks to the image,
   which fills the column only until it reaches its own width. */
.sol-img {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.sol-img img { max-width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }

/* ── Contato ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-9);
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-9);
}
.contact-info h1 {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
  line-height: 1.1;
}
.contact-info .lead { color: var(--muted); font-size: var(--fs-base); margin-bottom: var(--sp-7); }

.contact-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.contact-card-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.contact-card-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: var(--sp-1); }
.contact-card-val { font-size: var(--fs-sm); }
.contact-card-val a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.contact-card-val a:hover { color: var(--accent); }

.contact-form-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.contact-form-box h2 { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-2); }
.contact-form-box .form-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-6); }

.field-row { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.field { margin-bottom: var(--sp-4); }
.field.half { flex: 1; margin-bottom: 0; }
.field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.field input, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.55; }
.field textarea { resize: vertical; min-height: 115px; }

.form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.btn-submit {
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font);
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-submit:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-reset {
  padding: var(--sp-3) var(--sp-5);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  font-family: var(--font);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-reset:hover { color: var(--text); border-color: var(--accent); }

#form-status {
  display: none;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}
#form-status.ok  { background: var(--card-bg); border: 1px solid var(--border); color: var(--accent); }
#form-status.err { background: var(--card-bg); border: 1px solid var(--danger); color: var(--danger); }
a.btn-submit { display: inline-block; text-decoration: none; }
.contact-email { font-family: var(--mono); font-size: clamp(0.8rem, 3.6vw, 1.05rem); overflow-wrap: anywhere; }
.contact-email a { color: var(--accent); text-decoration: none; }
.contact-email a:hover { text-decoration: underline; }

/* ── Conteudo ── */
/* The hero's 64 plus the section's 80 left 144 px over the first category (measured 2026-10-13);
   the hero's 64 alone, as over an article's photo. */
.page-hero + section:has(.content-category) { padding-top: 0; }
.content-category { margin-bottom: var(--sp-8); }
.category-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* ── Article pages ── */
.article-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-9);
}
.article-quote {
  font-style: italic;
  color: var(--muted);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--accent);
  padding-left: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
  line-height: 1.7;
}
/* Around the photo the hero's 64, the section's top, the image's margin, the wrap's top and the
   title's top added up to 112 px on each side (measured 2026-10-13). Now the hero's 64 above and
   the image's 48 below — what filtro.html already had. */
section:has(.article-hero-img) { padding-top: 0; }
.article-hero-img + .article-wrap { padding-top: 0; }
.article-hero-img + .article-wrap > .article-h3:first-child { margin-top: 0; }
.article-hero-img {
  max-width: 820px;
  margin: 0 auto var(--sp-7);
  padding: 0 var(--sp-6);
}
.article-hero-img img {
  max-width: 100%;   /* not width: 100% — the column is 756 px and the photos 700 (tests/images.test.mjs) */
  margin-inline: auto;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.article-body { color: var(--muted); font-size: var(--fs-base); line-height: 1.85; }
.article-body p { margin-bottom: var(--sp-4); }
.article-body b { color: var(--text); font-weight: 600; }
.article-body u { text-decoration-color: var(--accent); }
.article-body ul { margin: var(--sp-3) 0 var(--sp-3) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.article-body li b { color: var(--text); }

.article-h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--heading);
  clear: both;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* ── Filtro — special sections ── */
.filtro-section { padding: var(--sp-8) 0; }
.filtro-section.alt { background: var(--surface); }
.tips-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.tips-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--muted);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.tips-list li:last-child { border-bottom: none; }
.tips-list a { color: var(--accent); text-decoration: none; }
.tips-list a:hover { text-decoration: underline; }

.dns-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5);
  margin: var(--sp-5) 0;
}
.dns-block h4 { font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-3); }
.dns-block p  { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.dns-nums {
  font-family: var(--mono, monospace);
  font-size: var(--fs-base);
  color: var(--accent);
  line-height: 1.9;
}

/* ── MS Partner credentials ── */
.ms-creds {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-5);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.ms-creds-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.ms-creds-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ms-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ms-badges span {
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ms-creds-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: var(--sp-2);
}
.ms-id {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ms-id a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  transition: color 0.2s;
}
.ms-id a:hover { color: var(--text); }

/* ── Portal Promo (index) ── */
.portal-promo {
  padding: var(--sp-10) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.portal-promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
  position: relative;
}
.portal-promo-lead {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.78;
  max-width: 460px;
  margin-bottom: var(--sp-5);
}
.portal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.portal-pills span {
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  letter-spacing: 0.05em;
}
.portal-actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.portal-mockup {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.mockup-title {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-left: var(--sp-2);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mockup-body {
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
}
.mockup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.mockup-row:last-child { border-bottom: none; }
.mockup-key { color: var(--muted); }
.mockup-val.c-text  { color: var(--text);  }
.mockup-sep { height: 1px; background: var(--border); margin: var(--sp-1) 0; }

/* Nav "novo" badge */
.nav-new {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: var(--sp-1) var(--sp-1);
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: var(--sp-1);
  line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .services-grid { grid-template-columns: 1fr; }
  .about-grid    { grid-template-columns: 1fr; gap: var(--sp-7); }
  .portal-promo-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .sol-inner     { grid-template-columns: 1fr; gap: var(--sp-6); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .field-row { flex-direction: column; }
  .field.half { margin-bottom: var(--sp-4); }
}
@media (max-width: 680px) {
  .about-stats { flex-direction: column; gap: var(--sp-5); }
}
/* The WiFi pages' nav carries six items and needs 1103–1133 px in one line (measured 2026-10-13,
   pt/en/es); between 961 and 1199 px they wrapped to two lines. Below 1200 it folds into the menu. */
@media (max-width: 1199px) {
  .topnav--wifi .nav-links { display: none; }
  .topnav--wifi .nav-burger { display: flex; }
  /* With the list gone, space-between centred the switcher and the button (seen at 1024 px). */
  .topnav--wifi .nav-right { margin-left: auto; margin-right: var(--sp-5); }
}
/* ── Classes that replaced inline style="" (spec 2026-10-08 §4). No !important since 2026-10-10:
   where another rule competes, the selector names it (.article-body, .page-hero) — computed styles
   compared before/after on every page that uses these classes. ── */
.hero-logo { height: 140px; margin-bottom: var(--sp-5); display: block; margin-left: auto; margin-right: auto; }
.page-top { padding-top: 64px; }
.article-h3--spaced { margin-top: var(--sp-7); }
.article-note, .article-body .article-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.container--narrow { max-width: 820px; }
.section-title--sm { font-size: var(--fs-xl); }
.filtro-text { color: var(--muted); font-size: var(--fs-base); line-height: 1.8; }
.filtro-text--spaced { margin-bottom: var(--sp-5); }
.text-strong { color: var(--text); }
/* Addresses written out as link text have no break point: at 360 px one scrolled the page (review 2026-10-10). */
.link-blue, .article-body a { overflow-wrap: anywhere; }
.link-blue { color: var(--accent); }
.filtro-h3 { font-size: var(--fs-base); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.page-hero--short { min-height: 40vh; }
.error-title { font-size: var(--fs-2xl); }
.error-text, .page-hero .error-text { max-width: 480px; margin: 0 auto; }
.error-actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* image-left layout for even sections — moved from a <style> block in solucoes.html's <head>
   (the only one on the site, missed by the 2026-10-08 inventory; caught by the visual diff). */
.sol-inner.img-left .sol-img { order: -1; }

/* A text-only page (privacidade): articles open their section with an image and get a 3rem
   top (section:has(.article-hero-img)); without one the full 5rem sat under the hero's 4rem. */
section.section--text { padding-top: var(--sp-4); }

/* Language switcher (spec sub-project 3 §4). .nav-mobile .nav-mobile-lang a outranks .nav-mobile a. */
.nav-right { display: flex; align-items: center; gap: var(--sp-5); }
.nav-lang { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; }
.nav-lang a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav-lang a:hover { color: var(--text); }
.nav-lang-current { color: var(--text); }
.nav-mobile-lang { display: flex; gap: var(--sp-5); padding-top: var(--sp-3); }
.nav-mobile .nav-mobile-lang a { border-bottom: none; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 960px) { .nav-lang { display: none; } }
section.section--text .article-body > h2:first-child { margin-top: 0; }

/* ═══ Winserv WiFi (sub-project 4, spec 2026-10-09 §11) ═══════════════════════════════════
   The product pages' components, ported from the WiFi landing and renamed w-*: the site
   already styles .hero and .hero-sub, and the landing's sheet styled section, h1, h2, a and
   code globally. Site tokens only. tests/wifi.test.mjs holds that every w- class has a rule. */
.w-main { max-width: 960px; margin: 0 auto; padding: 64px clamp(16px, 4vw, 28px) 0; }
.w-main section { padding: clamp(40px, 7vw, 72px) 0; border-bottom: 1px solid var(--border); }
.w-main h1 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; color: var(--heading); margin: var(--sp-3) 0 var(--sp-4); }
.w-main h2 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; color: var(--heading); margin-bottom: var(--sp-3); }
.w-main a:not([class]) { color: var(--accent); }
/* Long legal text: the site's reset leaves consecutive paragraphs flush (seen at 390 px, 2026-10-09). */
.w-main section p + p { margin-top: .8em; }
/* The site's nav is fixed at 64 px: an anchor opened from Microsoft's consent screen or an old
   bookmark landed under it on a phone (review 2026-10-09, measured at 390 px). */
.w-main [id] { scroll-margin-top: 80px; }
.w-links { max-width: 960px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 28px) 40px; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); }
.w-links a { color: var(--muted); text-decoration: none; }
.w-links a:hover { color: var(--accent); }
.w-main code { font-family: var(--mono); font-size: .9em; background: var(--accent-tint); border: 0; padding: .05em .35em; border-radius: var(--r-sm); overflow-wrap: anywhere; }
.w-eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.w-hero { padding-top: clamp(36px, 6vw, 64px); }
.w-hero h1:has(+ .w-hero-sub) { margin-bottom: var(--sp-2); }
.w-hero-sub { font-size: var(--fs-lg); font-weight: 600; color: var(--accent); margin-bottom: var(--sp-4); }
.w-hero .w-eyebrow:last-child { margin-top: var(--sp-5); color: var(--muted); font-weight: 400; }
/* Body size, as the home's text (Marcelo, 2026-10-13): at --fs-lg every WiFi paragraph read as a lead. */
.w-lede { font-size: var(--fs-base); color: var(--muted); max-width: 42rem; }
.w-nb { white-space: nowrap; }
.w-btn { display: inline-flex; align-items: center; gap: .5em; font: 600 var(--fs-base)/1.2 var(--font); background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); text-decoration: none; cursor: pointer; }
.w-btn:hover { background: var(--accent-hover); }
.w-btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.w-btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.w-btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.w-note { border-left: 3px solid var(--accent); background: var(--card-bg); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-base); color: var(--muted); max-width: 42rem; }
.w-note strong { color: var(--text); }
.w-tablewrap { overflow-x: auto; }
.w-ledger { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); font-size: var(--fs-base); }
.w-ledger th { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); }
/* At 390 px the three-column tables scrolled sideways (go-live 29); smaller type and hyphenation
   by the page language make the words fit — "anywhere" split words mid-syllable instead. */
.w-ledger th, .w-ledger td { overflow-wrap: break-word; hyphens: auto; }
.w-ledger td { padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
/* After the base rules, which have the same specificity (review 2026-10-10: before them it never applied). */
@media (max-width: 680px) { .w-ledger { font-size: var(--fs-sm); } .w-ledger th, .w-ledger td { padding: var(--sp-2); } }
.w-ledger td:first-child { color: var(--muted); }
.w-ledger td:last-child { font-weight: 600; }
.w-ledger tbody tr:nth-child(even) { background: var(--surface); }
.w-cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
@media (min-width: 680px) { .w-cards { grid-template-columns: repeat(3, 1fr); } }
.w-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.w-card .w-eyebrow { margin-bottom: var(--sp-2); }
.w-card p:last-child { color: var(--muted); }
.w-steps { margin: var(--sp-2) 0 0; padding-left: 1.3em; max-width: 46rem; }
.w-steps li { margin: var(--sp-3) 0; color: var(--muted); }
.w-steps strong { color: var(--text); }
.w-tiers { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); justify-content: center; }
@media (min-width: 680px) { .w-tiers { grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); } }
.w-tier { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.w-tier__price { font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-1); }
.w-tier__price strong { font-size: var(--fs-xl); letter-spacing: -.02em; color: var(--text); }
.w-tier__aud { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 var(--sp-4); }
.w-tier ul { list-style: none; padding: 0; margin: 0; }
.w-tier li { padding: var(--sp-2) 0 var(--sp-2) 1.6em; border-bottom: 1px solid var(--border); position: relative; }
.w-tier li:last-child { border-bottom: 0; }
.w-tier li::before { position: absolute; left: 0; }
/* #precios too: the landing's rule forgot the Spanish id (measured 2026-10-09). */
#planos .w-eyebrow, #pricing .w-eyebrow, #precios .w-eyebrow { margin-top: var(--sp-4); color: var(--muted); font-weight: 400; }
.w-faq { margin-top: var(--sp-2); border-top: 1px solid var(--border); }
.w-faq__item { border-bottom: 1px solid var(--border); }
.w-faq__item summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: 600; list-style: none; color: var(--text); }
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::before { content: '+'; color: var(--accent); font-weight: 700; margin-right: .6em; }
.w-faq__item[open] summary::before { content: '–'; }
.w-faq__item p { padding: 0 0 var(--sp-4); color: var(--muted); max-width: 46rem; }
/* Diagrams (src/components/WifiDiagram.astro, 2026-10-19). Sizes are viewBox units: the wide
   layout draws at ~1:1 in the 904 px column, the tall one at ~1:1 on a 360 px phone. Below 640 px
   the wide one would shrink its 14 px text to ~5 px, so the tall layout replaces it there. */
.w-dg { margin: var(--sp-5) 0 var(--sp-4); }
.w-dg__svg { display: block; width: 100%; height: auto; }
.w-dg__svg--tall { display: none; max-width: 440px; margin: 0 auto; }
@media (max-width: 640px) { .w-dg__svg--wide { display: none; } .w-dg__svg--tall { display: block; } }
.w-dg__cap { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); max-width: 42rem; }
.w-dg__zone { fill: var(--surface); stroke: color-mix(in srgb, var(--muted) 18%, transparent); }
.w-dg__zone--ours { fill: var(--accent-tint); stroke: color-mix(in srgb, var(--accent) 30%, transparent); }
.w-dg__zlabel { font-size: 13px; font-weight: 700; letter-spacing: .08em; fill: var(--muted); }
.w-dg__zlabel--ours { fill: var(--accent); }
.w-dg__box { fill: var(--bg); stroke: color-mix(in srgb, var(--muted) 35%, transparent); }
.w-dg__box--ours { fill: var(--accent); stroke: none; }
.w-dg__box--ok { fill: var(--accent-tint); stroke: var(--accent); }
.w-dg__box--cut { fill: color-mix(in srgb, var(--danger) 6%, var(--bg)); stroke: color-mix(in srgb, var(--danger) 45%, transparent); }
.w-dg__t { font-size: 14px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.w-dg__s { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.w-dg__t--on { fill: var(--on-accent); font-weight: 700; }
.w-dg__s--on { fill: var(--on-accent); }
.w-dg__svg--tall .w-dg__t { font-size: 13px; }
.w-dg__svg--tall .w-dg__s { font-size: 11px; }
.w-dg__edge { fill: none; stroke: var(--accent); stroke-width: 2; }
.w-dg__edge--local { stroke: var(--muted); stroke-dasharray: 4 4; }
.w-dg__edge--cut { stroke: var(--danger); stroke-dasharray: 5 4; }
.w-dg__edge--old { stroke: color-mix(in srgb, var(--muted) 55%, transparent); }
.w-dg__edge--oldlink { stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-dasharray: 4 4; }
.w-dg__head { fill: var(--accent); }
.w-dg__head--cut { fill: var(--danger); }
.w-dg__head--old { fill: color-mix(in srgb, var(--muted) 55%, transparent); }
.w-dg__lbl { font-size: 11px; font-weight: 600; fill: var(--accent); }
.w-dg__lbl--muted { font-weight: 400; fill: var(--muted); }
.w-dg__lbl--cut { fill: var(--danger); }
.w-dg__badge { fill: var(--heading); }
.w-dg__badge--cut { fill: var(--danger); }
.w-dg__num { font-size: 12px; font-weight: 700; fill: var(--on-accent); text-anchor: middle; }
.w-dg__note { font-size: 13px; font-weight: 600; fill: var(--accent); text-anchor: middle; }
.w-dg__note--bad { fill: var(--danger); }