/* ============================================================
   AGTU — Four Pillars Website  ·  shared design system
   Time-based light/dark themes · italic-accent headings · counters
   ============================================================ */

:root {
  /* Neutral palette — DARK (default / night) */
  --bg:            #060d1f;
  --bg-2:          #0a1530;
  --surface:       #0e1c3d;
  --surface-2:     #15264f;
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --text:          #f4f6fb;
  --muted:         #9aa6bf;
  --muted-2:       #6c7791;

  /* Accent — unified blue / navy-blue brand */
  --accent:        #3b82f6;
  --accent-bright: #60a5fa;             /* never overridden — used in dark heroes */
  --accent-glow:   rgba(59,130,246,.20);
  --accent-text:   #7db4ff;
  --accent-soft:   rgba(59, 130, 246, 0.15);
  --accent-line:   rgba(59, 130, 246, 0.42);
  --accent-ink:    #04122e;

  --radius:        18px;
  --radius-sm:     12px;
  --maxw:          1180px;
  --ease:          cubic-bezier(.22,.61,.36,1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ---------- Unified blue / navy accent (all pages, dark theme) ---------- */
[data-pillar="free"],
[data-pillar="scholarship"],
[data-pillar="accelerated"],
[data-pillar="transfer"] {
  --accent:#3b82f6; --accent-bright:#60a5fa; --accent-glow:rgba(59,130,246,.20);
  --accent-text:#7db4ff; --accent-soft:rgba(59,130,246,.15); --accent-line:rgba(59,130,246,.42); --accent-ink:#04122e;
}

/* ---------- LIGHT THEME (daytime) ---------- */
[data-theme="light"] {
  --bg:            #f6f8fc;
  --bg-2:          #eceff6;
  --surface:       #ffffff;
  --surface-2:     #f1f4fa;
  --line:          rgba(16, 22, 38, 0.10);
  --line-strong:   rgba(16, 22, 38, 0.20);
  --text:          #131a2b;
  --muted:         #515c72;
  --muted-2:       #818b9e;
}
[data-theme="light"][data-pillar="free"],
[data-theme="light"][data-pillar="scholarship"],
[data-theme="light"][data-pillar="accelerated"],
[data-theme="light"][data-pillar="transfer"] {
  --accent:#2563eb; --accent-bright:#2563eb; --accent-text:#1e417d; --accent-soft:rgba(37,99,235,.12); --accent-line:rgba(37,99,235,.36); --accent-ink:#ffffff;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  line-height: 1.6; font-size: 17px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background .4s ease, color .4s ease;
}
/* overflow-x:hidden faz do body um contexto de rolagem, e em navegador de
   celular isso desancora o position:fixed do cabeçalho: ele deixa de seguir a
   viewport e passa a rolar junto com a página. `clip` corta o transbordo
   horizontal do mesmo jeito sem criar o contexto — o hidden acima fica como
   reserva para quem ainda não conhece `clip`. */
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; position: relative; }
.section--tight { padding: 78px 0; }
.panel { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.center { text-align: center; }
.grid { display: grid; gap: 28px; }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent-line); }
.eyebrow.center-line { justify-content: center; }

h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
/* No title ends with a lone word on its own line: balance the lines. The
   longhand (text-wrap-style) keeps white-space:nowrap elements unbroken. */
h1, h2, h3, h4, .title, summary { text-wrap-style: balance; }
.h-display { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2.title { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.1; }
h3 { font-size: 1.3rem; line-height: 1.25; }
.accent-it { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--accent-text); letter-spacing: 0; }
.lead { color: var(--muted); font-size: 1.18rem; max-width: 62ch; }
.center .lead { margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.section-head { max-width: 780px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  padding: 10px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: transform .25s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -12px var(--accent-line); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.02rem; }

/* ---------- Header / Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
/* The brand must never be squeezed by flex: as a flex item it would shrink, and
   the logo's max-width:100% would then distort the wordmark (752x162). Pin both. */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.logo { height: 26px; width: auto; max-width: none; display: block; }
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }
/* Nav logo stays white while the header sits over the dark hero (light theme, before scroll) */
[data-theme="light"] .nav:not(.scrolled) .logo-dark { display: block; }
[data-theme="light"] .nav:not(.scrolled) .logo-light { display: none; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-size: .93rem; color: var(--muted); font-weight: 500; transition: color .2s; position: relative; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
/* The current section reads in the pillar's own blue — plain text, no
   underline, no pill: the clean-nav look asked for. Matched against
   [aria-current="page"], which is what the markup actually carries on
   every page; .active is kept alongside it only because one page already
   uses that class, so nothing regresses. */
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--accent-bright); font-weight: 600;
  /* .nav-links a declares transition: color .2s for the hover fade. That
     transition also intercepts the manual theme toggle: color: var(--x)
     going from one theme's resolved value to the other reads, to the
     transition engine, as the same declared value, and it can leave the
     link showing the previous theme's blue until a second interaction.
     There is no hover state to animate into on the current link anyway
     (:hover loses this cascade tie by source order), so the transition
     buys nothing here and only risks a stuck color on toggle. */
  transition: none;
}
/* Keep the other links white over the dark hero (any theme) and in dark
   theme — never the current section, which stays the accent blue in both
   cases. Same specificity as the two rules above, so it must come after
   them to still lose the cascade for the active link. */
.nav:not(.scrolled) .nav-links:not(.open) a,
[data-theme="dark"] .nav-links a { color: rgba(255,255,255,.9); }
.nav:not(.scrolled) .nav-links:not(.open) a:hover,
[data-theme="dark"] .nav-links a:hover { color: #fff; }
.nav:not(.scrolled) .nav-links:not(.open) a.active,
.nav:not(.scrolled) .nav-links:not(.open) a[aria-current="page"],
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .nav-links a[aria-current="page"] { color: var(--accent-bright); }
/* Floating over the hero photo, the blue can sit on glass and sky of a
   close-enough hue to read as flat — the white siblings don't have that
   problem because white contrasts with almost anything. A dark, close
   shadow gives the blue an edge against whatever is behind it, the same
   role the hero's own dark gradient plays for the white links. Scoped to
   the not-scrolled state only: once the header goes opaque, plain color
   is already legible and the request was to leave that alone. */
.nav:not(.scrolled) .nav-links:not(.open) a.active,
.nav:not(.scrolled) .nav-links:not(.open) a[aria-current="page"] {
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 1px 10px rgba(0,0,0,.4);
}
.nav-cta { display: flex; align-items: center; gap: 14px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; transition: border-color .25s var(--ease), color .25s, transform .25s; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
/* Keep the toggle white over the dark hero (before scroll), matching the nav links */
.nav:not(.scrolled) .theme-toggle { color: #fff; border-color: rgba(255,255,255,.5); }
.nav:not(.scrolled) .theme-toggle:hover { border-color: #fff; color: #fff; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero (always dark & dramatic) ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 150px 0 90px; overflow: hidden; background: #070b16; color: #eef1f8; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,22,.60) 0%, rgba(7,11,22,.80) 55%, #070b16 100%), radial-gradient(120% 90% at 80% 8%, var(--accent-glow), transparent 55%); }
.hero-grad-only { background: radial-gradient(90% 120% at 78% -10%, var(--accent-glow), transparent 55%), linear-gradient(180deg, #0b1120, #070b16); }
.hero-inner { position: relative; z-index: 1; max-width: 900px; }
.hero .eyebrow { color: var(--accent-bright); }
.hero .eyebrow::before { background: var(--accent-bright); opacity: .55; }
.hero h1 { margin: 6px 0 10px; color: #fff; }
.hero-tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--accent-bright); margin-bottom: 22px; line-height: 1.1; font-weight: 600; }
.hero .lead { font-size: 1.24rem; max-width: 58ch; color: #c7d0e4; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero-loc { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; color: #aab4cc; font-size: .92rem; }
.hero-loc .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-glow); }
.hero-loc b { color: #fff; font-weight: 600; }

/* ---------- Stat bar ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 46px 26px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: var(--font-display); font-style: italic; font-size: clamp(2.4rem, 4.5vw, 3.4rem); color: var(--accent-text); line-height: 1; }
.stat .label { margin-top: 12px; color: var(--muted); font-size: .9rem; letter-spacing: .02em; }

/* ---------- Accreditation strip ---------- */
.accred { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.accred .item { display: flex; gap: 18px; align-items: flex-start; padding: 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.accred .badge { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); }
.accred .badge svg { width: 26px; height: 26px; }
.accred h4 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.accred p { color: var(--muted); font-size: .96rem; }
.accred p b { color: var(--text); }

/* ---------- Cards ---------- */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
.card:hover { transform: translateY(-5px); border-color: var(--accent-line); }
[data-theme="light"] .card:hover { box-shadow: 0 18px 40px -24px rgba(16,22,38,.35); }
.card .ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 22px; }
.card .ico svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: .98rem; }
.card .knum { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--accent-text); margin-bottom: 14px; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 22px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.step .n { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 1.7rem; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .98rem; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-media { order: 2; }
/* In the scholarship pillar the price/country widget lives in this same
   section, as a third child of a two-column grid — auto-placement drops it
   into the left track alone, with the right side sitting empty beside it.
   It reads better as its own full-width row under the pair above than
   squeezed into half the grid it was never meant to share. Targeted by
   :last-child, not the card's own class: one page wraps the card in an
   extra .cost-grid div, so the direct child of .split isn't always the
   card itself — but it's always the last of the three either way.

   :nth-child(3) junto do :last-child é o que amarra a regra ao caso para o
   qual ela foi escrita. Sem ele, numa seção com DOIS filhos — o texto e o
   formulário, que é o arranjo do Free e do Accelerated — o :last-child caía
   sobre o formulário, jogava ele para a largura inteira e empurrava para a
   linha de baixo, deixando metade da grade vazia ao lado do texto. */
#how .split > :last-child:nth-child(3) { grid-column: 1 / -1; margin-top: 20px; }
.split-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split-list { display: grid; gap: 14px; margin-top: 28px; }
.split-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--muted); }
.split-list .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; background: var(--accent-soft); color: var(--accent-text); }
.split-list .ck svg { width: 13px; height: 13px; }
.split-list b { color: var(--text); font-weight: 600; }

/* ---------- Data table ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 640px; }
table.data th, table.data td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
table.data thead th { background: var(--bg-2); color: var(--muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .tier { font-weight: 700; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--accent-line); color: var(--accent-text); background: var(--accent-soft); }
.pill.free { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.chip { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.chip::before { content:""; width:10px; height:10px; border-radius:50%; }
.chip.platinum::before { background:#cbd2e0; }
.chip.gold::before { background:#e3b84c; }
.chip.silver::before { background:#9aa4b6; }
.chip.bronze::before { background:#c08457; }
.chip.access::before { background:#6c7791; }
.chip.standard::before { background:#404a63; }

/* ---------- Audience cards (credit transfer) ---------- */
.aud-grid { grid-template-columns: repeat(3, 1fr); }
.aud { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; transition: transform .3s var(--ease), border-color .3s; }
.aud:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.aud .ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 20px; }
.aud .ico svg { width: 24px; height: 24px; }
.aud h3 { margin-bottom: 10px; font-size: 1.18rem; }
.aud p { color: var(--muted); font-size: .96rem; }

/* ---------- The Future of Education (articles) ---------- */
.articles { grid-template-columns: repeat(3, 1fr); }
.article {
  display: flex; flex-direction: column; gap: 12px; padding: 30px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s; min-height: 220px;
}
.article:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.article .src { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }
.article h3 { font-size: 1.12rem; line-height: 1.3; }
.article p { color: var(--muted); font-size: .92rem; flex: 1; }
.article .read { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 600; font-size: .9rem; }
.article .read svg { width: 15px; height: 15px; transition: transform .25s; }
.article:hover .read svg { transform: translateX(4px); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .25s; }
.faq details[open] { border-color: var(--accent-line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 24px; height: 24px; position: relative; transition: transform .3s var(--ease); color: var(--accent-text); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq summary .plus::before { left: 0; right: 0; top: 11px; height: 2px; }
.faq summary .plus::after { top: 0; bottom: 0; left: 11px; width: 2px; transition: transform .3s var(--ease); }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq .faq-body { padding: 0 26px 24px; color: var(--muted); font-size: 1rem; }
.faq .faq-body p + p { margin-top: 12px; }

/* ---------- Programs list ---------- */
.prog-group { margin-bottom: 44px; }
.prog-group h3 { margin-bottom: 20px; color: var(--text); }
.prog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prog-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: .97rem; transition: transform .25s var(--ease), border-color .25s, color .25s; }
.prog-list a:hover { transform: translateY(-3px); border-color: var(--accent-line); color: var(--accent-text); }
.prog-list a svg { width: 16px; height: 16px; flex: none; opacity: .6; }

/* ---------- Partner logos ---------- */
.partner-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 48px; }
.partner-logos .chip-logo { background: #ffffff; border-radius: 12px; padding: 16px 22px; display: grid; place-items: center; min-width: 120px; height: 72px; box-shadow: 0 6px 20px -14px rgba(0,0,0,.5); }
.partner-logos img { height: 30px; width: auto; max-width: 130px; object-fit: contain; }

/* ---------- Pillars cross-nav ---------- */
.pillars-grid { grid-template-columns: repeat(2, 1fr); }
.pillar-card { display: block; padding: 34px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .3s var(--ease), border-color .3s, background .3s; position: relative; overflow: hidden; }
.pillar-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .6; }
.pillar-card:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.pillar-card .pnum { font-family: var(--font-display); font-style: italic; color: var(--muted-2); font-size: 1.05rem; }
.pillar-card h3 { margin: 6px 0 10px; }
.pillar-card p { color: var(--muted); font-size: .97rem; }
.pillar-card .go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-weight: 600; font-size: .92rem; }
.pillar-card .go svg { width: 16px; height: 16px; transition: transform .25s; }
.pillar-card:hover .go svg { transform: translateX(4px); }
.pillar-card[aria-current="page"] { background: var(--surface-2); border-color: var(--accent-line); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius); padding: 72px 56px; background: linear-gradient(120deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); text-align: center; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 50% -20%, var(--accent-soft), transparent 60%); pointer-events:none; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Merged contact (photo + copy) ---------- */
.contact-merge { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; background: linear-gradient(120deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); padding: 48px; }
.contact-photo { margin: 0; text-align: center; }
.contact-photo-frame { position: relative; width: 100%; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; }
.contact-photo-ph { width: 46%; height: 46%; color: var(--muted-2); opacity: .6; }
.contact-photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-person { margin-top: 16px; }
.contact-name { display: block; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.contact-role { display: block; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.contact-copy .hero-actions { justify-content: flex-start; }
@media (max-width: 860px) {
  .contact-merge { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; text-align: center; }
  .contact-photo-frame { max-width: 280px; margin: 0 auto; }
  .contact-copy .hero-actions { justify-content: center; }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 70px 0 36px; }
/* Cinco filhos — a coluna da marca e quatro listas — então cinco trilhas. Com
   as quatro anteriores o "Contact Us" transbordava para uma segunda linha,
   debaixo do brasão: a coluna da esquerda ficava com o dobro da altura das
   outras e a metade direita do rodapé terminava vazia. A trilha da marca é a
   mais larga porque carrega o brasão e dois parágrafos; a de contato vem em
   seguida, por causa dos telefones e do endereço, que não quebram bem. */
.footer-grid { display: grid; grid-template-columns: 1.55fr repeat(3, minmax(0, 1fr)) 1.15fr; gap: 34px 30px; align-items: start; }
.footer h5 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.footer ul li { margin-bottom: 11px; }
.footer ul a, .footer .about p, .footer address { color: var(--muted); font-size: .95rem; font-style: normal; line-height: 1.7; }
.footer ul a { transition: color .2s; }
.footer ul a:hover { color: var(--accent-text); }
.footer .about .logo { margin-bottom: 16px; }
/* O brasão cresceu 25% (180 → 225px) e recuou de intensidade: numa coluna que
   segue com a missão e o texto de licença logo abaixo, ele estava competindo
   com o que precisa ser lido. A opacidade o devolve ao papel de marca, e o
   respiro maior tira o texto de debaixo dele. */
.footer .about .footer-shield { height: 225px; width: auto; display: block; margin-bottom: 26px; opacity: .95; }
.footer .about p { max-width: 36ch; }
.footer .lic { color: var(--muted-2); font-size: .82rem; margin-top: 14px; }

/* --- redes sociais: alvo de toque de verdade, e a marca só no hover ---------
   Eram glifos soltos, sem área clicável definida e sem estado. Viram botões
   com moldura e 42px de lado. O azul da marca é reservado ao LinkedIn via
   data-net; quem não declara a rede fica no acento do site, para as páginas
   que ainda listam outras redes não herdarem a cor errada. */
.footer-social { display: flex; align-items: center; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  border: 1px solid var(--line-strong);
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease), transform .25s var(--ease);
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.footer-social a[data-net="linkedin"]:hover { background: #0a66c2; border-color: #0a66c2; }
.footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer-social svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) { .footer-social a:hover { transform: none; } }
.footer-bottom { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--muted-2); font-size: .86rem; }
.footer-tm { text-align: center; color: var(--muted-2); font-size: .82rem; margin-top: 18px; }

/* ---------- Reveal ---------- */
/* Progressive enhancement: the hide-then-fade-in only applies when JS is running
   (html.js is set by agtu.js). With no JS, content is visible by default so it can
   never get stuck blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .nav-links { gap: 18px; }
  /* Collapse to the hamburger here, not at 940px: with the brand pinned at its
     true width the full nav needs ~992px, so 940 left a band where it overflowed. */
  .nav-links { display: none; }
  /* The action stays in the bar below the breakpoint — it is the only thing in
     the header worth a tap, now that language and theme moved into the menu.
     Compact, so it never crowds the brand or the hamburger. */
  .nav-cta .btn { display: inline-flex; padding: 9px 15px; font-size: .86rem; min-height: 40px; white-space: nowrap; }
  .nav-toggle { display: block; }
  .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: absolute; top: 76px; left: 0; right: 0; background: var(--bg-2); padding: 24px 28px; border-bottom: 1px solid var(--line); }
  /* On a phone the bar carried language, theme, a CTA and the hamburger, and the
     CTA lost. The two settings move into the menu panel (js/agtu.js does the
     relocation) and get a label there — a bare icon in a list of links says
     nothing about what it does. */
  .nav-links.open .lang-switch { width: 100%; }
  .nav-links.open .lang-btn { width: 100%; justify-content: space-between; }
  .nav-links.open .theme-toggle { width: 100%; height: 44px; border-radius: 12px; justify-content: flex-start; gap: 10px; padding: 0 13px; }
  .nav-links.open .theme-toggle::after { content: "Light / dark"; font: inherit; font-size: .93rem; font-weight: 500; }
}
@media (max-width: 940px) {
  .split, .pillars-grid, .accred { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .cards-3, .cards-2, .aud-grid, .articles { grid-template-columns: 1fr; }
  .prog-list { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  /* a coluna da marca toma a linha inteira e as QUATRO listas dividem a
     seguinte. Com três trilhas uma das listas sempre sobrava sozinha numa
     terceira linha — que é o mesmo desequilíbrio do desktop, só deslocado. */
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid > .about { grid-column: 1 / -1; }
  .section { padding: 80px 0; }
  .cta-band { padding: 52px 26px; }
}
@media (max-width: 560px) {
  .stats-grid, .prog-list { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .step { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
}

/* ============================================================
   COMPARISON TABLE  ·  section 2, right after block C
   Eleven rows, AGTU against the category — never against a
   named competitor. Above eleven the reader stops reading and
   the table becomes a wall.

   It never scrolls sideways. On mobile it stops being a table
   and becomes one item per line, and the check and cross each
   carry a text label: a screen reader announces "yes" and "no",
   never a bare glyph.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.cmp { margin: 34px 0 0; }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table caption {
  text-align: left; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); padding-bottom: 14px;
}
.cmp-table th, .cmp-table td {
  padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.cmp-table thead th {
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-strong);
}
.cmp-table thead th:first-child { text-align: left; }
.cmp-table thead th + th { text-align: center; width: 21%; }
.cmp-table tbody th {
  text-align: left; font-weight: 500; color: var(--text); font-size: .98rem;
}
.cmp-table tbody td { text-align: center; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }

/* The AGTU column is the answer the reader came for, so it is the one that
   carries weight: a tinted channel running the height of the table. The
   category column stays deliberately quiet — the contrast between the two
   is the argument, and it should land before any single row is read. */
.cmp-table thead th.cmp-us,
.cmp-table tbody td.cmp-us {
  background: var(--accent-soft);
  border-left: 1px solid var(--accent-line);
  border-right: 1px solid var(--accent-line);
}
.cmp-table thead th.cmp-us { color: var(--accent-text); border-top: 1px solid var(--accent-line); }
.cmp-table tbody tr:last-child td.cmp-us { border-bottom: 1px solid var(--accent-line); }

.cmp-y, .cmp-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}
.cmp-y { color: var(--accent-bright); }
.cmp-n { color: var(--muted-2); opacity: .65; }
.cmp-y svg, .cmp-n svg { width: 17px; height: 17px; }

/* Everything above this table settles in one row/card at a time; the table
   itself used to just appear. Each row now gets the same cascading entrance
   (--i, set inline per row, spaces out the delay) plus a hover response, so
   the reader's eye keeps moving instead of landing on a static grid. */
.js .cmp-table tbody tr {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .25s;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js .cmp.in .cmp-table tbody tr { opacity: 1; transform: none; }
@media (hover: hover) {
  .cmp-table tbody tr:hover { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) {
  .js .cmp-table tbody tr { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 768px) {
  /* One item per line: the table stops being a table, and with it go the
     column headers — there are no columns left to label. What replaces them
     is a pair of equal-width pills under each statement, so the two sides
     line up and can actually be compared. The label rides inside the pill
     rather than trailing the symbol: a check with a caption beside it and a
     cross indented under it read as two unrelated facts, not as a contrast. */
  .cmp-table, .cmp-table caption, .cmp-table tbody, .cmp-table th { display: block; }
  .cmp-table thead { display: none; }
  /* Grid, not two floated cells: it is what makes the two pills exactly the
     same width and the same height, whichever of the two labels wraps. */
  .cmp-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 18px 0; border-bottom: 1px solid var(--line);
  }
  .cmp-table tr:last-child { border-bottom: 0; }
  .cmp-table tbody th {
    grid-column: 1 / -1;
    padding: 0 0 4px; border: 0; font-size: 1rem; line-height: 1.4;
  }
  .cmp-table tbody td {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); text-align: left;
  }
  .cmp-table tbody td.cmp-us {
    background: var(--accent-soft); border-color: var(--accent-line);
  }
  .cmp-y, .cmp-n { width: 16px; height: 16px; flex: none; margin-top: 1px; }
  .cmp-y svg, .cmp-n svg { width: 15px; height: 15px; }
  .cmp-lbl {
    position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; white-space: normal;
    font-size: .78rem; line-height: 1.3; color: var(--muted);
  }
  .cmp-lbl b { display: block; color: var(--text); font-weight: 600; font-size: .82rem; }
  .cmp-table tbody td.cmp-us .cmp-lbl b { color: var(--accent-text); }
}
/* On desktop the column header already names each side, so the label carries
   the meaning for screen readers only — a reader never announces a bare glyph. */
@media (min-width: 769px) {
  .cmp-lbl {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ============================================================
   EVERYTHING INCLUDED  ·  section 3
   Answers the suspicion that arrives right after the price —
   and what else will you charge me later?
   ============================================================ */
.eic-seals {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;
}
.eic-seals li {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface);
  font-size: .92rem; font-weight: 500; color: var(--text);
}
.eic-seals svg { width: 16px; height: 16px; color: var(--accent-bright); flex: none; }

@media (max-width: 768px) {
  .eic-seals { gap: 9px; }
  .eic-seals li { padding: 10px 13px; font-size: .86rem; }
}

/* ---- Everything included, as three cards instead of three text pills:
   the same three facts, but a reader scans an icon and a bold line before
   the caption, rather than parsing a sentence first. ---- */
.eic-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
  max-width: 980px; margin: 34px auto 0;
}
/* Two cards instead of three — some pages drop the edX line. The grid follows
   the count instead of leaving an empty third column and pushing the pair off
   centre. */
.eic-cards:has(li:nth-child(2):last-child) { max-width: 660px; }
.eic-cards li {
  text-align: center; padding: 30px 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  transition: transform .3s var(--ease), border-color .3s;
}
.eic-cards li:hover { transform: translateY(-4px); border-color: var(--accent-line); }
/* Just the mark, no badge behind it — plainer and reads cleaner than a
   circle repeated three times in a row. */
.eic-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-bright); margin-bottom: 14px;
}
.eic-ico svg { width: 26px; height: 26px; }
.eic-cards b { display: block; font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: 6px; }
.eic-cards span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* ---- edX, on its own: a single mark and one line, not a scrolling row
   built for many logos. Focus follows the one partner actually shown. ---- */
.edx-badge {
  display: flex; align-items: center; gap: 26px; max-width: 640px;
  margin: 26px auto 0; padding: 26px 32px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.edx-badge img { flex: none; width: 84px; height: auto; background: #fff; border-radius: 10px; padding: 8px; }
.edx-badge p { color: var(--muted); font-size: .94rem; line-height: 1.5; margin: 0; }

@media (max-width: 768px) {
  .eic-cards { grid-template-columns: 1fr; gap: 12px; max-width: none; }
  .eic-cards li { padding: 22px 20px; }
  .edx-badge { flex-direction: column; text-align: center; gap: 14px; padding: 24px 20px; margin-top: 20px; }
}

/* ============================================================
   HERO  ·  the pillar's claim as the H1
   The H1 stopped being the programme name and became the promise
   of the pillar, so it is now a sentence rather than a label: it
   needs a smaller ceiling and balanced wrapping. The programme
   name moves down to the tagline, where it still orients the
   reader, and the licensed name sits under the H1 in small type.
   ============================================================ */
.h-display.h-claim { font-size: clamp(2.1rem, 4.6vw, 3.5rem); text-wrap: balance; }
/* The hero's third line, under the course name (h1) and the pillar name
   (h2, italic). Plain weight so it doesn't compete with either heading —
   it reads as the human line under two proper nouns. */
.hero-hook { font-size: clamp(1.1rem, 2vw, 1.42rem); font-weight: 600; line-height: 1.4; color: #dbe6ff; max-width: 46ch; margin: 2px 0 0; }
.hero-auth {
  margin-top: 14px; font-size: .82rem; line-height: 1.5;
  max-width: 62ch;
  /* Sits over the hero photograph, not over a surface, so it takes a
     fixed light value instead of --muted-2: the muted token is tuned
     for panels and drops under 3:1 against the picture. */
  color: rgba(255, 255, 255, .72);
}
@media (max-width: 768px) {
  .h-display.h-claim { font-size: 1.92rem; line-height: 1.14; }
  .hero-auth { font-size: .76rem; margin-top: 12px; }
}

/* ---- Connect on LinkedIn: the link that actually goes to LinkedIn
   carries the mark, the same way the edX link above carries edX's. ---- */
.li-band-link { margin-top: 12px; }
.li-band-link a {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent-text); font-weight: 600; font-size: .94rem;
  text-decoration: none; border-bottom: 1px solid var(--accent-line); padding-bottom: 1px;
}
.li-band-link a:hover { border-bottom-color: var(--accent-bright); }
.li-mark { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: #0a66c2; color: #fff; }

/* ---- Photo placeholder: a real student portrait, marked with the AGTU
   crest, goes here once one exists — the dashed frame and the plain image
   glyph read as "not final" rather than as a broken asset. ---- */
.li-band-photo {
  flex: none; width: 120px; height: 120px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px dashed var(--line-strong);
  color: var(--muted-2);
}
.li-band-photo svg { width: 32px; height: 32px; }
@media (max-width: 768px) {
  .li-band-photo { width: 84px; height: 84px; }
  .li-band-photo svg { width: 26px; height: 26px; }
}

/* ============================================================
   HERO COM FORMULÁRIO
   A especificação põe o primeiro dos três formulários dentro do
   hero — é o que recolhe quem chegou decidido pelo anúncio e não
   quer ler mais nada. No desktop ele fica ao lado da promessa; no
   celular desce para baixo dela, depois do preço e do botão, que
   é a ordem em que a decisão acontece ali.
   ============================================================ */
/* .hero sets color:#eef1f8 for the copy that sits on its dark photo — but
   the form card has its own surface (white in the light theme) and .lf h3
   never declared its own color, so it inherited the hero's near-white text
   and went unreadable. Reset it here, not on .lf globally: the bug exists
   only where the card sits inside the hero. */
.hero-inner.has-form .lf h3 { color: var(--text); }

/* This card sits on the hero photo, not on a page surface, so it keeps the
   dark card regardless of the site's light/dark toggle — the same call
   already made for the photo and the copy beside it. Pinning the tokens
   the card's own rules already read (--surface, --text, --muted…) to their
   dark values overrides the toggle for this one component without
   touching any of those rules directly. */
.hero-inner.has-form .lf {
  --surface: #0e1c3d;
  --surface-2: #15264f;
  --bg-2: #0a1530;
  --text: #f4f6fb;
  --muted: #9aa6bf;
  --muted-2: #6c7791;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --accent-soft: rgba(59,130,246,.15);
  --accent-line: rgba(59,130,246,.42);
  --accent-text: #7db4ff;
}
.hero-inner.has-form .lf .err { color: #ff9c9c; }

/* Liquid glass, on browsers that can do it: a frosted, faintly rippled
   backdrop instead of a flat fill — pure CSS + one SVG filter (feTurbulence
   + feDisplacementMap), the same idea Apple's own glass panels use, tuned
   mild because this card holds real inputs, not a display piece. Falls
   back to the plain dark fill above on anything without backdrop-filter,
   so the card is never accidentally see-through. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-inner.has-form .lf {
    position: relative;
    isolation: isolate;         /* keeps the pseudo's z-index:-1 contained to this card */
    background: rgba(14, 28, 61, .32);
    box-shadow:
      inset 1px 1px 1px rgba(255,255,255,.16),
      inset -1px -1px 1px rgba(255,255,255,.05),
      0 24px 60px -28px rgba(0,0,0,.55);
  }
  .hero-inner.has-form .lf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(155deg, rgba(24,44,92,.55), rgba(8,16,38,.6));
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    filter: url(#lf-glass);
  }
}

@media (min-width: 981px) {
  .hero-inner.has-form {
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr);
    gap: 52px;
    /* Equal-height columns: the shorter side (usually the copy) stretches
       to match the form's height instead of sitting centered and shorter
       beside it. */
    align-items: stretch;
  }
  .hero-inner.has-form .hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-inner.has-form .lf { margin: 0; }
}
@media (max-width: 980px) {
  .hero-inner.has-form .lf { margin-top: 34px; }
}

/* ============================================================
   PREÇO: mensal em destaque, total ao lado, bandeira junto
   A leitura que a especificação quer é "eles sabem de onde eu
   sou, e este é o meu preço" — por isso a bandeira encosta no
   seletor, dentro do componente de bolsa, e nunca aparece como
   uma fileira solta em outro lugar da página.
   ============================================================ */
.pc-country-row { display: flex; align-items: center; gap: 10px; }
.pc-country-row select { flex: 1; min-width: 0; }
.pc-flag {
  flex: none; font-size: 1.6rem; line-height: 1;
  width: 1.7em; text-align: center;
  /* Uma fonte de emoji explícita: sem ela, plataformas que têm o glifo
     ainda podem cair numa fonte de texto e desenhar as duas letras. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.pc-flag:empty { display: none; }

.pc-per {
  font-size: .9rem; font-weight: 600; color: var(--muted);
  margin-left: 6px; letter-spacing: .01em;
}
.pc-total {
  margin-top: 10px; font-size: .88rem; line-height: 1.45; color: var(--muted);
}
.pc-total b { color: var(--text); font-weight: 700; font-size: 1rem; }

@media (max-width: 768px) {
  .pc-flag { font-size: 1.35rem; }
  .pc-total { font-size: .82rem; }
}

/* ============================================================
   A ILHA (17/9/2026, pedido do Carlos: "algo quase como uma dynamic island
   azul, bem apple style")
   Uma cápsula azul flutuando no pé da tela. Três gestos fazem o efeito:
     1. ENTRADA COM MOLA — ela nasce estreita e pequena e se abre, numa curva
        que passa um pouco do ponto (cubic-bezier com overshoot), que é como a
        ilha da Apple se comporta;
     2. VIDRO SOBRE AZUL — degradê da casa, borda clara de um ponto, brilho
        interno no alto e sombra azul embaixo: parece pastilha de vidro, não
        tarja;
     3. SAÍDA QUE SE FECHA — ao escolher, ela ENCOLHE para uma pílula com um
        visto e só então some. É o gesto que diz "guardado" sem escrever.
   Faixa, não modal: a página continua legível e clicável atrás.
   ============================================================ */
.cookie-bar {
  position: fixed; left: 50%; bottom: 22px; z-index: 90;
  width: min(760px, calc(100vw - 28px));
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 1px 16px;
  grid-template-areas: "marca titulo acoes" "marca texto acoes";
  padding: 14px 16px 14px 14px; border-radius: 26px; overflow: hidden; isolation: isolate;
  color: #eef4ff;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(96, 165, 250, .34), transparent 58%),
    linear-gradient(140deg, #0a2a5e 0%, #0d3572 48%, #071d44 100%);
  border: 1px solid rgba(160, 200, 255, .26);
  box-shadow: 0 26px 60px -22px rgba(4, 22, 60, .78), 0 0 0 1px rgba(255, 255, 255, .04) inset,
              0 1px 0 rgba(255, 255, 255, .16) inset;
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: ilhaAbre .72s cubic-bezier(.2, .9, .28, 1.12) both;
  transition: width .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1),
              border-radius .5s cubic-bezier(.4, 0, .2, 1), opacity .3s var(--ease);
}
/* a ilha nasce pílula e se abre */
@keyframes ilhaAbre {
  0%   { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.42); border-radius: 999px; }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); border-radius: 26px; }
}
/* e se fecha na mesma pílula, com o visto, antes de sumir */
.cookie-bar.is-done { width: 148px; padding: 14px 18px; border-radius: 999px; grid-template-columns: 24px auto;
                      grid-template-areas: "marca titulo"; justify-content: center; gap: 0 10px; }
.cookie-bar.is-done .cookie-mark { width: 24px; height: 24px; border: 0; background: none; }
.cookie-bar.is-done p, .cookie-bar.is-done .cookie-acts { display: none; }
.cookie-bar.is-out { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.9); }
/* o escudo em marca-d'água, saindo pela direita */
.cookie-bar::after {
  content: ""; position: absolute; right: -30px; top: 50%; width: 170px; height: 196px; z-index: -1;
  transform: translateY(-50%); pointer-events: none; opacity: .1; background: #cfe2ff;
  -webkit-mask: url("../logos/agtu-crest-outline.svg") center/contain no-repeat;
          mask: url("../logos/agtu-crest-outline.svg") center/contain no-repeat;
}
.cookie-bar.is-done::after { opacity: 0; }
.cookie-mark {
  grid-area: marca; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(190, 219, 255, .28);
  color: #dce9ff; transition: width .4s var(--ease), height .4s var(--ease), background .4s var(--ease);
}
.cookie-mark svg { width: 24px; height: 24px; }
.cookie-mark .ck-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cookieDraw 1s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.cookie-mark .ck-draw-2 { animation-delay: .9s; }
.cookie-bar h4 { grid-area: titulo; margin: 0; font-size: .92rem; font-weight: 700; letter-spacing: -.015em; color: #fff; white-space: nowrap; }
.cookie-bar p { grid-area: texto; margin: 2px 0 0; color: rgba(222, 234, 255, .82); font-size: .82rem; line-height: 1.45; }
.cookie-bar a { color: #bcd8ff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cookie-acts { grid-area: acoes; display: flex; align-items: center; gap: 8px; }
.cookie-acts .btn { min-height: 38px; padding: 0 16px; font-size: .84rem; white-space: nowrap; border-radius: 999px; }
/* os dois botões na língua da ilha: um de vidro, outro branco sólido */
.cookie-acts .btn-ghost { color: #dce9ff; border-color: rgba(190, 219, 255, .4); background: rgba(255, 255, 255, .06); }
.cookie-acts .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); }
.cookie-acts .btn-primary { background: #fff; color: #0a2a5e; border-color: #fff; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.cookie-acts .btn-primary:hover { background: #eaf2ff; color: #0a2a5e; }
@keyframes cookieDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { animation: none; transition: opacity .2s linear; }
  .cookie-mark .ck-draw { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 720px) {
  .cookie-bar { bottom: 12px; width: calc(100vw - 20px);
                grid-template-columns: 38px minmax(0, 1fr);
                grid-template-areas: "marca titulo" "marca texto" "acoes acoes";
                padding: 14px 16px; gap: 1px 13px; border-radius: 24px; }
  .cookie-bar::after { right: -56px; opacity: .08; }
  .cookie-mark { width: 38px; height: 38px; border-radius: 12px; }
  .cookie-mark svg { width: 21px; height: 21px; }
  .cookie-bar p { font-size: .79rem; }
  .cookie-acts { margin-top: 12px; }
  .cookie-acts .btn { flex: 1 1 0; justify-content: center; padding: 0 10px; min-height: 42px; }
  .cookie-bar.is-done { width: 138px; grid-template-areas: "marca titulo"; }
}
/* o link que reabre a escolha, no rodapé */
.cookie-reopen { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
                 text-decoration: underline; text-underline-offset: 3px; }
.cookie-reopen:hover { color: var(--accent-text); }

/* 25/10/2026 · o depoimento só toca no clique */
.phone-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; width:68px; height:68px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); background:rgba(37,99,235,.92); color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 14px 34px -10px rgba(37,99,235,.8); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.phone-play svg { width:26px; height:26px; margin-left:3px; }
.phone-play:hover { transform:translate(-50%,-50%) scale(1.06); }
.phone-play[hidden] { display:none; }

/* bandeira dos EUA no cabeçalho, primeiro item da direita, em todas as páginas (Giovanna/Murilo, 03/11) */
.nav-flag { order:-1; display:inline-flex; align-items:center; flex:none; line-height:0; border-radius:4px; box-shadow:0 0 0 1px rgba(16,22,38,.18); transition:box-shadow .25s, transform .25s; }
.nav-flag img { display:block; width:30px; height:auto; aspect-ratio:19 / 10; border-radius:4px; }
.nav-flag:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--accent); }
.nav:not(.scrolled) .nav-flag { box-shadow:0 0 0 1px rgba(255,255,255,.45); }
.nav:not(.scrolled) .nav-flag:hover { box-shadow:0 0 0 1px #fff; }

/* celular: a barra tem logo, bandeira, botão e menu; sem folga os botões longos empurravam o menu para fora da tela */
@media (max-width: 480px) {
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding-inline: 12px; }
}
@media (max-width: 380px) {
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding-inline: 10px; font-size: .8rem; }
  .nav-flag img { width: 26px; }
  .brand .logo { height: 22px; width: auto; }
}

/* decoração animada (celular de depoimentos, brilhos da seção "one more") sai das seções para os lados e criava rolagem horizontal; as seções ocupam a largura toda, então cortar o excesso lateral não esconde nada visível, e clip não cria área de rolagem (o sticky continua valendo) */
section.section { overflow-x: clip; }