/* Design tokens — colors, type, spacing. Keep the current visual identity.
   Breakpoints (custom props can't hold media queries — documented here):
   36em(576) / 48em(768) / 64em(1024) / 80em(1280, .container max). */
:root {
  --brand:        #ff7031;
  --brand-strong: #e05b2b;
  --navy:         #12445d;
  --ink:          #363c4b;
  --text:         #444;
  --muted:        #707070;
  --ok: #0b6; --info: #06b; --err: #b00000; --warn: #b26a00;
  --bg: #fff; --surface: #f2f2f2; --line: #ddd;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-base: 1rem;
  --fs-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;

  --radius-sm: 4px; --radius: 8px;
  --shadow-1: 0 1px 3px rgb(0 0 0 / .12);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .15);
  --header-h: 4.5rem;
  --container: 80rem;
}
/* Reset + base typography (mobile-first). */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchor jumps (FAQ index, back-to-top, ...) so targets clear
     the sticky header instead of landing under it. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* Sticky footer: on short pages the main area grows so the footer sits at
     the bottom of the viewport rather than mid-screen. */
  display: flex; flex-direction: column; min-height: 100vh;
}
.site-main { flex: 1 0 auto; }
img, picture, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--brand); }   /* orange, like the original */
h1 { font-size: var(--fs-xl); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { left: 0; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* Shared form primitives -- buttons, flash messages, form fields.
   Extracted from catalog's components.css into the 2026 shared kit so
   catalog + campus render identical controls (BEM-lite, class-scoped). */

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-strong); color: #fff; }
.btn--sm { min-height: 36px; padding: var(--sp-1) var(--sp-3); }

/* ---- Flash messages ----------------------------------------------------- */
.flash {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid; border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.flash__body { margin: 0; }
.flash--ok   { border-color: var(--ok);   color: #064; background: #f0fbf6; }
.flash--info { border-color: var(--info); color: #024; background: #eff6fc; }
.flash--warn { border-color: var(--warn); color: #613; background: #fdf6ec; }
.flash--err  { border-color: var(--err);  color: #700; background: #fdf0f0; }

/* ---- Form fields -------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field__label {
  display: block; margin-bottom: var(--sp-1);
  font-weight: 600; color: var(--ink);
}
.field__req { color: var(--err); }
.field__input,
.field__select {
  width: 100%; min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; color: var(--text); background: var(--bg);
}
.field__input:focus-visible,
.field__select:focus-visible { border-color: var(--brand); }
textarea.field__input { min-height: 8rem; resize: vertical; }
.field--error .field__input,
.field--error .field__select { border-color: var(--err); }
.field__help { margin-top: var(--sp-1); font-size: .875rem; color: var(--muted); }
.field__error { margin-top: var(--sp-1); font-size: .875rem; color: var(--err); }

.field--check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; }
.field__check { width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.field__check-label { font-weight: 400; }
.field--check .field__error { grid-column: 1 / -1; }
/* Shared site chrome -- the header bar + logo. Extracted from catalog's
   components.css into the 2026 kit so catalog (full header) and campus
   (logo-only header, w/header_logo) render the same header. */

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4); min-height: var(--header-h);
}
.site-header__logo {
  display: inline-flex; align-items: center;
  margin-right: auto;
}
.site-header__logo img { display: block; width: 200px; height: auto; }
.site-header__logo:hover { text-decoration: none; }
/* Site chrome + reusable components. Mobile-first; BEM-lite; no CSS nesting.
   Breakpoints: 36em / 48em / 64em / 80em. Colours come from tokens.css. */

/* ---- Utilities ---------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--sp-4); }
.cluster {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3); align-items: center;
}
.icon {
  width: 1.25em; height: 1.25em;
  fill: currentColor; stroke: none;
  vertical-align: -0.15em;
}

.site-main { padding-block: var(--sp-6); }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; display: block;
  width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after  { position: absolute; top: 7px; }

/* Collapsible panel: hidden on mobile until .is-open */
.site-nav { display: none; flex-basis: 100%; }
.site-nav.is-open { display: block; }

.main-nav__list,
.account-nav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.account-nav__list { padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.main-nav__link,
.account-nav__link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  min-height: 44px;
  color: var(--ink); font-weight: 400;    /* normal weight, like the original */
}
.main-nav__link:hover,
.account-nav__link:hover { color: var(--brand); text-decoration: none; }
.account-nav__link--register { display: inline-flex; margin-top: var(--sp-2); font-weight: 700; }

/* Cursos mega-menu. Hidden until JS reveals it (.is-open); no-JS visitors just
   get the "Cursos" link. On mobile it drops in as an indented sub-list. */
.mega-menu { display: none; }
.main-nav__item--mega.is-open > .mega-menu { display: block; padding-left: var(--sp-4); }
.mega-menu__all {
  display: block; padding: var(--sp-2) var(--sp-3); font-weight: 700; color: var(--ink);
}
.mega-menu__all:hover { color: var(--brand); text-decoration: none; }
.mega-menu__list { list-style: none; margin: 0; padding: 0; }
.mega-menu__link { display: block; padding: var(--sp-2) var(--sp-3); color: var(--ink); }
.mega-menu__link:hover { color: var(--brand); background: var(--surface); text-decoration: none; }

/* ---- Search box: ONE shared pill, used by both the header typeahead and the
   /pesquisar page, so they never drift apart (public/js/search.js) --------- */
.search-box {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;   /* pill */
  min-height: 40px;
}
.search-box__input {
  flex: 1; min-width: 0;
  border: 0; background: none; font: inherit; color: var(--ink);
  padding: var(--sp-2) 0; min-height: 40px;
}
/* The pill is the focus affordance -- no extra (orange) outline on the field. */
.search-box__input:focus { outline: none; }
/* In-box spinner while loading, replacing the clear (x) at the right edge. */
.search-box.is-loading::after {
  content: ""; position: absolute; right: var(--sp-4); top: 50%; margin-top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: hs-spin .6s linear infinite; pointer-events: none;
}
.search-box.is-loading .search-box__input { padding-right: var(--sp-5); }
.search-box.is-loading .search-box__input::-webkit-search-cancel-button { display: none; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .search-box.is-loading::after, .header-search__spinner { animation-duration: 2s; }
}

/* ---- Header typeahead: the shared box + its results dropdown -------------- */
.header-search { margin: var(--sp-3) 0; }     /* mobile: own row in the menu */
.header-search__results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: var(--sp-1); list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgb(0 0 0 / .16);
  max-height: 70vh; overflow-y: auto;
}
.header-search__results[hidden] { display: none; }
.header-search__result a {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--ink);
}
.header-search__result a:hover,
.header-search__result.is-active a { background: var(--surface); text-decoration: none; }
.header-search__result-title { font-size: .875rem; font-weight: 600; }
.header-search__result-meta { display: flex; gap: var(--sp-3); font-size: .75rem; color: var(--muted); }
.header-search__result-meta .is-old { text-decoration: line-through; opacity: .8; margin-right: 4px; }
.header-search__empty,
.header-search__status { padding: var(--sp-2) var(--sp-3); color: var(--muted); font-size: .8125rem; }
.header-search__status { display: flex; align-items: center; gap: var(--sp-2); }
.header-search__spinner {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand);
  animation: hs-spin .6s linear infinite;
}
/* "See all results" row: pinned to the bottom of the (scrollable) dropdown so
   it stays visible no matter how many results are showing -> full results page. */
.header-search__more {
  position: sticky; bottom: calc(var(--sp-1) * -1); margin-top: var(--sp-1);
  background: var(--bg); border-top: 1px solid var(--line);
}
.header-search__more a {
  display: block; padding: var(--sp-2) var(--sp-3);
  font-size: .8125rem; font-weight: 600; color: var(--brand);
}
.header-search__more a:hover,
.header-search__more.is-active a { background: var(--surface); text-decoration: none; }

/* ---- Search results page (/pesquisar) ------------------------------------ */
/* The page has its own search box, so drop the header one -- two search boxes
   in view at once is confusing. */
body.search-page .header-search { display: none; }

.search-page__form { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block: var(--sp-5); max-width: 42rem; }
.search-page__form .search-box { flex: 1; min-width: 12rem; }
.search-page__count { color: var(--muted); margin-bottom: var(--sp-4); }
.search-page__empty { padding-block: var(--sp-5); color: var(--muted); }
.search-page__results.is-loading { opacity: .5; transition: opacity .15s ease; }

@media (min-width: 48em) {
  .nav-toggle { display: none; }
  /* Logo left, then the nav row fills the rest so the search box can grow. */
  .site-header__logo { margin-right: 0; }
  .site-nav {
    display: flex !important; flex: 1; flex-basis: auto;
    align-items: center; gap: var(--sp-5);
  }
  /* Search takes all the room between the main nav and the account links. */
  .header-search { flex: 1; margin: 0; }
  /* Pin the account links to the right independently of the search box, so
     hiding the box (e.g. on the search page) leaves the main nav on the left
     and the account links on the right -- nothing shifts. */
  .account-nav { margin-left: auto; }
  .main-nav__list { flex-direction: row; gap: var(--sp-2); }
  /* Account links: a thin separator sits between the two links (no divider
     before them -- the search box already separates them from the main nav). */
  .account-nav__list {
    flex-direction: row; align-items: center; gap: var(--sp-2);
    padding: 0 0 0 var(--sp-4); border-top: 0;
  }
  .account-nav__link { padding-block: var(--sp-2); }
  .account-nav__link--register { margin-top: 0; }

  /* Cursos mega-menu -> a dropdown panel below the link, areas in two columns. */
  .main-nav__item--mega { position: relative; }
  .main-nav__item--mega.is-open > .mega-menu {
    position: absolute; top: 100%; left: 0; z-index: 70;
    padding: var(--sp-3); margin-top: var(--sp-1);
    min-width: 32rem; max-width: calc(100vw - 2rem);
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgb(0 0 0 / .16);
  }
  .mega-menu__all { margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
  .mega-menu__list { columns: 2; column-gap: var(--sp-4); }
  .mega-menu__list li { break-inside: avoid; }
  .mega-menu__link { border-radius: var(--radius-sm); }
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: var(--sp-6);
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* No bottom padding: keep the footer tight to the window edge and leave the
     last column's lower-right corner clear for the JS-inserted chat button. */
  padding-block: var(--sp-5) 0;
  color: var(--text);
}
.site-footer__grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
}
/* The training-areas column holds many links: single column on mobile, then
   flow into multiple columns as space allows. */
.site-footer__list--areas { columns: 1; column-gap: var(--sp-5); }
.site-footer__list--areas li { break-inside: avoid; }
@media (min-width: 48em) { .site-footer__list--areas { columns: 3; } }
.site-footer__heading {
  font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
  font-size: .875rem; color: var(--brand);        /* orange, like the original */
  margin-bottom: var(--sp-3);
}
.site-footer__heading + .site-footer__heading,
.site-footer__social + .site-footer__heading { margin-top: var(--sp-4); }
.site-footer__list { list-style: none; padding: 0; margin: 0; font-size: .75rem; line-height: 1.3; }
.site-footer__list li { margin-bottom: 0; }
.site-footer__list a { color: #000; }
.site-footer__list a:hover { color: var(--brand); text-decoration: underline; }

/* Social: orange rounded tiles with a white glyph (hover inverts) -- original. */
.site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-2); }
.site-footer__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--brand); color: #fff;
  border-radius: var(--radius-sm);
  font-size: 16px;
}
.site-footer__social-link:hover { background: #fff; color: var(--brand); }

.newsletter-form { display: flex; gap: var(--sp-2); max-width: 22rem; }
.newsletter-form__input {
  flex: 1; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--bg);
}
.newsletter-form__submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px;
  background: var(--brand); color: #fff;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.newsletter-form__submit:hover { background: var(--brand-strong); }

.site-footer__legal {
  margin-top: var(--sp-4);
  color: var(--muted); font-size: .6rem;
}

@media (min-width: 48em) {
  /* Grey footer with a thin white vertical divider that runs the full height of
     the footer -- top edge to bottom edge. The footer's top padding moves onto
     the columns so they fill from the top; grid stretch equalises their height;
     and the copyright is taken out of flow (absolutely positioned at the bottom)
     so the columns -- and their white borders -- reach all the way down. Each
     column keeps a bottom padding so its content clears the copyright. */
  .site-footer { position: relative; padding-block-start: 0; }
  .site-footer__grid { grid-template-columns: 2.2fr 1fr 1.1fr; gap: 0; align-items: stretch; }
  .site-footer__col { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
  .site-footer__col:first-child { padding-inline-start: 0; }
  .site-footer__col:last-child { padding-inline-end: 0; }
  .site-footer__col + .site-footer__col { border-left: 4px solid var(--bg); }
  .site-footer__legal {
    position: absolute; inset: auto 0 0 0;
    margin-top: 0; padding-bottom: var(--sp-3);
  }
}

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs { margin-bottom: var(--sp-4); font-size: .875rem; }
.breadcrumbs__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/"; margin-right: var(--sp-2); color: var(--muted);
}
.breadcrumbs__item[aria-current="page"] { color: var(--muted); }

/* ---- Pagination --------------------------------------------------------- */
.pagination { margin-top: var(--sp-6); }
.pagination__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600;
}
.pagination__link:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pagination__link.is-current {
  background: var(--brand); border-color: var(--brand); color: #fff; cursor: default;
}
/* Page-specific tweaks, scoped by body class where needed. */

/* Hero (home) */
.hero { padding-block: var(--sp-7); }
.hero p { color: var(--muted); }

/* Long-form content pages (sobre/*, ajuda/*, parceiros) */
.prose { max-width: 48rem; }
.prose h1 { margin-bottom: var(--sp-5); }
.prose h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.prose h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.prose li + li { margin-top: var(--sp-1); }
.prose address { font-style: normal; }

/* Contactos */
.contacts-page .contact-list { list-style: none; margin-left: 0; }
.contacts-page .contact-list li + li { margin-top: var(--sp-2); }
.contacts-page .contact-address {
  margin-bottom: var(--sp-5); padding: var(--sp-4);
  background: var(--surface); border-radius: var(--radius-sm);
}
.contact-form { max-width: 36rem; }

/* Partners */
.parceiros-page .partners-list { margin-left: var(--sp-5); }

/* FAQ (guia do formando / perguntas frequentes) */
/* Top index: sections only, jumps to each section. */
.faq__toc {
  margin-bottom: var(--sp-6); padding: var(--sp-4);
  background: var(--surface); border-radius: var(--radius);
}
.faq__toc-list { margin: 0; padding-left: var(--sp-5); }
.faq__toc-list li { margin-bottom: var(--sp-1); }

.faq__video { margin-bottom: var(--sp-6); }
.faq__video iframe {
  width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto;
  border: 0; margin-inline: auto; display: block;
}

.faq__section + .faq__section { margin-top: var(--sp-6); }
/* Per-section index of that section's own questions -- smaller text. */
.faq__section-index {
  margin: 0 0 var(--sp-4) var(--sp-5); padding: 0;
  font-size: .8125rem;
}
.faq__section-index li { margin-bottom: 2px; }
/* "Back to top" link at the end of each section. */
.faq__back-top { margin-top: var(--sp-4); font-size: .8125rem; }

@media (min-width: 48em) {
  .faq__toc-list { columns: 2; column-gap: var(--sp-6); }
  .faq__toc-list > li { break-inside: avoid; }
}

/* Error page */
.error-page { padding-block: var(--sp-6); }
/* Auth pages (login, registar, recuperar/atualizar password, validacao email).
   Only the auth-specific card + layout live here; fields, flash boxes and
   buttons reuse the shared component styles. Loaded via bin/build-assets. */

.auth-container {
  display: flex;
  justify-content: center;
  padding-block: var(--sp-6);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: var(--sp-6);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.auth-card h1 {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-lg);
}

.auth-card p { margin-bottom: var(--sp-4); }

.auth-form { margin-bottom: var(--sp-4); }

.auth-form .btn { width: 100%; }

/* Inline "Recuperar password" hint under the e-mail field on registration. */
.field__hint {
  margin-top: calc(var(--sp-1) * -1);
  margin-bottom: var(--sp-4);
  font-size: .875rem;
}

.auth-alt {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: .9375rem;
}

.auth-alt p { margin-bottom: var(--sp-2); }
.auth-alt p:last-child { margin-bottom: 0; }
/* Especializações + formadores. Reuses tokens + .card-grid/.card/.panel. */

/* Full-width page roller banner (especializações + vouchers listings). */
.page-roller { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); }
.page-roller img { display: block; width: 100%; height: auto; }
.esp-intro { max-width: 60rem; margin: var(--sp-5) auto; }
.esp-intro p { margin-bottom: var(--sp-3); }

/* Especialização detail reuses the course-page hero + course-glance aside
   (see cursos.css). Only the module table is specific here. */
.esp-modules { width: 100%; border-collapse: collapse; font-size: .875rem; }
.esp-modules th, .esp-modules td {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.esp-modules thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.esp-modules td:nth-child(2), .esp-modules th:nth-child(2),
.esp-modules td:nth-child(4), .esp-modules th:nth-child(4) { white-space: nowrap; }
.esp-modules tfoot td { font-weight: 700; border-bottom: 0; }
.esp-modules tfoot tr:first-child td { border-top: 2px solid var(--line); }
.esp-modules__promo td { color: var(--brand); }

.panel { background: var(--surface); border-radius: var(--radius); padding: var(--sp-5); }
.panel__row {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.panel__row:last-of-type { border-bottom: 0; }
.panel form { margin-top: var(--sp-4); }
.panel .btn { width: 100%; }

/* Formador profile */
.formador-hero { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.formador-hero__photo { object-fit: cover; }
.formador-section { margin-bottom: var(--sp-5); }
.formador-courses { margin-top: var(--sp-6); }
/* Catalog (cursos/seccao) pages: card grid, card, price, filters bar,
   list-view table, course hero/header/body/glance. Colours/spacing come from
   tokens.css. Breakpoints: 36em / 48em / 64em / 80em (see tokens.css header). */

/* ---- Badges / price -------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: #fff;
}
.badge--new   { background: var(--info); }
.badge--promo { background: var(--brand); }

.price { font-weight: 700; color: var(--ink); white-space: nowrap; }
.price--free { color: var(--ok); }
.price--promo { color: var(--brand-strong); }
.price__old {
  margin-right: var(--sp-2);
  font-weight: 400; color: var(--muted);
  text-decoration: line-through;
}

/* ---- Card grid ---------------------------------------------------------- */
.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card-grid__empty { color: var(--muted); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover,
.card:focus-within { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__link:hover { text-decoration: none; }
.card__figure { position: relative; display: block; }
.card__image { width: 100%; height: auto; aspect-ratio: 250 / 205; object-fit: cover; display: block; }
.card__flags { position: absolute; top: var(--sp-2); left: var(--sp-2); display: flex; gap: var(--sp-2); }

/* Title on a slate bar with centred white text (matches the original). */
.card__title {
  margin: 0;
  background: #54606b; color: #fff;
  font-size: .9rem; font-weight: 400; line-height: 1.3;
  text-align: center;
  padding: var(--sp-3) var(--sp-3);
  min-height: 3.4em;
  display: flex; align-items: center; justify-content: center;
  flex: 1;
}
/* Price left, start-date right. */
.card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3);
}
.card__price { color: var(--ink); font-weight: 700; }
.card__date { color: var(--muted); font-size: .8125rem; }

/* ---- Filters bar ---------------------------------------------------------- */
.filters-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-radius: var(--radius);
}
.filters-bar__order {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.filters-bar__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600;
}
.filters-bar__link:hover { color: var(--brand); text-decoration: none; }
.filters-bar__link.is-active { background: var(--brand); color: #fff; }

.filters-bar__format { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); }
.filters-bar__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.filters-bar__toggle:hover { color: var(--brand); }
.filters-bar__toggle.is-active { background: var(--bg); color: var(--brand); box-shadow: var(--shadow-1); }

/* ---- List-view table ---------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.cursos-table { width: 100%; border-collapse: collapse; }
.cursos-table th,
.cursos-table td {
  padding: var(--sp-3) var(--sp-3);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cursos-table th { color: var(--muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; }
.cursos-table td:nth-child(2) { white-space: normal; }
.cursos-table tbody tr:hover { background: var(--surface); }
.cursos-table__empty { color: var(--muted); }

/* ---- Course hero ---------------------------------------------------------- */
/* The full-bleed hero sits flush under the site header (like the homepage
   slider); cancel the .site-main top padding on the pages that lead with one so
   there's no gap between the header and the image. */
body.course-page .site-main,
body.especializacao-page .site-main { padding-block-start: 0; }

.course-hero { position: relative; overflow: hidden; }
/* Anchor the crop to the top (like prod's `background-position: 0 0`) rather
   than object-fit's default centre, so the hero shows the same slice. */
.course-hero__image { width: 100%; height: 20rem; object-fit: cover; object-position: top; }
.course-hero__overlay {
  position: relative;
  padding-block: var(--sp-5);
  color: #fff;
  background: linear-gradient(0deg, rgb(0 0 0 / .72), rgb(0 0 0 / .1) 70%);
}
/* Image is edge-to-edge; keep the TEXT aligned to the page gutter/container. */
.course-hero__overlay > * {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--sp-4);
}
.course-hero__image + .course-hero__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.course-hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.course-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.course-hero__enrol { margin: 0; }
.course-hero__price { margin: 0; font-size: var(--fs-lg); }
.course-hero .price,
.course-hero .price__old { color: #fff; }

@media (min-width: 48em) {
  .course-hero__image { height: 26rem; }
}

/* ---- Course details layout ------------------------------------------------ */
.course-details {
  display: grid; gap: var(--sp-6);
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) 0;
}
@media (min-width: 64em) {
  .course-details { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}

/* ---- Course body (info sections) ------------------------------------------ */
.course-info__social { margin-bottom: var(--sp-5); }
.course-info__box + .course-info__box { margin-top: var(--sp-6); }
.course-info__box h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.course-info__body :is(p, ul, ol) { margin-bottom: var(--sp-3); }
.course-info__body :is(ul, ol) { margin-left: var(--sp-5); }
.course-info__enrol { margin-top: var(--sp-6); }

/* ---- Course glance aside ---------------------------------------------------- */
/* Original design: flat grey boxes, no border/radius, with a navy full-width
   header bar (white text). */
.course-glance__box {
  padding: var(--sp-4);
  border: 0; border-radius: 0;
  background: var(--surface);
}
.course-glance__box + .course-glance__box { margin-top: var(--sp-4); }
/* Bare boxes (enrol button, dgert logo) sit on the page with no grey panel. */
.course-glance__box--bare { background: none; padding: 0; }
/* Enrol button spans the full sidebar width, matching the boxes above/below. */
.course-glance__box--bare form { margin: 0; }
.course-glance__box--bare .btn { display: block; width: 100%; }
.course-glance__box h2 {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  padding: var(--sp-4);
  background: var(--navy); color: #fff;
  font-size: 1rem; font-weight: 400;
}
.course-glance__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.course-glance__list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.course-glance__trainer { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.course-glance__trainer:hover { color: var(--brand); text-decoration: none; }
.course-glance__trainer img { border-radius: 0; }
.course-glance__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.course-glance__esp-lead { margin: 0 0 var(--sp-2); font-size: .8rem; color: var(--muted); }
.course-glance__esp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Full-width "Cursos recomendados" card grid at the bottom of the course page
   (spans the whole content width, under both the body and the sidebar). */
.course-related { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
.course-related__title { font-size: 1.5rem; margin-bottom: var(--sp-5); }
/* DGERT cert logo (horizontal SVG lockup): full sidebar width, like the boxes. */
.course-glance__dgert { display: block; width: 100%; height: auto; }
/* Page-specific styles for the public forms: newsletter (index/subscrever/
   confirmar) and vouchers. Reuses tokens + the shared .field/.btn/.flash
   components from components.css -- no changes to that file. */

/* ---- Narrow content column (newsletter pages) --------------------------- */
.narrow { max-width: 34rem; }

/* ---- Newsletter -----------------------------------------------------------
   .newsletter-hp-page/.subscribe-nwsltr-page are the body classes; the form
   itself reuses .newsletter-form/.newsletter-form__input/__submit from
   components.css (same markup as the footer widget). */
.newsletter-hp-page .newsletter-form,
.subscribe-nwsltr-page .newsletter-form { max-width: none; margin-top: var(--sp-5); }

/* ---- Vouchers ------------------------------------------------------------ */
.vouchers-page h1 { margin-bottom: var(--sp-4); }
.vouchers-page .voucher-form { max-width: 40rem; margin-top: var(--sp-6); }
.vouchers-page .voucher-form h2 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
.vouchers-page .voucher-form h2:first-of-type { border-top: 0; padding-top: 0; }
.vouchers-page .voucher-form textarea.field__input { min-height: 6rem; }
.vouchers-page .voucher-form .btn { margin-top: var(--sp-5); }

/* ---- Cloudflare Turnstile widget ----------------------------------------
   Applies wherever w::form::turnstile is included; the widget itself sizes
   its own iframe, we just give it consistent block spacing. */
.cf-turnstile { margin-block: var(--sp-5); }
/* Homepage hero slider + featured. */

/* ---- Hero slider (scroll-snap) ------------------------------------------ */
.hero-slider { position: relative; }
.hero-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.hero-slider__image {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1280 / 300; object-fit: cover;
}

.hero-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  background: rgb(0 0 0 / .35); color: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
}
.hero-slider__nav--prev { left: var(--sp-3); }
.hero-slider__nav--next { right: var(--sp-3); }
/* Arrows appear only while the pointer is over the slider (or a control has
   keyboard focus). */
.hero-slider:hover .hero-slider__nav,
.hero-slider:focus-within .hero-slider__nav { display: inline-flex; }

.hero-slider__dots {
  position: absolute; left: 0; right: 0; bottom: var(--sp-3);
  display: flex; gap: var(--sp-2); justify-content: center;
}
.hero-slider__dot {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .5);
}
.hero-slider__dot.is-active { background: #fff; }

/* ---- Welcome line ------------------------------------------------------- */
.corp-info {
  text-align: center;
  padding: var(--sp-5) 0 0;
  color: var(--text); font-size: .95rem;
}
.corp-info__punch { font-weight: 700; }
.corp-info a { color: var(--brand); }

/* ---- Featured ----------------------------------------------------------- */
.home-featured { padding-block: var(--sp-6); }
.home-featured__title { font-size: 1.5rem; margin-bottom: var(--sp-5); }
.home-featured__more { margin-top: var(--sp-5); }
/* Original EVOLUI icon-font, served locally. Used for the footer social icons
   (and available for the newsletter arrow). Glyph map matches production:
   f=facebook g=instagram h=pinterest i=linkedin b=arrow-right. */
@font-face {
  font-family: "icon-font";
  src: url("/assets/icon-font.19a9990ac1.woff") format("woff"),
       url("/assets/icon-font.f04d656c8a.ttf") format("truetype"),
       url("/assets/icon-font.633494bb51.svg#icon-font") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.icon-font {
  font-family: "icon-font" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-font--facebook::before  { content: "f"; }
.icon-font--instagram::before { content: "g"; }
.icon-font--pinterest::before { content: "h"; }
.icon-font--linkedin::before  { content: "i"; }
.icon-font--arrow-right::before { content: "b"; }