/* ==============================
   SYSADVANCE - Design System
   ============================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

/* Variables */
:root {
    /* Brand Colors */
    --color-primary: #00476c;
    --color-accent: #00a8e8;
    --color-orange: #ED6E00;
    --color-medical: #00A6D6;
    --color-energy: #8FD400;

    /* Neutrals */
    --color-dark: #001524;
    --color-text: #4a5565;
    --color-text-light: #64748b;
    --color-text-muted: #99a1af;
    --color-bg-light: #f5f7f9;
    --color-border: rgba(0, 71, 108, 0.08);

    /* Layout */
    --container-max: 1662px;
    --container-padding: 50px;
    --container-padding-mobile: 16px;

    /* Typography */
    --font-family: 'Kanit', sans-serif;
}

/* Sector accent override — body class set by base.tpl / base-subcategorias.tpl */
body.sector-medical { --color-orange: var(--color-medical); }
body.sector-energy  { --color-orange: var(--color-energy); }

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Global Font */
html, body {
    font-family: var(--font-family);
    color: var(--color-text);
    margin: 0;
    padding: 0;
}

* {
    font-family: inherit;
    box-sizing: border-box;
}

/* ==============================
   Container
   ============================== */

.sa-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
    width: 100%;
}

@media (min-width: 1024px) {
    .sa-container {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

/* ==============================
   Base Typography
   ============================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

p {
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus {
    color: #f0f0f0;
    text-decoration: none;
}

/* ==============================
   Utility Classes
   ============================== */

.bg-primary { background-color: var(--color-primary); }
.bg-dark { background-color: var(--color-dark); }
.bg-light { background-color: var(--color-bg-light); }
.bg-orange { background-color: var(--color-orange); }

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-orange { color: var(--color-orange); }
.text-white { color: #ffffff; }
.text-muted { color: var(--color-text-muted); }

/* ==============================
   System (ajax loader, modals)
   ============================== */

.modal-backdrop {
    background-color: #cdcdcd;
    z-index: 999999997;
}

#ajax_loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999999999;
    height: 100px;
    width: 200px;
    margin-left: -100px;
    margin-top: -50px;
    text-align: center;
}

.text-loading {
    margin-top: 20px;
    color: #3b3e42;
    font-weight: 500;
}

.modal {
    z-index: 999999998;
}

/* ==============================
   Header
   ============================== */

.sa-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 30px 0;
}

.sa-header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-header-inner {
        padding: 0 var(--container-padding);
    }
}

/* Logo */
.sa-header-logo {
    display: block;
    width: 152px;
    height: 76px;
    /* long-press no telemovel: tira o rectangulo cinzento do Android */
    -webkit-tap-highlight-color: transparent;
}

/*
 * A "caixa branca" que aparecia ao carregar no logo e manter premido vinha do
 * Bootstrap 3 (bootstrap.min.css), que poe
 *     a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
 * em QUALQUER a:focus — nao em :focus-visible. Como um clique de rato tambem
 * da' foco ao link, o anel do sistema (claro, sobre o cabecalho escuro) ficava
 * a` vista enquanto o botao estivesse premido.
 *
 * Tira-se o anel do rato e devolve-se um proprio ao TECLADO: quem navega por
 * Tab continua a ver onde esta'. O :focus-visible vem depois de proposito,
 * para ganhar ao :focus acima.
 *
 * (2 Set 2026: arrumado de vez para o site todo, logo a seguir. Estas duas
 * regras do logo ficam porque sao mais especificas e ele quer o anel a 4px.)
 */
.sa-header-logo:focus {
    outline: 0;
}

.sa-header-logo:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   A CAIXA BRANCA AO CARREGAR — para o site todo. 2 Set 2026.

   O `bootstrap.min.css` carrega ANTES deste ficheiro e traz do Bootstrap 3:

       a:focus  { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
       .btn:focus, .btn:active:focus, .btn.active:focus { o mesmo }

   Um clique de rato ou um toque no ecra tambem da' FOCO ao link, e por isso o
   anel do sistema — claro, e sobre os fundos escuros da casa le^-se como uma
   caixa branca — ficava desenhado a` volta do botao. Via-se no "Talk to an
   Engineer", nos botoes dos catalogos, nos cartoes das notícias: em qualquer
   <a> do site.

   Tira-se o anel a quem aponta e DEVOLVE-SE a quem navega por teclado, com a
   cor da casa. E' para isso que existe o :focus-visible — o browser so' o
   activa quando o foco vem do Tab, nao do dedo nem do rato. Acessibilidade
   intacta; o que sai e' so' o anel de quem ja' esta' a ver onde carregou.

   As regras `.sa-*:focus-visible` que ja' existem espalhadas pelo ficheiro
   continuam a ganhar a esta (uma classe e' mais especifica que um elemento),
   por isso nada do que ja' estava desenhado a` mao muda.
   --------------------------------------------------------------------------- */
a:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: 0;
}

a:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

.sa-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* o arrastar deixava um fantasma da imagem colado ao cursor */
    -webkit-user-drag: none;
    user-select: none;
}

/* Right side */
.sa-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Language Selector */
.sa-header-lang {
    position: relative;
}

.sa-header-lang-selected {
    border: 1px solid rgba(255, 255, 255, 0.28);
    height: 43px;
    width: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.sa-header-lang-selected:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sa-header-lang-selected span {
    font-weight: 300;
    font-size: 15px;
    color: #ffffff;
}

/* Language Dropdown */
.sa-header-lang-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 82px;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.sa-header-lang-dropdown.open {
    opacity: 1;
    pointer-events: auto;
}

.sa-header-lang-option {
    display: block;
    padding: 10px 0;
    text-align: center;
    font-weight: 300;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    transition: color 150ms ease;
}

.sa-header-lang-option:hover {
    color: #ffffff;
}

/* Login Button */
.sa-header-login {
    background: #ffffff;
    height: 43px;
    width: 91px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease;
}

.sa-header-login:hover {
    background-color: #f0f0f0;
}

.sa-header-login span {
    font-weight: 300;
    font-size: 15px;
    color: var(--color-primary);
}

/* Mobile header */
@media (max-width: 767px) {
    .sa-header-logo {
        width: 100px;
        height: 50px;
    }

    .sa-header-lang-selected {
        height: 36px;
        width: 60px;
    }

    /* width:auto, not a fixed 70px. The label is a translated string -- "Log in"
       fits, "Minha conta" / "My account" does not, and overflowed the button.
       Padding sizes it to whatever the language needs. */
    .sa-header-login {
        height: 36px;
        width: auto;
        min-width: 70px;
        padding: 0 12px;
    }

    .sa-header-lang-selected span,
    .sa-header-login span {
        font-size: 13px;
    }
}

/* ==============================
   Homepage
   ============================== */

/* Hero Banner */
.sa-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
}

.sa-hero-slide.active {
    opacity: 1;
}

.sa-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(242.08deg, rgba(0, 136, 207, 0.44) 0%, rgba(21, 61, 82, 0.69) 99.223%);
    z-index: 1;
}

.sa-hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--container-padding-mobile);
    padding-bottom: 160px;
}

@media (min-width: 1024px) {
    .sa-hero-inner {
        padding: 0 var(--container-padding);
        padding-bottom: 160px;
    }
}

.sa-hero-headline {
    color: #ffffff;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(40px, 7vw, 108px);
    max-width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.sa-hero-headline.visible {
    opacity: 1;
    transform: translateY(0);
}

.sa-hero-caption {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.7px;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease 200ms, transform 500ms ease 200ms;
}

.sa-hero-caption.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Bottom */
.sa-hero-bottom {
    margin-top: 48px;
}

/* Hero Progress Bar */
.sa-hero-progress {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sa-hero-progress-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding-top: 12px;
    transition: color 200ms ease;
    white-space: nowrap;
    position: relative;
}

.sa-hero-progress-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.sa-hero-progress-label::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #ffffff;
}

.sa-hero-progress-label.active {
    color: #ffffff;
}

.sa-hero-progress-label.active::after {
    /* A duracao vem de uma variavel para o JS a poder encurtar quando a barra
       retoma a meio -- ver o bloco do hover no template-banners-5.tpl. Sem
       ninguem lhe tocar, e' o valor de origem. */
    transition: width var(--sa-resto, 5000ms) linear;
    width: 100%;
}

/* Barra congelada enquanto o rato esta' em cima das etiquetas.
   Sem transicao e com a largura fixada no ponto onde ia: parar o temporizador
   nao chega, porque isto e' uma transicao CSS e nao sabe do temporizador --
   continuava a encher ate' ao fim com o carrossel parado. O JS mede a largura
   no momento do mouseenter e poe-na aqui. */
.sa-hero-progress-label.pausado::after {
    transition: none;
    width: var(--sa-cheio, 0);
}

.sa-hero-progress-label:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Hero Scroll Hint — bottom-left of hero */
.sa-hero-scroll {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    position: absolute;
    bottom: 30px;
    left: var(--container-padding-mobile);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .sa-hero-scroll {
        display: flex;
        left: var(--container-padding);
    }
}

.sa-hero-scroll-arrow {
    width: 12px;
    height: 12px;
}

/* Hero Mobile */
@media (max-width: 767px) {
    .sa-hero {
        height: 80vh;
    }

    /* The block is bottom-anchored (.sa-hero-inner is a flex column with
       justify-content: flex-end), so padding-bottom is what holds it off the
       floor. The prototype anchors the same content with
       bottom: clamp(90px, 12vh, 148px) -- on a phone 12vh falls below the
       floor, so it lands on 90px and the text sits noticeably lower than on
       desktop. 160px there, 90px here reproduces that. */
    .sa-hero-inner {
        padding-bottom: 90px;
    }

    /* Prototype: text-[14px] sm:text-[16px] on the slide labels. */
    .sa-hero-progress-label {
        font-size: 14px;
    }

    /* The row is nowrap with a 24px gap, which fits the homepage's two slides but
       not the four on the Sysadvance page -- "brasil" ran 11px past the right
       edge at 375. A tighter gap fits all four on one line at 375, and wrapping
       handles narrower screens (and any slide added later) instead of overflowing.
       Each label draws its own progress line via ::before, so a wrapped row still
       reads correctly. */
    .sa-hero-progress {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .sa-hero-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ==============================
   Bottom Navigation Bar
   ============================== */

.sa-nav {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    font-family: var(--font-family);
    transition: opacity 500ms ease;
}

/* `hidden` = o rodape do site esta' a` vista. E' a UNICA razao para a barra
   desaparecer, desde 7 Set 2026.

   Havia tambem `hidden-apps`, para o bloco Global Applications. Saiu: nas
   paginas de produto esse bloco esta a meio, e a barra apagava-se durante
   ~640px de scroll e voltava -- parecia avaria. O seletor fica aqui a
   apanhar as duas classes, para uma pagina em cache com a classe antiga no
   HTML nao ficar com a barra presa por cima do rodape. */
.sa-nav.hidden,
.sa-nav.hidden-apps {
    opacity: 0;
    pointer-events: none;
}

/* Nav bar */
.sa-nav-bar {
    position: relative;
    height: 43px;
    background-color: var(--color-primary);
}

/* Sliding highlight */
.sa-nav-highlight {
    position: absolute;
    top: 4px;
    height: 35px;
    background-color: #1c5776;
    transition: left 150ms ease, width 150ms ease;
    pointer-events: none;
    opacity: 0;
}

/* Nav links */
.sa-nav-links {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
}

.sa-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    height: 100%;
    font-weight: 300;
    font-size: 13px;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    transition: color 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.sa-nav-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.sa-nav-link-arrow {
    flex-shrink: 0;
}

/* ==============================
   Nav Dropdown Panel
   ============================== */

.sa-nav-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    padding-bottom: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.sa-nav-dropdown.visible {
    opacity: 1;
    pointer-events: auto;
}

.sa-nav-dropdown-inner {
    background-color: var(--color-primary);
    padding: 20px;
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.sa-nav-dropdown-content {
    flex: 1;
}

.sa-nav-dropdown-img-wrap {
    width: 140px;
    background: #ffffff;
    flex-shrink: 0;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.sa-nav-dropdown-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    object-fit: contain;
}

/* O painel acima foi desenhado para as maquinas: recorte de produto sobre
   branco, a flutuar com margem. Uma fotografia ali ficava com barras brancas
   a' volta -- o fundo do painel a aparecer por onde o contain nao chegava.
   Com .is-cover a imagem preenche o painel e o branco desaparece.
   Quem leva o que decide-se no template-nav-bottom.tpl ($imagemRecortada). */
.sa-nav-dropdown-img-wrap.is-cover {
    background: transparent;
}

.sa-nav-dropdown-img-wrap.is-cover img {
    padding: 0;
    object-fit: cover;
}

/* Sector title */
.sa-nav-dropdown-title {
    display: block;
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    margin-bottom: 12px;
}

/* Sub-items */
.sa-nav-dropdown-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sa-nav-dropdown-item {
    display: block;
    font-weight: 300;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.7px;
    color: #67a1bf;
    cursor: pointer;
    transition: color 150ms ease;
    text-decoration: none;
}

.sa-nav-dropdown-item:hover,
.sa-nav-dropdown-item.is-active {
    color: #ffffff;
    text-decoration: none;
}

/* Mobile: the desktop bar is replaced by .sa-nav-mob below, not just removed. */
@media (max-width: 767px) {
    .sa-nav {
        display: none;
    }
}

/* ==============================
   Mobile Navigation (< 768px)
   Hamburger pinned bottom-right, panel opens upward. Mirrors the prototype's
   GlobalNav.tsx -> MobileNav; kept bottom-anchored so it reads as the same
   navigation as the desktop bar rather than a different pattern.
   ============================== */

.sa-nav-mob {
    display: none;                 /* desktop: the .sa-nav bar handles it */
    position: fixed;
    bottom: 20px;
    right: 16px;
    z-index: 50;
    font-family: var(--font-family);
    transition: opacity 500ms ease;
}

@media (max-width: 767px) {
    .sa-nav-mob { display: block; }
}

/* Same footer-overlap fade as .sa-nav */
.sa-nav-mob.hidden {
    opacity: 0;
    pointer-events: none;
}

/* --- the button --- */
.sa-nav-mob-btn {
    width: 52px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #ffffff;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.sa-nav-mob-btn:hover,
.sa-nav-mob-btn:focus-visible {
    background-color: #003350;
}

/* Burger <-> X: both icons ship in the markup, one is shown at a time, so the
   swap costs no reflow and needs no JS beyond the .is-open class. */
.sa-nav-mob-icon-close { display: none; }
.sa-nav-mob.is-open .sa-nav-mob-icon-open  { display: none; }
.sa-nav-mob.is-open .sa-nav-mob-icon-close { display: block; }

/* --- the panel --- */
.sa-nav-mob-panel {
    position: absolute;
    bottom: 52px;
    right: 0;
    width: 260px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background-color: var(--color-dark);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.sa-nav-mob-link,
.sa-nav-mob-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: inherit;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: pointer;
}

/* Plain top-level pages (Home, Sysadvance, Services) -- no children, no accordion. */
.sa-nav-mob-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.sa-nav-mob-link:hover,
.sa-nav-mob-link:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

/* Section headers carry the sector colour inline, from $jsDropdowns.titleColor */
.sa-nav-mob-chev {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 200ms ease;
}

.sa-nav-mob-toggle.is-open .sa-nav-mob-chev {
    transform: rotate(180deg);
}

.sa-nav-mob-items {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sa-nav-mob-item {
    display: block;
    padding: 8px 24px;
    font-weight: 300;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 150ms ease;
}

.sa-nav-mob-item:hover,
.sa-nav-mob-item:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

/* [hidden] must win over the display rules above */
.sa-nav-mob-panel[hidden],
.sa-nav-mob-items[hidden] {
    display: none;
}

/* ==============================
   Why Choose Us Section
   ============================== */

.sa-wcu {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f5f7f9;
    min-height: 100vh;
}

/* Dot texture */
.sa-wcu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #c8d4de 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    pointer-events: none;
}

.sa-wcu-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 100vh;
}

@media (min-width: 1024px) {
    .sa-wcu-inner {
        flex-direction: row;
    }
}

/* Left column */
.sa-wcu-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 32px;
}

@media (min-width: 1024px) {
    .sa-wcu-left {
        width: 42%;
        padding: 80px 80px 80px 112px;
    }
}

/* Overline */
.sa-wcu-overline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.sa-wcu-overline-line {
    width: 32px;
    height: 1px;
    background: var(--color-primary);
}

.sa-wcu-overline-text {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-primary);
}

/* Title */
.sa-wcu-title {
    margin-bottom: 8px;
}

/* Os tamanhos originais (50 / 82 / 82px) foram desenhados para o titulo curto
   "What sets SysAdvance". O titulo do cliente — "Engineered for High Performance
   and Cost Reduction" — tem 3x mais caracteres e a coluna da esquerda so tem 42%
   da largura, por isso rebentava em 5 linhas gigantes. Descidos para caber. */
.sa-wcu-title-light {
    font-weight: 300;
    text-transform: uppercase;
    color: rgba(10, 22, 40, 0.35);
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.1;
    margin: 0;
}

.sa-wcu-title-bold {
    font-weight: 500;
    text-transform: uppercase;
    color: #0a1628;
    font-size: clamp(36px, 4.3vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
}

.sa-wcu-title-primary {
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-primary);
    font-size: clamp(36px, 4.3vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Divider */
.sa-wcu-divider {
    width: 56px;
    height: 2px;
    background: var(--color-primary);
    margin: 32px 0;
}

/* Description */
.sa-wcu-desc {
    font-weight: 300;
    font-size: 17px;
    color: var(--color-text);
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 40px;
}

/* o campo `text` do banner e um Rte e devolve <p> — repor as margens */
.sa-wcu-desc p {
    margin: 0 0 14px;
}

.sa-wcu-desc p:last-child {
    margin-bottom: 0;
}

/* Stats row */
.sa-wcu-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 71, 108, 0.1);
}

.sa-wcu-stat-val {
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    color: var(--color-primary);
}

.sa-wcu-stat-label {
    font-weight: 300;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text);
    margin-top: 4px;
}

/* CTA button */
.sa-wcu-cta {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.1em;
    height: 56px;
    text-decoration: none;
    transition: background-color 300ms ease;
    overflow: hidden;
}

.sa-wcu-cta:hover {
    background: #003a58;
    color: #ffffff;
    text-decoration: none;
}

.sa-wcu-cta-text {
    padding: 0 32px;
}

.sa-wcu-cta-icon {
    width: 56px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003456;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 300ms ease;
}

.sa-wcu-cta:hover .sa-wcu-cta-icon {
    background: #002a44;
}

/* ── Right column — bento grid ── */
.sa-wcu-right {
    display: none;
}

@media (min-width: 1024px) {
    .sa-wcu-right {
        display: flex;
        width: 58%;
        flex-direction: column;
        justify-content: center;
        padding: 80px 64px 80px 16px;
        gap: 12px;
    }
}

.sa-wcu-bento-top {
    display: flex;
    gap: 12px;
    height: 300px;
}

/* Os tres cards de baixo tinham `height: 215px` fixo em TODAS as larguras (nao
   havia uma unica media query para o bento) e o card tem `overflow: hidden`.
   Abaixo dos 1024px o .sa-wcu-inner passa a uma coluna, os tres cards ficam
   estreitos, o titulo em maiusculas parte-se em mais linhas e o conteudo passava
   dos 215px -- ficava cortado, sobretudo em tablet.
   min-height mantem o desenho igual no desktop (o conteudo cabe nos 215px) mas
   deixa crescer quando nao cabe; o flex-wrap evita espremer tres cards numa
   largura de tablet. O bento-top nao se mexe: a foto e' `position:absolute`,
   nao tem altura propria, e sem os 300px fixos colapsava. */
.sa-wcu-bento-bottom {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 215px;
}

/* Feature card (building photo) */
.sa-wcu-feature-card {
    position: relative;
    flex: 1;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 71, 108, 0.10);
}
/* O card e <a> quando o banner tem `link` (section-why-choose-us.tpl). Sendo
   flex item o display ja vem blockificado; falta matar o sublinhado e herdar a
   cor, senao o titulo branco do card passava a azul de link. As regras :hover
   abaixo ja existiam e continuam a servir de affordance. */
a.sa-wcu-feature-card {
    text-decoration: none;
    color: inherit;
}

.sa-wcu-feature-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.sa-wcu-feature-card:hover img {
    transform: scale(1.05);
}

.sa-wcu-feature-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 71, 108, 0.9), rgba(0, 71, 108, 0.3) 50%, transparent);
}

.sa-wcu-feature-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ffffff;
    transform: scaleY(0);
    transition: transform 300ms ease;
    z-index: 2;
}

.sa-wcu-feature-card:hover .sa-wcu-feature-card-accent {
    transform: scaleY(1);
}

.sa-wcu-feature-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    z-index: 1;
}

.sa-wcu-feature-card-sub {
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 4px;
}

.sa-wcu-feature-card-title {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.sa-wcu-feature-card-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.sa-wcu-feature-card-line span {
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.sa-wcu-feature-card-line div {
    height: 1px;
    width: 32px;
    background: rgba(255, 255, 255, 0.3);
}

/* Stat card (counter) */
.sa-wcu-stat-card {
    width: 210px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 71, 108, 0.08);
    border: 1px solid rgba(0, 71, 108, 0.08);
}

.sa-wcu-stat-card-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
}

.sa-wcu-stat-card-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 71, 108, 0.06);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sa-wcu-stat-card-number {
    font-weight: 600;
    font-size: 68px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-primary);
}

.sa-wcu-stat-card-label {
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-top: 8px;
    text-align: center;
}

.sa-wcu-stat-card-sublabel {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #0a1628;
    text-align: center;
}

/* Differentiator cards */
.sa-wcu-diff-card {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 71, 108, 0.09);
    box-shadow: 0 2px 12px rgba(0, 71, 108, 0.06);
    cursor: default;
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

.sa-wcu-diff-card:hover {
    box-shadow: 0 8px 32px rgba(0, 71, 108, 0.13);
    border-color: rgba(0, 71, 108, 0.22);
}

.sa-wcu-diff-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
}

.sa-wcu-diff-card:hover .sa-wcu-diff-card-accent {
    transform: scaleX(1);
}

.sa-wcu-diff-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sa-wcu-diff-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.06);
    border: 1px solid rgba(0, 71, 108, 0.12);
}

.sa-wcu-diff-card-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    fill: none;
}

.sa-wcu-diff-card-tag {
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sa-wcu-diff-card-title {
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #0a1628;
    margin: 0 0 6px;
    overflow-wrap: break-word;
}

/* Um card por linha no telemovel, dois no tablet, os tres lado a lado so a
   partir dos 1024px -- que e' onde .sa-wcu-inner passa a duas colunas e o bento
   volta a ter a largura para que foi desenhado. Segue a convencao mobile-first
   (min-width) do resto desta seccao. */
@media (min-width: 640px) {
    .sa-wcu-diff-card { flex: 1 1 calc(50% - 6px); }
}

@media (min-width: 1024px) {
    .sa-wcu-bento-bottom { flex-wrap: nowrap; }
    .sa-wcu-diff-card    { flex: 1 1 0%; }
}

.sa-wcu-diff-card-body {
    font-weight: 300;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text);
    margin: 0;
}

/* ── Scroll animations ── */
.sa-wcu-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: transform, opacity;
}

.sa-wcu-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.sa-wcu-animate-delay-1 { transition-delay: 100ms; }
.sa-wcu-animate-delay-2 { transition-delay: 200ms; }
.sa-wcu-animate-delay-3 { transition-delay: 300ms; }
.sa-wcu-animate-delay-4 { transition-delay: 400ms; }
.sa-wcu-animate-delay-5 { transition-delay: 500ms; }

/* ==============================
   Simulator Section
   ============================== */

.sa-sim {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-primary);
    font-family: var(--font-family);
    /* Anchor target for everything that deep-links to the wizard: the
       "Calculate Now" card on the sector/product pages (via page 146) and
       "Simulators & Comparators" in the footer (page 145), both landing on
       /go/information#saSim. Same 80px offset as the other scroll targets so
       "Find Your" is not tucked under the fixed header. Global
       `scroll-behavior: smooth` (line 40) makes the jump animate. */
    scroll-margin-top: 80px;
}

/* Decorative circles */
.sa-sim-circle-1 {
    position: absolute;
    width: 800px;
    height: 800px;
    right: -100px;
    top: -400px;
    border-radius: 50%;
    background: #00a8e8;
    opacity: 0.03;
    filter: blur(64px);
    pointer-events: none;
}

.sa-sim-circle-2 {
    position: absolute;
    width: 600px;
    height: 600px;
    left: -200px;
    bottom: -200px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.02;
    filter: blur(64px);
    pointer-events: none;
}

.sa-sim-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 100px var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-sim-inner {
        flex-direction: row;
        gap: 64px;
        padding: 128px 95px;
    }
}

/* Left column */
.sa-sim-left {
    flex: 1;
}

.sa-sim-title-white {
    font-weight: 300;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.sa-sim-title-accent {
    font-weight: 500;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}

.sa-sim-desc {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.625;
    color: rgba(255, 255, 255, 0.8);
    max-width: 508px;
    margin: 32px 0 40px;
}

/* Step cards */
.sa-sim-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 512px;
}

.sa-sim-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 17px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sa-sim-step-num {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 168, 232, 0.2);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.sa-sim-step-title {
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
}

.sa-sim-step-desc {
    font-size: 14px;
    line-height: 1.43;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0 0;
}

/* Right column — Simulator card */
.sa-sim-card {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 8px;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .sa-sim-card {
        width: 704px;
        margin-top: 45px;
    }
}

.sa-sim-card-inner {
    width: 100%;
    height: 100%;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    padding: 53px 41px;
}

.sa-sim-card-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .sa-sim-card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* Sliders */
.sa-sim-sliders {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sa-sim-slider-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.sa-sim-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.sa-sim-slider-label {
    font-weight: 600;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sa-sim-slider-value {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.33;
    color: var(--color-primary);
}

.sa-sim-slider-unit {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.33;
    color: #99a1af;
    margin-left: 4px;
}

/* Range slider */
.sa-sim-range-wrap {
    position: relative;
    width: 100%;
    height: 6px;
}

.sa-sim-range-track {
    position: absolute;
    inset: 0;
    background: #e5e7eb;
}

.sa-sim-range-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-primary);
    pointer-events: none;
}

.sa-sim-range-input {
    position: absolute;
    width: 100%;
    height: 24px;
    top: -9px;
    left: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.sa-sim-range-thumb {
    position: absolute;
    width: 18px;
    height: 18px;
    top: -6px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Result */
.sa-sim-result {
    padding-top: 25px;
    border-top: 1px solid #e5e7eb;
}

.sa-sim-result-label {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}

.sa-sim-result-name {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.25;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.sa-sim-result-series {
    font-size: 14px;
    line-height: 1.43;
    color: #6a7282;
    margin: 0;
}

/*
 * Foto da maquina recomendada (1 Set 2026). Aparece sempre — sem foto
 * carregada em Simulador > Produtos entra a nopic da casa, que o
 * Simulador_Data ja' devolve. A altura e' fixa para o cartao nao saltar ao
 * trocar de modelo.
 */
.sa-sim-result-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    margin: 0 0 14px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #eef0f2;
}

.sa-sim-result-photo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* sem foto real o marcador fica discreto: quem tem de saltar a` vista e' o
   nome do modelo, nao a silhueta */
.sa-sim-result-photo.is-nopic {
    background: #f3f6f9;
}

.sa-sim-result-photo.is-nopic img {
    max-height: 130px;
    opacity: 0.6;
}

/* Product area */
.sa-sim-product {
    position: relative;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 25px;
    gap: 16px;
}

.sa-sim-product img {
    max-width: 160px;
    max-height: 211px;
    object-fit: contain;
}

.sa-sim-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 39px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 200ms ease;
}

.sa-sim-btn:hover {
    background: #003a5a;
    color: #ffffff;
    text-decoration: none;
}

/* ============================================================================
   Cartao do engenheiro no resultado do simulador — 28 Ago 2026

   Pedido 38 da folha de melhorias: o "Talk to an Engineer" que aparece depois
   do resultado passa a mostrar a cara de um engenheiro da area, sorteado entre
   os que estao ligados a` faixa das paginas de area.

   A cor vem do gas escolhido, na variavel --eng-color que o JS poe no
   elemento. A fotografia entra pela direita e desvanece para a cor com um
   gradiente por cima -- assim serve qualquer retrato, sem depender de o fundo
   da foto combinar com o laranja ou o azul.
   ========================================================================= */
.sa-sim-eng {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    background: var(--eng-color, #00476c);
    overflow: hidden;
    min-height: 190px;
    /* O cartao todo e' o <a>. O texto ja' era branco por regras proprias, mas
       o `color` aqui e' que impede o azul de link herdado nas partes que nao
       tenham cor declarada. */
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.sa-sim-eng:hover,
.sa-sim-eng:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

/* O contorno por dentro: o cartao encosta a`s margens do passo do simulador e
   um outline por fora ficava cortado pelo overflow do cartao branco. */
.sa-sim-eng:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.sa-sim-eng-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 22px 0 22px 24px;
    /* Fica por cima do gradiente da foto: em cartoes estreitos o texto chega
       a passar por baixo dela, e assim continua legivel. */
    position: relative;
    z-index: 2;
    max-width: 62%;
}

.sa-sim-eng-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #ffffff;
}

.sa-sim-eng-title {
    margin: 4px 0 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
}

.sa-sim-eng-name {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: #ffffff;
}

/* O cargo mais apagado que o nome, para o nome ler primeiro. */
.sa-sim-eng-name span {
    display: block;
    font-size: 11px;
    opacity: 0.75;
}

.sa-sim-eng-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 200ms ease;
}

/* Deixou de ser um <a>: quem manda no estado de rato e' o cartao. */
.sa-sim-eng:hover .sa-sim-eng-link,
.sa-sim-eng:focus-visible .sa-sim-eng-link {
    border-bottom-color: #ffffff;
}

.sa-sim-eng-link svg {
    width: 7px;
    height: 14px;
    fill: #ffffff;
    transition: transform 200ms ease;
}

.sa-sim-eng:hover .sa-sim-eng-link svg {
    transform: translateX(3px);
}

.sa-sim-eng-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    z-index: 1;
}

.sa-sim-eng-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A cara em cima: um `cover` centrado corta testas em retratos verticais.
       Mas encostado ao topo (0%) sobrava ceu: as fotos da equipa sao quadradas
       de 400x400 e a caixa aqui fica em paisagem (278x198 aos 1440), por isso
       ha' 80px de folga vertical para escolher onde cortar.

       Medidos os 15 retratos, o alto da cabeca cai entre os 19px e os 38px da
       caixa. Os 20% sobem a foto 16px -- a pessoa fica mais acima, como pedido,
       e mesmo o retrato mais apertado (Guilherme Silva) ainda guarda 3px por
       cima do cabelo. Percentagem e nao pixeis de proposito: se a caixa mudar
       de forma e deixar de haver folga, a percentagem nao faz nada, enquanto
       um -16px abriria uma tira da cor de fundo em baixo. */
    object-position: center 20%;
    display: block;
    /* Sem zoom no hover, por decisao da Sofia (31 Ago 2026). O cartao inteiro
       e' clicavel, por isso a foto aproximava-se sempre que o rato passava por
       qualquer ponto dele -- movimento a mais para uma foto de uma pessoa. A
       seta do link continua a mexer, que e' onde a animacao diz alguma coisa
       (indica para onde se vai). Se um dia voltar, era
       `transition: transform 700ms ease` aqui e `scale(1.05)` no hover. */
}

@media (prefers-reduced-motion: reduce) {
    .sa-sim-eng-link svg { transition: none; }
    .sa-sim-eng:hover .sa-sim-eng-link svg { transform: none; }
}

/* O gradiente vive num pseudo-elemento do <picture> para nao precisar de mais
   um <div> no HTML que o JS monta. */
.sa-sim-eng-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                var(--eng-color, #00476c) 0%,
                rgba(255, 255, 255, 0) 62%);
    pointer-events: none;
}

/* Sem espaco para as duas colunas, a foto sai: um retrato de 90px nao se
   percebe, e o texto e o botao e' que fazem falta. */
@media (max-width: 560px) {
    .sa-sim-eng-text { max-width: 100%; padding-right: 24px; }
    .sa-sim-eng-photo { display: none; }
}

.sa-sim-btn svg {
    width: 7px;
    height: 14px;
    fill: #ffffff;
}

/* Scroll animations */
.sa-sim-animate-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: transform, opacity;
}

.sa-sim-animate-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 200ms;
    will-change: transform, opacity;
}

.sa-sim-animate-left.visible,
.sa-sim-animate-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ==============================
   Trade Show Section
   ============================== */

.sa-ts {
    position: relative;
    width: 100%;
    background: #000f18;
    font-family: var(--font-family);
}

/* Tab-switcher: all events occupy the same grid cell so the section
   sizes to the tallest event automatically. */
.sa-ts-events {
    display: grid;
    grid-template-columns: 1fr;
}

.sa-ts-event {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    min-height: 730px;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.sa-ts-event.active {
    opacity: 1;
    pointer-events: auto;
}

/* Background image */
.sa-ts-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sa-ts-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-ts-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #000f18, rgba(0, 31, 51, 0.9) 50%, rgba(0, 71, 108, 0.3));
}

/* Content */
.sa-ts-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 96px var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Texto e comerciais lado a lado so' a partir dos 1280 (era 1024 ate' 24 Set
   2026). Dois cartoes com as setas ocupam ~650px; entre 1024 e 1279 sobrava
   pouco para o texto -- a data partia em 3-4 linhas ("Sep / 29- / 30, /
   2026"), os botoes em 2 ("VIEW / PRODUCTS"), e a 1024-1080 o segundo cartao
   e a seta saiam pela direita do ecra. Nessa faixa fica a disposicao do
   tablet (texto em cima, cartoes por baixo), com as margens de desktop. */
@media (min-width: 1024px) {
    .sa-ts-inner {
        padding: 96px 95px;
    }
}

@media (min-width: 1280px) {
    .sa-ts-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
}

/* Left content */
.sa-ts-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    max-width: 672px;
}

/* Optional logo above the title */
.sa-ts-logo {
    margin-bottom: 12px;
}

.sa-ts-logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

/* Nome e ano da feira: clamp(42px, 5vw, 76px) desde 25 Set 2026 -- meio
   termo entre o original clamp(48px, 6vw, 88px), exagerado (nomes compridos
   como "Salon Del Gas Renovable" partiam em 3 linhas), e o 36/4vw/64 que se
   testou a seguir e ficou pequeno (Sofia). Acompanha a largura -- 51px a
   1024, 68 a 1366, 76 a partir de 1520 -- e acima de 1920 cresce com o
   --esc (ver o bloco dos ecras grandes). */
.sa-ts-title-light {
    font-weight: 300;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -2.25px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.sa-ts-title-bold {
    font-weight: 500;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -2.25px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

/* Info row (date + location) */
.sa-ts-info {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 640px) {
    .sa-ts-info {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }
}

.sa-ts-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sa-ts-info-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.sa-ts-info-icon svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    stroke-width: 1.67;
    fill: none;
}

.sa-ts-info-label {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    line-height: 1.2;
}

.sa-ts-info-value {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin: 4px 0 0;
    line-height: 1.2;
}

.sa-ts-info-divider {
    display: none;
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 640px) {
    .sa-ts-info-divider {
        display: block;
    }
}

/* Button */
.sa-ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 44px;
    padding: 0 24px;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.sa-ts-btn:hover {
    opacity: 0.9;
    color: #ffffff;
    text-decoration: none;
}

.sa-ts-btn svg {
    width: 7px;
    height: 14px;
    fill: #ffffff;
}

/* Os dois botoes do evento: empilhados no telemovel, lado a lado a partir dos
   640px -- como no prototipo. */
.sa-ts-btns {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 640px) {
    .sa-ts-btns { flex-direction: row; }
}

/* "All trade shows" — vai para a pagina 123. Secundario em relacao ao
   "View Products": contorno em vez de cheio, sobre o fundo escuro da seccao. */
.sa-ts-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 200ms ease;
}

.sa-ts-btn--ghost:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.sa-ts-btn--ghost svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
}

/* Right content — rep carousel */
.sa-ts-reps-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    --sa-ts-card-w: 270px;
    --sa-ts-card-gap: 24px;
    --sa-ts-page-w: calc(var(--sa-ts-card-w) * 2 + var(--sa-ts-card-gap) * 2);
}

.sa-ts-reps-viewport {
    width: calc(var(--sa-ts-card-w) * 2 + var(--sa-ts-card-gap));
    overflow: hidden;
}

.sa-ts-reps-track {
    display: flex;
    gap: var(--sa-ts-card-gap);
    transition: transform 400ms ease;
    will-change: transform;
}

/* Rep card */
.sa-ts-rep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Cartao em coluna flex, NAO em posicoes absolutas. A versao anterior tinha a
   foto a top:26/height:217 e o texto ancorado ao fundo (bottom:14): com um
   cargo de duas linhas ("Application Engineer Industrial Division") o bloco de
   texto crescia PARA CIMA e o nome ficava escrito por cima da foto. Em coluna,
   e a foto (flex:1) que cede os ~18px da linha extra -- object-fit:cover corta
   um pouco mais e mais nada muda. O cartao mantem os 338px fixos, senao os
   botoes "Book a Meeting" da fila ficavam desalinhados entre cartoes. */
.sa-ts-rep-card {
    position: relative;
    width: var(--sa-ts-card-w, 270px);
    height: 338px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 14px;
    box-sizing: border-box;
}

.sa-ts-rep-img {
    /* relative e obrigatorio: o .sa-ts-rep-img-overlay (inset:0) vive la
       dentro e sem isto passava a colar-se ao cartao inteiro. */
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* 24px repoe a foto nos ~217px de sempre quando o cargo tem 1 linha
       (298px de conteudo - ~57px de texto - 24 = 217). */
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sa-ts-rep-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.sa-ts-rep-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 71, 108, 0.7));
}

.sa-ts-rep-info {
    flex: 0 0 auto;
}

.sa-ts-rep-name {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #ffffff;
    margin: 0 0 4px;
}

/* Cargo como vem do backoffice (so' as iniciais em maiusculas), mais pequeno
   e mais leve que o nome. O email saiu do cartao (25 Set 2026). */
.sa-ts-rep-role {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Book meeting button */
.sa-ts-rep-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sa-ts-card-w, 270px);
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.sa-ts-rep-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
}

/* Scroll animation */
.sa-ts-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 800ms ease, transform 800ms ease;
    will-change: transform, opacity;
}

.sa-ts-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.sa-ts-animate-delay-1 { transition-delay: 200ms; }

/* Carousel arrows */
.sa-ts-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.sa-ts-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.sa-ts-arrow svg {
    width: 14px;
    height: 14px;
}

/* Event tabs (multi-event switcher) */
.sa-ts-tabs {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    z-index: 3;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    pointer-events: none;
}

@media (min-width: 1024px) {
    .sa-ts-tabs {
        padding: 0 95px;
        bottom: 80px;
    }
}

.sa-ts-tab {
    position: relative;
    padding-top: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    pointer-events: auto;
    transition: color 200ms ease;
}

.sa-ts-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.sa-ts-tab.active {
    color: #ffffff;
}

.sa-ts-tab.active::before {
    background: #ffffff;
}

.sa-ts-tab:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Espaco reservado para as tabs (24 Set 2026, pedido do cliente: "o botao
   aparece sobreposto com o nome das feiras").

   As tabs sao `position: absolute` a 64px/80px do fundo, mas o conteudo de
   cada feira so' tinha 96px de padding em baixo -- e as tabs acabam a ~116px
   (80 + 12 de padding-top + a linha). Medido a 24 Set em 28 larguras
   (320->3840): sempre que o titulo ocupa duas linhas o conteudo enche a caixa
   e os botoes ficavam 8-30px por baixo das tabs (em telemovel, 35px por cima do
   "Book a Meeting"). So' nao se via com nomes curtos, como os do prototipo.

   Agora o fundo do conteudo reserva: distancia das tabs ao fundo + altura
   REAL das tabs + folga. A altura vem do JS do section-trade-show.tpl
   (--sa-ts-tabs-h), porque em telemovel as tabs partem em duas linhas; os
   40px sao so' para o caso de o JS nao correr. Sem tabs (uma feira so') o
   :has() nao apanha e fica tudo como estava. As tabs nao mudam de sitio --
   quando o conteudo precisa, e' a faixa que cresce. */
.sa-ts:has(.sa-ts-tabs) .sa-ts-inner {
    padding-bottom: calc(64px + var(--sa-ts-tabs-h, 40px) + 24px);
}

@media (min-width: 1024px) {
    .sa-ts:has(.sa-ts-tabs) .sa-ts-inner {
        padding-bottom: calc(80px + var(--sa-ts-tabs-h, 40px) + 32px);
    }
}

/* Mobile carousel sizing — 2 cards still visible, cards shrink */
@media (max-width: 767px) {
    /* UM cartao de cada vez.
       -------------------------------------------------------------------
       Ate 2 Set 2026 este bloco encolhia o cartao para `--sa-ts-card-w:
       130px` para caberem DOIS lado a lado, porque o JS tinha o `pageSize`
       fixo em 2. O preco era alto: num ecra de 390px as duas setas comem 68
       e sobram 272 para dois cartoes -- 130x338 cada um, com a fotografia
       reduzida a 76x125 e o nome a 12px. Dois cartoes altos e estreitos.

       Agora o viewport ocupa o que sobra entre as setas e o cartao enche-o:
       ~290px em vez de 130, e a fotografia mais do que triplica.

       O `width: 100%` do cartao resolve-se contra o .sa-ts-reps-track, que
       e' um bloco de largura automatica dentro do viewport -- ou seja, um
       cartao = um viewport. Os tres continuam em fila e a passar por
       transform; o que muda e' quantos se veem de cada vez.

       O passo do carrossel deixou de sair do --sa-ts-page-w e passa a ser
       medido no DOM pelo JS do section-trade-show.tpl (em desktop da' o
       mesmo numero que dava: (270+24)*2 = 588). */
    .sa-ts-reps-wrap {
        --sa-ts-card-gap: 12px;
        gap: 8px;
    }

    .sa-ts-reps-viewport {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .sa-ts-rep,
    .sa-ts-rep-card {
        width: 100%;
    }

    .sa-ts-arrow {
        width: 26px;
        height: 26px;
    }

    .sa-ts-arrow svg {
        width: 12px;
        height: 12px;
    }
}

/* O .sa-ts-arrow e' `display: flex`, e isso ganha ao `display: none` que o
   browser da' a `[hidden]`. Sem esta regra, esconder uma seta pelo JS nao
   fazia nada. O JS usa-a quando so' ha' uma pagina. */
.sa-ts-arrow[hidden] {
    display: none;
}

/* ==============================
   Sectors Section (GSAP scroll-pinned)
   ============================== */

.sa-sectors {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
    font-family: var(--font-family);
}

/* Card — absolute stacked */
.sa-sectors-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
}

/* ============================================================================
   Sectors card — REFACTORED 24 Aug 2026

   Every child used to be absolutely positioned at a hard pixel offset (title at
   top:212, desc at 302, subdesc at 405, products at 501, CTA at 591) inside a
   100vh section, while the nav dots were anchored to the BOTTOM. Those two
   anchors move towards each other as the window gets shorter, so on a laptop
   (1280x700) the circles landed on top of the "Learn more about..." button.
   The numbers only ever worked at roughly 812px of viewport height.

   It is now a two-column grid: text in column 1, photo in column 2, vertically
   centred, with the bottom padding reserving the strip the nav dots live in.
   Nothing is position:absolute any more, so nothing can collide.

   The card itself stays position:absolute/inset:0 — the GSAP cross-fade depends
   on the three cards being stacked.
   ========================================================================= */

.sa-sectors-card-inner {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    /* padding-bottom reserves the nav strip (dots are 38px, sitting ~56px up) so
       the CTA can never reach them, at any viewport height. */
    padding: 0 var(--container-padding) 136px;
    display: flex;
    align-items: center;
    gap: 56px;
}

/* The copy column. Its own flex column, so the photo beside it is a single
   sibling box and can simply centre itself -- no row-spanning involved. */
.sa-sectors-text {
    flex: 0 1 46%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* Title */
.sa-sectors-title {
    font-weight: 500;
    /* also clamped against viewport HEIGHT: on a short laptop a 64px heading is
       what pushes the rest of the column into the nav. */
    font-size: clamp(32px, min(4.5vw, 7vh), 64px);
    line-height: 1.15;
    letter-spacing: -2.25px;
    text-transform: uppercase;
    margin: 0;
}

/* Description */
.sa-sectors-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: #1c1c1c;
    margin: 0;
}

/* Sub description */
.sa-sectors-subdesc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: #1c1c1c;
    margin: 0;
}

/* Product list */
.sa-sectors-products {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 40px;
}

.sa-sectors-products-row {
    display: contents;
}

/* Cada produto e' um link para a sua pagina (28 Ago 2026). Antes eram <span>
   e o primeiro vinha com "[ ]" e a cor do sector escritos em PHP -- uma enfase
   que caia no primeiro por acaso. Agora e' o :hover/:focus-visible que a leva,
   e passa a querer dizer alguma coisa. */
.sa-sectors-product-item {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    transition: color .18s ease;
}

/* Os parenteses estao SEMPRE no documento, so' invisiveis, para ocuparem o
   espaco desde o inicio. Se aparecessem apenas no hover, a linha reflowia por
   baixo do rato e o item fugia do cursor. Vao em ::before/::after e nao no
   HTML porque sao decoracao: nao entram no texto que o leitor de ecra le'. */
.sa-sectors-product-item::before { content: '[ '; }
.sa-sectors-product-item::after  { content: ' ]'; }

.sa-sectors-product-item::before,
.sa-sectors-product-item::after {
    opacity: 0;
    transition: opacity .18s ease;
}

/* Repara que o peso da letra NAO muda. O desenho original punha 500 no item
   realcado, mas com o realce a seguir o rato isso mexia na largura do texto e
   a lista inteira dancava a cada passagem. A cor mais os parenteses chegam
   para a enfase, e ficam estaveis. */
.sa-sectors-product-item:hover,
.sa-sectors-product-item:focus-visible {
    color: var(--sector-color, var(--color-text));
}

.sa-sectors-product-item:hover::before,
.sa-sectors-product-item:hover::after,
.sa-sectors-product-item:focus-visible::before,
.sa-sectors-product-item:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sa-sectors-product-item,
    .sa-sectors-product-item::before,
    .sa-sectors-product-item::after { transition: none; }
}

/* CTA button */
/* O botao mantem os 382x64 do desenho enquanto o rotulo couber. O que muda:
   - `min-width`/`width:auto` em vez de largura fixa -> cresce se o rotulo for
     maior (ex.: a traducao PT e mais comprida que a EN);
   - `min-height` em vez de altura fixa -> se ainda assim quebrar para duas
     linhas, o botao cresce em vez de cortar o texto;
   - padding horizontal -> o texto deixa de tocar nas bordas nas larguras a que
     a coluna de 46% aperta (entre 1024 e ~1280px).
   O mobile (<=1023px) ja fazia isto; faltava so na versao de duas colunas. */
.sa-sectors-cta {
    margin-top: 6px;
    min-height: 64px;
    height: auto;
    width: auto;
    min-width: min(382px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.sa-sectors-cta:hover {
    opacity: 0.9;
    text-decoration: none;
}

.sa-sectors-cta span {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #ffffff;
    /* centra as duas linhas quando um rotulo comprido quebra */
    text-align: center;
}

.sa-sectors-cta svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: none;
}

/* Product image — column 2.
   Ja nao precisa de !important: o sectorsAction deixou de escrever a caixa
   absoluta antiga (left:708px; width:1024px; height:720px) no atributo style.
   >>> Por isso este ficheiro tem de ser o ULTIMO a subir. Ver a nota de ordem
   >>> no bloco @media (min-width:1024px) mais abaixo. */
.sa-sectors-img {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    width: 100%;
    /* height follows the window so the photo shrinks on a laptop instead of
       forcing the column taller. */
    height: min(58vh, 520px);
    overflow: hidden;
    pointer-events: none;
}

.sa-sectors-img img {
    width: 100%;
    height: 100%;
}

/* Navigation dots */
.sa-sectors-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 56px;
    width: 100%;
    max-width: var(--container-max);
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 100;
    pointer-events: auto;
}

.sa-sectors-nav-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.sa-sectors-nav-circle {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-sectors-nav-circle svg {
    position: absolute;
    inset: 0;
}

.sa-sectors-nav-num {
    position: relative;
    z-index: 1;
    font-weight: 300;
    font-size: 12px;
    line-height: 1;
}

.sa-sectors-nav-label {
    font-weight: 300;
    font-size: 13px;
    line-height: 25px;
}

/* --- Desktop: as duas colunas ------------------------------------------------
   O .sa-sectors-text ja declarava `flex: 0 1 46%` mas NUNCA teve 46%.
   O .sa-sectors-img tinha `flex: 1 1 auto` + `width: 100%`, e com base `auto`
   a base de um item flex e a sua largura -- ou seja, 100%. Ficava 100% contra
   46% a disputar o espaco, e no encolhimento a imagem levava a melhor.
   Medido ao vivo a 1440: texto 405px de 1325 (30%), imagem 869px (66%).

   E era tambem isto que descaia a maquina para a esquerda. Com a caixa da
   imagem a 66%, ela comecava aos 34% e o centro dela caia nos 67% da largura
   do cartao. A metade direita centra-se nos 75%. Davam 105px a esquerda, em
   todas as resolucoes e nos tres sectores.

   Com uma base explicita nos dois lados o centro passa para 74%.

   Ha aqui um compromisso que nao tem volta: para a maquina ficar centrada na
   metade direita, a caixa nao pode passar dos ~54%, e isso limita-a a ~440px
   de altura. Mais larga = maior, mas mais a esquerda. Escolhido 46/54.

   Sao 46/54 e nao 50/50 porque a 50/50 a maquina encolhia para 409px sem
   ganhar posicao (76% em vez de 74%) -- pior nas duas contas.

   Fora do @media para o telemovel nao ser afectado: la o cartao e uma coluna
   (flex-direction: column) e uma base em % passaria a ler-se contra a ALTURA. */
@media (min-width: 1024px) {
    .sa-sectors-text { flex: 1 1 46%; }
    .sa-sectors-img  { flex: 1 1 54%; width: auto; }
}

/* --- Laptop / short windows ------------------------------------------------
   Below ~820px of viewport height there is not enough room for the full-size
   type plus the photo plus the nav strip. Tighten rather than overflow. */
@media (min-width: 1024px) and (max-height: 820px) {
    .sa-sectors-card-inner {
        padding-bottom: 116px;
        row-gap: 14px;
    }

    .sa-sectors-desc,
    .sa-sectors-subdesc {
        font-size: 15px;
        line-height: 1.6;
    }

    /* min-height, nao height: senao voltava a altura fixa e o rotulo a duas
       linhas era cortado outra vez nos portateis baixos. */
    .sa-sectors-cta {
        min-height: 56px;
    }

    .sa-sectors-nav {
        bottom: 40px;
    }
}

/* --- Tablet and phone ------------------------------------------------------
   One column, photo between the copy and the product list, nav dots dropped
   (the scroll-pinned stack they drive is desktop-only — see the matchMedia
   guard in section-sectors.tpl, which stops GSAP below 1024px). */
@media (max-width: 1023px) {
    .sa-sectors {
        height: auto;
    }

    .sa-sectors-card {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
    }

    .sa-sectors-card-inner {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 56px var(--container-padding-mobile) 64px;
    }

    /* The copy box stops being a column of its own so the photo can sit BETWEEN
       the description and the product list rather than after all of it. */
    .sa-sectors-text {
        display: contents;
    }

    /* Reading order: heading, copy, photo, product list, CTA. */
    .sa-sectors-title    { order: 1; font-size: clamp(30px, 8vw, 44px); letter-spacing: -1px; }
    .sa-sectors-desc     { order: 2; }
    .sa-sectors-subdesc  { order: 3; }
    .sa-sectors-img      { order: 4; height: 220px !important; }
    .sa-sectors-products { order: 5; column-gap: 24px; }
    .sa-sectors-cta      { order: 6; }

    /* Full-width tap target. space-between keeps the arrow clear of the label
       when a long CTA wraps to two lines. */
    .sa-sectors-cta {
        width: 100%;
        height: auto;
        min-height: 56px;
        justify-content: space-between;
        padding: 14px 20px;
    }

    .sa-sectors-nav {
        display: none;
    }
}

/* Tablet: a touch more room than a phone. */
@media (min-width: 768px) and (max-width: 1023px) {
    .sa-sectors-card-inner {
        padding: 72px var(--container-padding-mobile) 80px;
    }

    .sa-sectors-img {
        height: 300px !important;
    }

    .sa-sectors-cta {
        width: 382px;
        align-self: flex-start;
        justify-content: center;
    }
}

/* ==============================
   Numbers Section
   ============================== */

.sa-numbers {
    width: 100%;
    background: var(--color-primary);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-numbers-inner {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.sa-numbers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .sa-numbers-grid {
        /* auto-fit para acompanhar o numero de banners da categoria "Numbers"
           (passou de 4 para 5 quando o cliente juntou os colaboradores). */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.sa-numbers-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sa-numbers-value {
    font-weight: 500;
    /* fluido: passaram a ser 5 numeros em vez de 4, logo cada coluna e mais
       estreita e o valor mais largo ("4500+"). 60px fixos transbordavam entre
       os ~768px e os ~1200px. Mantem os 60px no desktop grande e encolhe
       sozinho a partir dai. */
    font-size: clamp(32px, 3.6vw, 60px);
    line-height: 1;
    color: #ffffff;
    margin-bottom: 8px;
}

.sa-numbers-label {
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.8);
}

/* ==============================
   Innovation Section
   ============================== */

.sa-innov {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-innov-bg {
    position: absolute;
    inset: 0;
}

.sa-innov-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-innov-content {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max);
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 1024px) {
    .sa-innov-content {
        padding: 0 var(--container-padding);
    }
}

.sa-innov-title {
    font-weight: 400;
    font-size: 40px;
    line-height: 0.8;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.sa-innov-subtitle {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

@media (max-width: 767px) {
    .sa-innov {
        height: 450px;
    }

    .sa-innov-title {
        font-size: 28px;
    }

    .sa-innov-content {
        bottom: 48px;
    }
}

/* --- Innovation: video variant --------------------------------------------
   O filme tem texto GRAVADO na imagem, por isso nao pode ser cortado de todo.
   A seccao segue o racio do ficheiro (1920x1080 = 16/9) em qualquer largura,
   e assim o object-fit: cover nunca tem nada que cortar.

   Havia aqui um max-height: 700px. Resolvia o corte lateral nos ecras estreitos
   mas criava um corte VERTICAL nos largos, porque a faixa ficava presa nos
   700px enquanto a largura continuava a crescer. Medido, com o corte em cima
   e em baixo:

       1280   10px      1920   190px  (35% da altura do filme perdida)
       1440   55px      2560   370px  (69% perdida)
                        3440   618px

   Sem o cap, a altura passa a acompanhar: 1920 -> 1080px, 2560 -> 1440px,
   3440 -> 1935px. E uma faixa alta nos ecras grandes -- de proposito, e o que
   custa mostrar o filme inteiro.

   Fica DEPOIS do bloco de telemovel de proposito: mesma especificidade, tem de
   vir a seguir para ganhar ao height: 450px de la.
   -------------------------------------------------------------------------- */
.sa-innov-has-video {
    height: auto;
    aspect-ratio: 16 / 9;
    background: #0b1b26;
}

.sa-innov-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pause toggle. WCAG 2.2.2 requires a way to stop anything that auto-plays and
   moves for more than 5 seconds. Kept small and quiet until hovered or focused:
   it is a control, not a call to action. */
.sa-innov-toggle {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.sa-innov-toggle:hover,
.sa-innov-toggle:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
}

.sa-innov-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* The icon shows what the button WILL do, not what is happening. */
.sa-innov-ico-pause { display: none; }
.sa-innov-ico-play  { display: block; margin-left: 2px; }
.sa-innov.is-playing .sa-innov-ico-pause { display: block; }
.sa-innov.is-playing .sa-innov-ico-play  { display: none; }

@media (max-width: 767px) {
    .sa-innov-toggle {
        right: 16px;
        bottom: 16px;
        width: 34px;
        height: 34px;
    }
}

/* ==============================
   Application Banner Section
   ============================== */

.sa-appbanner {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-appbanner-bg {
    position: absolute;
    inset: 0;
}

.sa-appbanner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-appbanner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.sa-appbanner-content {
    position: absolute;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container-max);
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 1024px) {
    .sa-appbanner-content {
        padding: 0 var(--container-padding);
    }
}

.sa-appbanner-title {
    font-weight: 500;
    font-size: 60px;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.9;
    margin: 0;
}

.sa-appbanner-title .sa-app-light {
    font-weight: 300;
}

.sa-appbanner-subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

@media (max-width: 767px) {
    .sa-appbanner {
        height: 500px;
    }

    .sa-appbanner-title {
        font-size: 36px;
    }

    .sa-appbanner-content {
        bottom: 48px;
    }
}

/* ==============================
   Global Network Map Section
   ============================== */

.sa-globe {
    width: 100%;
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-globe-header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
    margin-bottom: 48px;
}

.sa-globe-title {
    font-size: 48px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.sa-globe-title span {
    font-weight: 300;
}

.sa-globe-title strong {
    font-weight: 500;
}

.sa-globe-subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.55;
    color: var(--color-text);
    margin: 0;
}

/* Map container */
.sa-globe-map {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}

.sa-globe-map-inner {
    position: relative;
    width: 100%;
    height: 700px;
    background: #000000;
    box-shadow: 0 0 80px rgba(0, 168, 232, 0.2);
    overflow: hidden;
}

.sa-globe-map-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 20;
}

.sa-globe-canvas {
    width: 100%;
    height: 100%;
    cursor: grab;
    /* Horizontal drags rotate the globe; vertical swipes still scroll the page.
       Without this the browser claims the gesture and the globe cannot be turned
       by finger even though the touch handlers are bound. Affects touch input
       only, so mouse behaviour is unchanged. */
    touch-action: pan-y;
}

.sa-globe-canvas.grabbing {
    cursor: grabbing;
}

.sa-globe-canvas.pointer {
    cursor: pointer;
}

/* Stats top-right */
.sa-globe-stats {
    position: absolute;
    top: 33px;
    right: 60px;
    display: flex;
    gap: 24px;
    z-index: 10;
    pointer-events: none;
}

.sa-globe-stat {
    text-align: right;
}

.sa-globe-stat-val {
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    color: #ffffff;
}

.sa-globe-stat-label {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #99a1af;
}

/* Country selector — searchable, region-grouped list (scales to any # of countries) */
/* Sedes mode (component:/cms/globalMap/sedes/1/) — the offices as a badge row
   centred along the bottom of the map, replacing the top-left selector panel.
   Buttons keep .sa-globe-loc-btn so the shared active/click logic still applies;
   these rules override the full-list block/left-aligned styling. */
.sa-globe-badges {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: calc(100% - 48px);
    z-index: 10;
}

.sa-globe-badges .sa-globe-loc-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: rgba(0, 12, 24, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.sa-globe-badges .sa-globe-loc-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.sa-globe-badges .sa-globe-loc-btn.active {
    background: #00a8e8;
    border-color: #00a8e8;
    color: #ffffff;
}

@media (max-width: 767px) {
    .sa-globe-badges { bottom: 16px; gap: 8px; max-width: calc(100% - 24px); }
    .sa-globe-badges .sa-globe-loc-btn { padding: 7px 12px; font-size: 11px; letter-spacing: .6px; }
}

/* Phone-only control (revealed in the max-width:767 block). Hidden by default so
   the desktop sidebar is completely unaffected. */
.sa-globe-sel-toggle {
    display: none;
}

.sa-globe-selector {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 240px;
    max-height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    background: rgba(0, 12, 24, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10;
    overflow: hidden;
}

.sa-globe-search {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.sa-globe-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    outline: none;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 12px;
    letter-spacing: 0.4px;
}

.sa-globe-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.sa-globe-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.sa-globe-list-region {
    position: sticky;
    top: 0;
    padding: 8px 14px 4px;
    background: rgba(0, 12, 24, 0.92);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00a8e8;
}

.sa-globe-loc-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 150ms ease, color 150ms ease;
}

.sa-globe-loc-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sa-globe-loc-btn.active {
    background: #00a8e8;
    color: #ffffff;
}

.sa-globe-list-empty {
    padding: 16px 14px;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-family);
    font-size: 12px;
}

@media (max-width: 768px) {
    .sa-globe-selector {
        top: auto;
        bottom: 16px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 45%;
    }
}

/* Side panel */
.sa-globe-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 26px 30px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 300ms ease;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .sa-globe-panel {
        width: 600px;
    }
}

.sa-globe-panel.open {
    transform: translateX(0);
}

.sa-globe-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
    font-size: 24px;
    line-height: 1;
    z-index: 50;
    transition: color 200ms ease;
}

.sa-globe-panel-close:hover {
    color: #ffffff;
}

/* Sleek scrollbars for the globe country list + detail panel — replaces the
   clunky default browser bar (most visible on big desktop). Thin, subtle,
   themes to cyan on hover. */
.sa-globe-list,
.sa-globe-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}
.sa-globe-list::-webkit-scrollbar,
.sa-globe-panel::-webkit-scrollbar {
    width: 6px;
}
.sa-globe-list::-webkit-scrollbar-track,
.sa-globe-panel::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0;
}
.sa-globe-list::-webkit-scrollbar-thumb,
.sa-globe-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border: none;
}
.sa-globe-list:hover::-webkit-scrollbar-thumb,
.sa-globe-panel:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 232, 0.55);
}

.sa-globe-panel-region {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00a8e8;
    margin: 4px 0 6px;
}

.sa-globe-panel-name {
    font-weight: 900;
    font-size: 30px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.02;
    margin: 0 0 10px;
}

.sa-globe-panel-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #ffffff;
}

/* Office address — only rendered by the Contacts globe (sedes mode). */
/* Subtitulo do painel em modo sedes: "Portugal HQ" numa sede, a cidade
   ("Bruges") num representante. Fica entre o nome do pais e a morada. */
/* Texto livre do pais, no painel do globo. Entra logo apos os sectores. */
.sa-globe-panel-texto {
    margin: 14px 0 4px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* "Talk to an Engineer" -- fecha o painel, no lugar onde estavam os
   comerciais do pais. Largura toda para nao competir com os cartoes de
   projecto que ficam por cima. */
.sa-globe-panel-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    min-height: 48px;
    padding: 12px 20px;
    background: var(--color-orange, #ED6E00);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.sa-globe-panel-cta:hover,
.sa-globe-panel-cta:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.88;
}

.sa-globe-panel-sede {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #ffffff;
}

/* Email do painel. Os representantes nao tem morada nenhuma, so isto. */
.sa-globe-panel-email {
    display: inline-block;
    margin: 8px 0 4px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sa-globe-panel-email:hover,
.sa-globe-panel-email:focus {
    color: #ffffff;
}

.sa-globe-panel-morada {
    margin: 10px 0 4px;
    padding-left: 12px;
    border-left: 3px solid var(--color-orange);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}

/* Panel stats */
/* Tantas colunas quantos os cartoes, em vez de duas fixas. Desde que o cartao
   "Status: Active" saiu ficou aqui um so', e com as duas colunas fixas ele
   ficava encolhido a meia largura com o outro meio vazio. Assim serve para um
   ou para dois, se algum dia voltar a haver dois. */
.sa-globe-panel-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px;
    margin: 18px 0;
}

.sa-globe-panel-stat-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sa-globe-panel-stat-val {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: #ffffff;
}

.sa-globe-panel-stat-label {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-top: 2px;
}

/* Panel sections */
.sa-globe-panel-section-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Project cards (horizontal scroll) */
.sa-globe-panel-projects {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sa-globe-panel-projects::-webkit-scrollbar {
    display: none;
}

.sa-globe-panel-project {
    min-width: 168px;
    width: 168px;
    cursor: pointer;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.sa-globe-panel-project img {
    display: block;
    width: 100%;
    height: 94px;
    object-fit: cover;
    margin-bottom: 8px;
    filter: brightness(0.82);
    transition: filter 300ms ease, transform 500ms ease;
}

.sa-globe-panel-project:hover img {
    filter: brightness(1);
}

.sa-globe-panel-project span {
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    transition: color 300ms ease;
    display: block;
    line-height: 1.3;
}

.sa-globe-panel-project:hover span {
    color: #00a8e8;
}

/* Rep cards — compact horizontal (photo left, details right); horizontal scroll */
.sa-globe-panel-reps {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sa-globe-panel-reps::-webkit-scrollbar {
    display: none;
}

.sa-globe-panel-rep {
    min-width: 272px;
    width: 272px;
    padding: 14px;
    background: rgba(217, 217, 217, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    grid-template-columns: 72px 1fr;
    grid-template-areas:
        "img name"
        "img role"
        "img email";
    column-gap: 14px;
    align-content: center;
    scroll-snap-align: start;
    text-align: left;
}

.sa-globe-panel-rep img {
    grid-area: img;
    align-self: center;
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
    flex-shrink: 0;
}

.sa-globe-panel-rep-name {
    grid-area: name;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.6px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.sa-globe-panel-rep-role {
    grid-area: role;
    font-weight: 300;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
}

.sa-globe-panel-rep-email {
    grid-area: email;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.3px;
    color: #00a8e8;
    transition: color 200ms ease;
    word-break: break-all;
}

.sa-globe-panel-rep-email:hover {
    color: #ffffff;
    cursor: pointer;
}

@media (max-width: 767px) {
    /* --- Phone: the country filter moves OUT of the map ----------------------
       It used to float over the bottom 45% of a 500px map, leaving ~275px of
       globe and covering the part you were trying to look at. Here the box grows
       to fit its contents, the canvas keeps a fixed drawing height, and the
       filter drops into normal flow underneath it -- so the whole globe stays
       visible and the list gets its own scroll.

       This is why resize() in section-global-map.tpl now measures the canvas
       instead of this container: the container is taller than the globe. */
    .sa-globe-map-inner {
        height: auto;
    }

    .sa-globe-canvas {
        height: 360px;
    }

    .sa-globe-sel-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 16px;
        background: rgba(0, 12, 24, 0.96);
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        cursor: pointer;
    }

    .sa-globe-sel-toggle-caret {
        transition: transform 200ms ease;
    }

    .sa-globe-sel-toggle[aria-expanded="true"] .sa-globe-sel-toggle-caret {
        transform: rotate(180deg);
    }

    /* Collapsed until the toggle above opens it. */
    .sa-globe-selector {
        display: none;
        position: static;
        width: auto;
        max-height: none;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        /* Solid rather than translucent: it is no longer floating over the
           globe, so the blur bought nothing and cost legibility. */
        background: rgba(0, 12, 24, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Cap the list itself, not the panel, so the search box stays put while the
       countries scroll under it. */
    .sa-globe-selector.is-open {
        display: flex;
    }

    .sa-globe-list {
        max-height: 220px;
    }

    .sa-globe-title {
        font-size: 32px;
    }

    .sa-globe-stats {
        right: 16px;
    }
}

/* ==============================
   Cards Carousel (News / Case Studies)
   ============================== */

.sa-cards {
    position: relative;
    width: 100%;
    height: 829px;
    background: #ffffff;
    font-family: var(--font-family);
    overflow: hidden;
}

/* Dark variant (Case Studies) */
.sa-cards--dark {
    background: var(--color-primary);
}

/* Left column */
.sa-cards-viewall {
    position: absolute;
    left: 95px;
    top: 87px;
    height: 44px;
    width: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    z-index: 20;
    transition: background-color 200ms ease;
    text-decoration: none;
}

.sa-cards-viewall span {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    transition: color 200ms ease;
}

.sa-cards-viewall:hover {
    background: var(--color-primary);
}

.sa-cards-viewall:hover span {
    color: #ffffff;
}

.sa-cards--dark .sa-cards-viewall {
    border-color: #ffffff;
}

.sa-cards--dark .sa-cards-viewall span {
    color: #ffffff;
}

.sa-cards--dark .sa-cards-viewall:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Title */
.sa-cards-title {
    position: absolute;
    left: 95px;
    top: 162px;
    font-size: 48px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 20;
}

.sa-cards-title-light {
    font-weight: 300;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
}

.sa-cards-title-bold {
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
}

.sa-cards--dark .sa-cards-title-light,
.sa-cards--dark .sa-cards-title-bold {
    color: #ffffff;
}

/* Arrow buttons */
.sa-cards-arrows {
    position: absolute;
    left: 95px;
    top: 682px;
    display: flex;
    z-index: 20;
}

.sa-cards-arrow {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.sa-cards-arrow:hover {
    background: #003350;
}

/* The rail script hides the pair when nothing overflows, and disables whichever
   end you have reached. [hidden] needs an explicit rule because .sa-cards-arrows
   sets display:flex, which beats the UA's [hidden] { display: none }. */
.sa-cards-arrows[hidden] {
    display: none;
}

.sa-cards-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.sa-cards-arrow:disabled:hover {
    background: var(--color-primary);
}

.sa-cards--dark .sa-cards-arrow:disabled:hover {
    background: #ffffff;
}

.sa-cards-arrow svg {
    width: 19px;
    height: 19px;
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: none;
}

.sa-cards-arrow--left svg {
    transform: rotate(180deg);
}

.sa-cards--dark .sa-cards-arrow {
    background: #ffffff;
}

.sa-cards--dark .sa-cards-arrow:hover {
    background: #f0f0f0;
}

.sa-cards--dark .sa-cards-arrow svg {
    stroke: var(--color-primary);
}

/* Card area background */
.sa-cards-area {
    position: absolute;
    left: 352px;
    top: 87px;
    right: 0;
    height: 655px;
    background: #fafafa;
    z-index: 0;
}

.sa-cards--dark .sa-cards-area {
    background: transparent;
}

/* Scrollable container */
.sa-cards-scroll {
    position: absolute;
    left: 404px;
    top: 138px;
    right: 0;
    display: flex;
    align-items: flex-start;
    gap: 52px;
    overflow-x: auto;
    z-index: 10;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 16px;
}

.sa-cards-scroll::-webkit-scrollbar {
    display: none;
}

/* Card */
.sa-cards-card {
    min-width: 336px;
    width: 336px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;   /* anchor for the stretched "Read more" link below */
}

/*
 * Whole card clickable.
 *
 * The "Read more" <a> is stretched over the entire card with a pseudo-element
 * instead of wrapping the card in another <a> — that would nest anchors, which
 * is invalid HTML. This keeps ONE real link per card, so keyboard tabbing,
 * middle-click / open-in-new-tab and crawlers all behave exactly as before.
 *
 * A pseudo-element counts as part of its originating element for hit-testing,
 * so hovering anywhere on the card also fires .sa-cards-readmore:hover — the
 * button's border highlight now tracks the whole card for free, matching the
 * image zoom that already ran off .sa-cards-card:hover.
 *
 * z-index 1 lifts it over .sa-cards-card-img (position: relative) and the
 * .sa-cards-badge, so the image and the "highlight" badge are clickable too.
 */
.sa-cards-readmore::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Card image */
.sa-cards-card-img {
    /* The images are event banners with the text BAKED IN -- stand numbers,
       names, dates. At the old fixed 336x226 (ratio 1.49) against a 1130x620
       source (1.82), object-fit:cover shaved ~18% off each side and cut straight
       through that text ("...er Asquini", "OCES DE LA NDUSTRIA").
       Matching the box to the source means cover has nothing to crop, and the
       ratio holds at whatever width the card takes. */
    aspect-ratio: 1130 / 620;
    height: auto;
    width: 100%;
    overflow: hidden;
    background: var(--color-primary);
    position: relative;
    flex-shrink: 0;
}

.sa-cards--dark .sa-cards-card-img {
    background: #001f33;
}

.sa-cards-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.sa-cards-card:hover .sa-cards-card-img img {
    transform: scale(1.1);
}

/* Highlight badge */
.sa-cards-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 44px;
    width: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    z-index: 10;
}

.sa-cards--dark .sa-cards-badge {
    background: #ffffff;
}

.sa-cards-badge span {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Card title */
.sa-cards-card-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 48px;
    min-height: 96px;       /* reserve 2 lines so short + long titles align */
    color: var(--color-primary);
    margin: 11px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-cards--dark .sa-cards-card-title {
    color: #ffffff;
}

/* Card description */
.sa-cards-card-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 25px;
    color: #9c9da5;
    margin: 0;
    width: 336px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-cards--dark .sa-cards-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Read more button */
.sa-cards-readmore {
    width: 188px;
    height: 53px;
    border: 1px solid #ecf0f3;
    display: flex;
    align-items: center;
    margin-top: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 200ms ease;
}

.sa-cards-readmore:hover {
    border-color: var(--color-primary);
    text-decoration: none;
}

/* Case studies only (the dark variant on the homepage). Its label is
   "Download PDF" / "Descarregar PDF" rather than the news card's "Read more",
   and at 188px the Portuguese label left just 9px between the text and the
   icon. Growing past the floor when the label needs it keeps a real gap in
   every language, and short labels still sit at exactly 188px so the two
   sections line up. News keeps the fixed 188px. */
.sa-cards--dark .sa-cards-readmore {
    /* fit-content, NOT auto: this is display:flex, so it is a block-level flex
       container and `auto` would stretch it to the full card width. */
    width: fit-content;
    min-width: 188px;
}

.sa-cards--dark .sa-cards-readmore-text {
    padding-right: 18px;
}

.sa-cards--dark .sa-cards-readmore {
    border-color: rgba(255, 255, 255, 0.3);
}

.sa-cards--dark .sa-cards-readmore:hover {
    border-color: #ffffff;
}

.sa-cards-readmore-text {
    font-weight: 300;
    font-size: 16px;
    line-height: 25px;
    color: #000000;
    margin: 0;
    padding-left: 18px;
}

.sa-cards--dark .sa-cards-readmore-text {
    color: #ffffff;
}

.sa-cards-readmore-icon {
    margin-left: auto;
    margin-right: 6px;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-cards--dark .sa-cards-readmore-icon {
    background: #ffffff;
}

.sa-cards-readmore-icon svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    stroke-width: 1.42;
    fill: none;
}

.sa-cards--dark .sa-cards-readmore-icon svg {
    stroke: var(--color-primary);
}

/* Spacer at end */
.sa-cards-spacer {
    min-width: 100px;
    flex-shrink: 0;
}

/* Responsive */
/* --- News / Case Studies below 1024px ------------------------------------
   Desktop places these four blocks by absolute coordinates: "View All" top-left,
   the title under it, the arrows at the bottom of the left column, and the card
   rail on the right. Dropping them all back to position:relative made them fall
   in DOM order, which put a lone "View All" button ABOVE the section title.

   Making .sa-cards a flex column lets order: restore the reading the design
   intends -- title, then the cards, then the controls.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sa-cards {
        height: auto;
        padding: 60px 0;
        display: flex;
        flex-direction: column;
    }

    .sa-cards-viewall,
    .sa-cards-title,
    .sa-cards-arrows,
    .sa-cards-scroll {
        position: relative;
        left: auto;
        top: auto;
        margin-left: var(--container-padding-mobile);
    }

    .sa-cards-title  { order: 1; margin: 0 0 28px var(--container-padding-mobile); }
    .sa-cards-scroll { order: 2; margin-left: 0; padding-left: var(--container-padding-mobile); }
    .sa-cards-arrows { order: 3; margin-top: 32px; }
    .sa-cards-viewall{ order: 4; margin-top: 24px; }

    .sa-cards-area {
        display: none;
    }
}

/* ==============================
   Footer (Figma design)
   ============================== */

/* z-index 60: a barra de navegacao inferior (.sa-nav e .sa-nav-mob) e
   `position: fixed` com z-index 50, por isso ficava POR CIMA do rodape quando
   se chegava ao fim da pagina -- os dois menus sobrepunham-se e baralhava.
   Com 60 o rodape passa-lhe a frente e a barra desliza para tras dele.
   Escolhido 60 e nao 100 de proposito: o header (.sa-header) esta em 100 e tem
   de continuar acima de tudo. Vale para o site inteiro, porque o rodape e
   incluido no base.tpl. */
.sa-footer {
    position: relative;
    z-index: 60;
    width: 100%;
    background: var(--color-primary);
    font-family: var(--font-family);
    color: #ffffff;
    overflow: hidden;
    min-height: 573px;
}

.sa-footer-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max); /* era 1660px -- gralha de 1662; a v5 do designer confirma 1662 */
    margin: 0 auto;
    padding: 0 32px;
}

@media (min-width: 1280px) {
    .sa-footer-inner {
        padding: 0 95px;
    }
}

/* Link columns */
.sa-footer-columns {
    padding-top: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 32px;
}

@media (min-width: 768px) {
    .sa-footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-footer-columns {
        grid-template-columns: repeat(6, 1fr);
    }
}

.sa-footer-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sa-footer-col-title {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.sa-footer-col-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-footer-col-link {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.sa-footer-col-link-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #d1d5dc;
    flex-shrink: 0;
}

.sa-footer-col-link a {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.sa-footer-col-link a:hover {
    opacity: 0.8;
    color: #ffffff;
    text-decoration: none;
}

/* Logo */
.sa-footer-logo {
    margin-top: 62px;
}

.sa-footer-logo img {
    height: 103px;
    width: 206px;
    object-fit: contain;
}

/* Socials + Partners row */
.sa-footer-socials-row {
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1280px) {
    .sa-footer-socials-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.sa-footer-socials {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sa-footer-social-link {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease;
}

.sa-footer-social-link:hover {
    transform: scale(1.1);
}

.sa-footer-social-link svg {
    width: 14px;
    height: 14px;
    fill: var(--color-primary);
}

/* Partners */
.sa-footer-partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 80px;
}

.sa-footer-partners img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

/* Copyright */
.sa-footer-copyright {
    margin-top: 44px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .sa-footer-copyright {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.sa-footer-copyright p {
    margin: 0;
}

.sa-footer-copyright-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sa-footer-copyright-links a {
    color: #ffffff;
    text-decoration: none;
}

.sa-footer-copyright-links a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* ==============================
   Company Overview Section
   ============================== */

.sa-co {
    width: 100%;
    background: #ffffff;
    padding: 160px 0;
    font-family: var(--font-family);
}

.sa-co-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 64px;
}

@media (min-width: 1024px) {
    .sa-co-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 96px;
        padding: 0 var(--container-padding);
    }
}

/* Left column — sticky */
.sa-co-left {
    width: 100%;
}

@media (min-width: 1024px) {
    .sa-co-left {
        width: 33.33%;
        position: sticky;
        top: 128px;
    }
}

.sa-co-left-heading {
    position: relative;
    /* Creates a stacking context so .sa-co-year's negative z-index stays inside
       this heading -- it drops behind the text but never behind the section. */
    z-index: 0;
}

.sa-co-year {
    font-weight: 700;
    font-size: 180px;
    line-height: 0.8;
    color: #f0f2f5;
    position: absolute;
    top: -128px;
    left: -40px;
    /* Was z-index:0, which made this positioned element paint IN FRONT of the
       static "History & Legacy" overline it overlaps by 16px. It is a watermark,
       so it belongs behind the text. */
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

.sa-co-overline {
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0 0 8px;
    display: block;
}

.sa-co-title {
    font-weight: 500;
    font-size: 48px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--color-primary);
    margin: 16px 0 0;
    position: relative;
    z-index: 1;
}

.sa-co-tagline {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 48px 0 0;
    max-width: 384px;
}

/* Right column */
.sa-co-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 32px;
}

@media (min-width: 1024px) {
    .sa-co-right {
        width: 66.66%;
    }
}

/* Narrative */
.sa-co-narrative-lead {
    font-weight: 300;
    font-size: 24px;
    line-height: 1.7;
    color: var(--color-primary);
    margin: 0 0 32px;
}

.sa-co-narrative-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}

@media (min-width: 768px) {
    .sa-co-narrative-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.sa-co-narrative-grid p {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
}

/* Product Portfolio */
.sa-co-portfolio {
    border-top: 1px solid #e5e7eb;
    padding-top: 48px;
}

.sa-co-portfolio-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.sa-co-portfolio-title {
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin: 0;
}

.sa-co-portfolio-sub {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-orange);
}

.sa-co-portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (min-width: 768px) {
    .sa-co-portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Pedido 43: os itens do portfolio passaram a levar link para a pagina do
   produto -- os que tem pagina. Os que nao tem continuam <div>.

   Por causa disso o hover mudou de `.sa-co-portfolio-item` para
   `a.sa-co-portfolio-item`: e' a mesma queixa do cliente sobre o Sectors
   Served -- um realce ao passar o rato promete que aquilo abre, e nos dois
   sem pagina nao abre nada. */
.sa-co-portfolio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: default;
    text-decoration: none;
    transition: border-color 200ms ease;
}

a.sa-co-portfolio-item {
    cursor: pointer;
}

a.sa-co-portfolio-item:hover,
a.sa-co-portfolio-item:focus-visible {
    border-color: var(--color-orange);
    text-decoration: none;
}

.sa-co-portfolio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    transition: background-color 200ms ease;
}

a.sa-co-portfolio-item:hover .sa-co-portfolio-dot,
a.sa-co-portfolio-item:focus-visible .sa-co-portfolio-dot {
    background: var(--color-orange);
}

.sa-co-portfolio-item span {
    font-size: 14px;
    text-transform: uppercase;
    color: #6b7280;
    transition: color 200ms ease;
}

a.sa-co-portfolio-item:hover span,
a.sa-co-portfolio-item:focus-visible span {
    color: var(--color-primary);
}

/* Sectors Served */
.sa-co-sectors {
    border-top: 1px solid #e5e7eb;
    padding-top: 48px;
}

.sa-co-sectors-title {
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin: 0 0 32px;
}

/* Pedido 43: "nao faz sentido o mouse over, pois nao tem links".
   A lista inteira sobe a opacidade ao passar o rato -- isso fica, e' o bloco a
   acender-se quando se olha para ele. O que saiu foi o realce laranja palavra
   a palavra: isso prometia que cada sector era clicavel, e nao e'. */
.sa-co-sectors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    opacity: 0.6;
    transition: opacity 500ms ease;
}

.sa-co-sectors-list:hover {
    opacity: 1;
}

.sa-co-sectors-list span {
    font-weight: 300;
    font-size: 24px;
    color: var(--color-primary);
    cursor: default;
}

/* Responsive */
/* Tablet: the -40px pull is measured against the desktop container padding (50px).
   Between 768 and 1023 the container only has 16px, so the year hung 24px off the
   left edge of the window. */
@media (min-width: 768px) and (max-width: 1023px) {
    .sa-co-year {
        font-size: 140px;
        top: -96px;
        left: -12px;
    }
}

@media (max-width: 767px) {
    .sa-co {
        padding: 80px 0;
    }

    .sa-co-year {
        font-size: 100px;
        top: -64px;
        left: -16px;
    }

    .sa-co-title {
        font-size: 36px;
    }

    .sa-co-narrative-lead {
        font-size: 20px;
    }

    .sa-co-sectors-list span {
        font-size: 18px;
    }
}

/* ==============================
   Global Subsidiaries Section
   ============================== */

.sa-gs {
    width: 100%;
    background: #001524;
    padding: 160px 0;
    position: relative;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-gs-bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-image: url('https://placehold.co/2072x1000');
    background-size: cover;
    background-position: center;
}

.sa-gs-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .sa-gs-inner {
        padding: 0 var(--container-padding);
    }
}

/* Header */
.sa-gs-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 96px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 48px;
}

@media (min-width: 768px) {
    .sa-gs-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.sa-gs-title {
    font-weight: 300;
    font-size: 64px;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.sa-gs-title span {
    font-weight: 500;
    color: var(--color-orange);
}

.sa-gs-subtitle {
    font-weight: 300;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin: 24px 0 0;
    max-width: 560px;
}

.sa-gs-stat {
    text-align: right;
}

.sa-gs-stat-val {
    font-weight: 500;
    font-size: 48px;
    color: #ffffff;
}

.sa-gs-stat-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-orange);
}

/* Cards grid */
.sa-gs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .sa-gs-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.sa-gs-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    padding: 40px;
    transition: border-color 500ms ease;
}

.sa-gs-card:hover {
    border-left-color: var(--color-orange);
}

.sa-gs-card-icon {
    position: absolute;
    top: 24px;
    right: 24px;
    opacity: 0.3;
    transition: opacity 300ms ease;
}

.sa-gs-card:hover .sa-gs-card-icon {
    opacity: 1;
}

.sa-gs-card-icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 1;
    fill: none;
}

.sa-gs-card-type {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 12px;
}

.sa-gs-card-name {
    font-weight: 500;
    font-size: 32px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 8px;
}

.sa-gs-card-location {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 32px;
}

.sa-gs-card-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 448px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.sa-gs-card-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.sa-gs-card-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 200ms ease;
}

.sa-gs-card-toggle:hover {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 767px) {
    .sa-gs {
        padding: 80px 0;
    }

    .sa-gs-title {
        font-size: 40px;
    }

    .sa-gs-card {
        padding: 24px;
    }

    .sa-gs-card-name {
        font-size: 24px;
    }
}

/* ==============================
   Certifications Section
   ============================== */

.sa-cert {
    width: 100%;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-cert-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 1024px) {
    .sa-cert-inner {
        flex-direction: row;
        gap: 64px;
        align-items: flex-start;
        padding: 0 var(--container-padding);
    }
}

/* Left sidebar */
.sa-cert-left {
    width: 100%;
}

@media (min-width: 1024px) {
    .sa-cert-left {
        width: 25%;
    }
}

.sa-cert-title {
    font-weight: 500;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 16px;
}

.sa-cert-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin-bottom: 24px;
}

.sa-cert-desc {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
}

/* Cards */
.sa-cert-cards {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid #e5e7eb;
    background: #ffffff;
}

@media (min-width: 768px) {
    .sa-cert-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .sa-cert-cards {
        width: 75%;
    }
}

.sa-cert-card {
    padding: 32px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background-color 200ms ease;
}

@media (min-width: 768px) {
    .sa-cert-card {
        border-bottom: none;
        border-right: 1px solid #f3f4f6;
    }

    .sa-cert-card:last-child {
        border-right: none;
    }
}

.sa-cert-card:hover {
    background: #f1f5f9;
}

.sa-cert-card-title {
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 12px;
    transition: color 200ms ease;
}

.sa-cert-card:hover .sa-cert-card-title {
    color: var(--color-orange);
}

.sa-cert-card-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 24px;
}

.sa-cert-card-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-cert-code {
    font-family: monospace;
    font-size: 11px;
    color: var(--color-primary);
    background: #e6f0f5;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* ==============================
   Business Culture Section
   ============================== */

.sa-bc {
    width: 100%;
    background: #ffffff;
    padding: 160px 0;
    font-family: var(--font-family);
}

.sa-bc-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-bc-inner {
        grid-template-columns: 7fr 5fr;
        gap: 96px;
        padding: 0 var(--container-padding);
    }
}

/* Text side */
.sa-bc-text {
    order: 2;
}

@media (min-width: 1024px) {
    .sa-bc-text {
        order: 1;
    }
}

.sa-bc-overline {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-orange);
    margin: 0 0 16px;
    display: block;
}

.sa-bc-title {
    font-weight: 500;
    font-size: 48px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--color-primary);
    margin: 0 0 48px;
}

.sa-bc-title span {
    font-weight: 300;
    color: #94a3b8;
}

.sa-bc-quote {
    position: relative;
    padding-left: 48px;
    margin-bottom: 48px;
}

.sa-bc-quote-mark {
    position: absolute;
    left: 0;
    top: -32px;
    font-family: serif;
    font-size: 120px;
    line-height: 1;
    color: var(--color-orange);
    opacity: 0.2;
}

.sa-bc-quote p {
    font-weight: 300;
    font-size: 24px;
    line-height: 1.7;
    color: var(--color-text);
    font-style: italic;
    margin: 0;
}

.sa-bc-author {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sa-bc-author-line {
    width: 64px;
    height: 1px;
    background: var(--color-primary);
}

.sa-bc-author-name {
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.sa-bc-author-role {
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #64748b;
    margin: 0;
}

/* Image side */
.sa-bc-image {
    order: 1;
    position: relative;
}

@media (min-width: 1024px) {
    .sa-bc-image {
        order: 2;
    }
}

.sa-bc-image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: #f3f4f6;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.sa-bc-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-bc-image-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, #001524, transparent);
    opacity: 0.8;
}

.sa-bc-image-stat {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 32px;
    text-align: right;
}

.sa-bc-image-stat-val {
    display: block;
    font-weight: 700;
    font-size: 80px;
    line-height: 1;
    color: #ffffff;
    opacity: 0.2;
}

.sa-bc-image-stat-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
}

.sa-bc-image-border {
    position: absolute;
    z-index: -1;
    top: 32px;
    right: -32px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-orange);
    opacity: 0.3;
}

@media (max-width: 767px) {
    .sa-bc {
        padding: 80px 0;
    }

    .sa-bc-title {
        font-size: 32px;
    }

    .sa-bc-quote p {
        font-size: 18px;
    }

    .sa-bc-image-border {
        display: none;
    }
}

/* ==============================
   Timeline Section
   ============================== */

.sa-tl {
    width: 100%;
    background: #f8fafc;
    padding: 120px 0;
    border-top: 1px solid #e5e7eb;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-tl-header {
    max-width: var(--container-max);
    margin: 0 auto 64px;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

@media (min-width: 1024px) {
    .sa-tl-header {
        padding: 0 var(--container-padding);
    }
}

.sa-tl-title {
    font-weight: 500;
    font-size: 48px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-primary);
    margin: 0;
}

.sa-tl-title span {
    color: var(--color-orange);
}

.sa-tl-drag-hint {
    display: none;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #9ca3af;
}

@media (min-width: 768px) {
    .sa-tl-drag-hint {
        display: flex;
    }
}

.sa-tl-drag-hint-line {
    width: 64px;
    height: 1px;
    background: #d1d5db;
}

/* Scroll container */
.sa-tl-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    /* Setting overflow-x alone makes overflow-y compute to auto, which gave the
       rail its own vertical scrollbar as soon as a tooltip stuck out. The track
       below is now tall enough to hold the tallest tooltip, so nothing needs to
       scroll vertically -- this just guarantees the bar can never come back. */
    overflow-y: hidden;
    cursor: grab;
    padding-left: 32px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* A faixa arrasta-se com o rato (section-timeline.tpl). Sem isto cada
       arrasto selecionava o texto dos marcos por onde passava -- queixa do
       cliente a 22 Set 2026. Texto de uma faixa arrastavel nao precisa de ser
       selecionavel. */
    -webkit-user-select: none;
    user-select: none;
}

/* Idem para as imagens do tooltip: o arrasto nativo da imagem (o "fantasma")
   roubava o rato ao arrasto da faixa. */
.sa-tl-scroll img {
    -webkit-user-drag: none;
}

.sa-tl-scroll::-webkit-scrollbar {
    display: none;
}

.sa-tl-scroll.dragging {
    cursor: grabbing;
}

.sa-tl-track {
    position: relative;
    min-width: max-content;
    padding: 0 32px;
    /* The tooltip opens 18px off the central axis, and the tallest one is 245px,
       so each half of the track has to be at least 263px -- 526 in total. At the
       old 500 (and 400 on mobile) the longest milestones were cut off, which is
       why some of them "did not show everything" when clicked. */
    height: 540px;
}

/* Central axis */
.sa-tl-axis {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    transform: translateY(-50%);
    z-index: 0;
}

/* Items container */
.sa-tl-items {
    display: flex;
    gap: 24px;
    position: relative;
    height: 100%;
}

/* Single item */
.sa-tl-item {
    position: relative;
    width: 240px;
    height: 100%;
}

/* Connector dot */
.sa-tl-dot {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--color-primary);
    z-index: 20;
    transition: all 300ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sa-tl-item:hover .sa-tl-dot,
.sa-tl-item.is-open .sa-tl-dot {
    width: 20px;
    height: 20px;
    background: var(--color-orange);
    border-color: var(--color-orange);
    box-shadow: 0 0 0 5px rgba(237, 110, 0, 0.15);
}

/* Connector line */
.sa-tl-connector {
    position: absolute;
    left: 20px;
    width: 1px;
    height: 40px;
    background: #d1d5db;
    z-index: 0;
    transition: background-color 300ms ease;
}

.sa-tl-item:hover .sa-tl-connector,
.sa-tl-item.is-open .sa-tl-connector {
    background: rgba(237, 110, 0, 0.6);
}

.sa-tl-item:nth-child(odd) .sa-tl-connector {
    bottom: 50%;
}

.sa-tl-item:nth-child(even) .sa-tl-connector {
    top: 50%;
}

/* Content card (always visible) */
.sa-tl-content {
    position: absolute;
    left: 0;
    width: 100%;
}

.sa-tl-item:nth-child(odd) .sa-tl-content {
    bottom: 50%;
    margin-bottom: 40px;
}

.sa-tl-item:nth-child(even) .sa-tl-content {
    top: 50%;
    margin-top: 40px;
}

.sa-tl-year {
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    color: #e2e8f0;
    margin-left: -4px;
    transition: color 300ms ease;
}

.sa-tl-item:hover .sa-tl-year,
.sa-tl-item.is-open .sa-tl-year {
    color: var(--color-primary);
}

.sa-tl-item-title {
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 8px 0 12px;
}

.sa-tl-item-desc {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    border-left: 2px solid transparent;
    padding-left: 16px;
    transform: translateX(-16px);
    transition: transform 300ms ease, border-color 300ms ease;
}

.sa-tl-item:hover .sa-tl-item-desc,
.sa-tl-item.is-open .sa-tl-item-desc {
    border-left-color: var(--color-orange);
    transform: translateX(0);
}

/* Hover tooltip */
/* The whole milestone is a tap target now (see section-timeline.tpl). */
.sa-tl-item {
    cursor: pointer;
}

.sa-tl-tooltip {
    position: absolute;
    left: -10px;
    z-index: 30;
    width: 240px;
    pointer-events: none;
    opacity: 0;
    transition: all 200ms ease;
}

.sa-tl-item:hover .sa-tl-tooltip,
.sa-tl-item.is-open .sa-tl-tooltip {
    opacity: 1;
}

.sa-tl-item:nth-child(odd) .sa-tl-tooltip {
    top: calc(50% + 18px);
    transform: translateY(-6px);
}

.sa-tl-item:hover:nth-child(odd) .sa-tl-tooltip,
.sa-tl-item.is-open:nth-child(odd) .sa-tl-tooltip {
    transform: translateY(0);
}

.sa-tl-item:nth-child(even) .sa-tl-tooltip {
    bottom: calc(50% + 18px);
    transform: translateY(6px);
}

.sa-tl-item:hover:nth-child(even) .sa-tl-tooltip,
.sa-tl-item.is-open:nth-child(even) .sa-tl-tooltip {
    transform: translateY(0);
}

.sa-tl-tooltip-inner {
    background: var(--color-primary);
    color: #ffffff;
    padding: 16px;
    border-top: 3px solid var(--color-orange);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.sa-tl-tooltip-year {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0 0 4px;
}

.sa-tl-tooltip-title {
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 8px;
}

/* Imagem do marco (campo Imagem, opcional).
   A imagem ocupa a largura toda do tooltip e a altura vem do racio — sem
   padding nem caixa branca a volta, senao uma fotografia fica minuscula ao
   meio de uma mancha branca.
   O fundo branco fica na mesma, mas so se ve por baixo de PNGs transparentes:
   os logotipos do cliente (NITROGEN, METHAGEN, CARBOGEN, HYDROGEN...) sao
   azuis e verdes e desapareciam por cima do azul do tooltip. */
.sa-tl-tooltip-img {
    /* fica dentro do padding de 16px do .sa-tl-tooltip-inner — alinhada com o
       ano, o titulo e o texto. Sem caixa branca: o que se ve a volta e o azul
       do tooltip. */
    margin: 0 0 12px;
    line-height: 0;
}

.sa-tl-tooltip-img img {
    display: block;
    width: 100%;
    /* A altura tem de ser travada: o .sa-tl-track tem 500px e o .sa-tl-scroll
       leva overflow-x, o que faz o overflow-y passar a auto e cortar tudo o que
       saia. O tooltip comeca a 50% + 18px, por isso so tem ~230px ate ao fundo.
       Sem este limite a imagem empurrava a descricao para fora e ela ficava
       cortada. `cover` em vez de `contain` para nao deixar barras nos lados. */
    height: 100px;
    object-fit: cover;
}

.sa-tl-tooltip-desc {
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

@media (max-width: 767px) {
    .sa-tl {
        padding: 60px 0;
    }

    .sa-tl-title {
        font-size: 32px;
    }

    /* Deliberately NOT shortened any more: a 400px track cut 57px off the top of
       the even tooltips and 39px off the bottom of the odd ones. The tooltip is
       the same size on a phone, so the track has to be too. */
    .sa-tl-track {
        height: 540px;
    }

    .sa-tl-year {
        font-size: 40px;
    }
}

/* ==============================
   Corporate Policy Section
   ============================== */

.sa-cp {
    width: 100%;
    background: #ffffff;
    padding-bottom: 160px;
    font-family: var(--font-family);
}

.sa-cp-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 96px var(--container-padding-mobile) 0;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

@media (min-width: 1024px) {
    .sa-cp-inner {
        flex-direction: row;
        padding: 96px var(--container-padding) 0;
    }
}

/* Left column */
.sa-cp-left {
    width: 100%;
}

@media (min-width: 1024px) {
    .sa-cp-left {
        width: 33.33%;
    }
}

.sa-cp-title {
    font-weight: 500;
    font-size: 40px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 48px;
    line-height: 1.1;
}

.sa-cp-tabs {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e7eb;
}

.sa-cp-tab {
    padding: 16px 0 16px 32px;
    text-align: left;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 300;
    color: #9ca3af;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    cursor: pointer;
    transition: color 300ms ease, border-color 300ms ease, font-weight 300ms ease;
}

.sa-cp-tab:hover {
    color: #6b7280;
}

.sa-cp-tab.active {
    border-left-color: var(--color-orange);
    color: var(--color-primary);
    font-weight: 500;
}

/* Right column */
.sa-cp-content {
    width: 100%;
    padding-top: 16px;
}

@media (min-width: 1024px) {
    .sa-cp-content {
        width: 66.66%;
    }
}

.sa-cp-panel {
    display: none;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    max-width: 768px;
    animation: saCpFadeIn 400ms ease;
}

.sa-cp-panel.active {
    display: block;
}

@keyframes saCpFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sa-cp-panel p {
    margin: 0 0 16px;
}

.sa-cp-panel p:last-child {
    margin-bottom: 0;
}

/* Section blocks (Vision/Mission) */
.sa-cp-section {
    margin-bottom: 32px;
}

.sa-cp-section:last-child {
    margin-bottom: 0;
}

.sa-cp-section-title {
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-orange);
    margin: 0 0 8px;
}

/* Lead paragraph */
.sa-cp-lead {
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 24px;
}

/* Bullet list */
.sa-cp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-cp-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sa-cp-list li::before {
    content: "●";
    color: var(--color-orange);
    font-size: 12px;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Reviewed footer */
.sa-cp-reviewed {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #f3f4f6;
    text-align: right;
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

@media (max-width: 767px) {
    .sa-cp {
        padding-bottom: 80px;
    }

    .sa-cp-inner {
        padding-top: 60px;
    }

    .sa-cp-title {
        font-size: 32px;
    }
}

/* ==============================
   Sector Hero (template-banners-6)
   ============================== */

.sa-sh {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background: #001524;
    font-family: var(--font-family);
}

/* Services page hero — era 520px (o designer tinha-o como pagina secundaria),
   mas o texto novo do cliente nao cabe: titulo de 3 linhas + descricao de 4.
   Como o .sa-sh-inner centra na vertical, o bloco transbordava para cima e o
   breadcrumb ia parar por cima do logotipo. Passa a 700px, igual aos sectores.
   As paginas 117 e 151 ficam nos 520px porque tem textos curtos. */
/* UPDATE 24 Aug 2026 — 700px was exactly 100vh on a ~700px-tall laptop viewport,
   so the banner swallowed the whole screen before you saw any page content.
   A fixed height has to be tall enough for the LONGEST text, which makes it too
   tall for everything else. Height now follows the content instead, with a 520px
   floor: the long title + description that forced the 700px still fit, and the
   banner is never full-screen. .sa-sh-inner has to lose height:100% too,
   otherwise it keeps stretching the (now auto-height) parent. */
body.page-65 .sa-sh {
    height: auto;
    min-height: 520px;
}

body.page-65 .sa-sh-inner {
    height: auto;
    min-height: 520px;
    /* The header is fixed and overlays the banner. With the old 700px box the
       vertically-centred content happened to clear it; in a shorter box it does
       not, and the breadcrumb ends up behind the logo -- the very bug that got
       this hero pushed to 700px. So reserve the header height explicitly and let
       align-items:center centre within what is left. 136px is the desktop header,
       110px the mobile one (see the max-width:767 rule below). */
    padding-top: 168px;   /* 136px header + 32px breathing room */
    padding-bottom: 72px;
}

/* .sa-sh-content adds its own padding-top:80px to clear the header. The inner box
   now reserves that space, so on this page the two would stack and add 80px of
   dead height back. Scoped to page-65 -- every other .sa-sh page still needs it. */
body.page-65 .sa-sh-content {
    padding-top: 0;
}

@media (max-width: 767px) {
    body.page-65 .sa-sh-inner {
        padding-top: 142px;   /* 110px header + 32px */
        padding-bottom: 56px;
    }
}
/* Case Studies page hero — same 520px treatment as Services. */
body.page-151 .sa-sh { height: 520px; }
/* Resources page hero — same 520px treatment. */
body.page-117 .sa-sh { height: 520px; }

/* Product hero — Custom Engineering (70), Integrated Solutions (74) and Energy
   References (78). The v3 prototype draws these three at 55vh / 70vh, not the
   100vh that .sa-ph gives every other product page. Same per-page mechanism as
   the three .sa-sh overrides above; base-subcategorias.tpl emits the page-<id>
   class exactly like base.tpl does.
   The max-width rule has to be repeated because the .sa-ph responsive block
   further down sets height:auto / min-height:100vh, and body.page-N beats a
   bare .sa-ph at any source position.

   Altura MINIMA e nao altura fixa. Com `height: 70vh` o hero era uma caixa
   rigida, e como o .sa-ph tem `overflow: hidden`, o que nao coubesse era
   cortado -- num portatil de 1366x680 o botao "Get a Quote" aparecia partido
   ao meio. Com min-height, cresce quando o conteudo precisa e nunca corta.
   O max() e' para o 520px continuar a valer nas janelas baixas, onde 70vh
   fica abaixo disso. */
body.page-70 .sa-ph,
body.page-74 .sa-ph,
body.page-78 .sa-ph { height: auto; min-height: max(520px, 70vh); }

@media (max-width: 1024px) {
    body.page-70 .sa-ph,
    body.page-74 .sa-ph,
    body.page-78 .sa-ph { height: auto; min-height: 55vh; }
}

/* ... e por serem mais baixas, precisam de reservar o header.

   O .sa-header e' `position: absolute` por cima do hero e mede 136px: 30px de
   padding, 76px de logotipo, 30px de padding. O .sa-ph-inner so' reserva 80px
   no topo, e o conteudo e' centrado (`align-items: center`) no que sobra.

   Num hero de 100vh isso da' folga de sobra e o breadcrumb aterra por volta
   dos 210px -- muito abaixo do logotipo. Nestas tres, a 70vh, o centro sobe
   cerca de 90px e o breadcrumb vai parar aos ~90px: exactamente por baixo do
   logotipo, que fica ilegivel contra o "HOME > INDUSTRIAL >".

   Reservar aqui a altura do header resolve sem tocar nas outras dez paginas,
   que estao validadas contra o prototipo e nao devem mexer um pixel.

   O `flex-start` nao e' cosmetico. So' com o padding, a 1400x780 o conteudo
   (breadcrumb + titulo de duas linhas + descricao + botao, ~390px) ainda fica
   mais alto do que a caixa que sobra (~346px), e um `align-items: center`
   distribui a sobra pelos dois lados -- ou seja, volta a subir 22px para
   dentro do header. Encostado ao topo, o breadcrumb aterra sempre nos 136px,
   qualquer que seja o tamanho do texto ou da janela. O que sobrar cresce para
   baixo, onde ha' espaco: estas tres paginas nao mostram a barra laranja. */
body.page-70 .sa-ph-inner,
body.page-74 .sa-ph-inner,
body.page-78 .sa-ph-inner {
    padding-top: 136px;
    align-items: flex-start;
    /* Os 64px de origem sao exactamente a altura da barra laranja: o conteudo
       acaba a rasar nela, e na Custom Engineering o botao "Get a Quote" ficava
       encostado ao laranja sem um pixel de folga. Mais 40 dao respiro.
       So' funciona porque estas tres passaram a min-height -- com altura fixa,
       o que isto empurrasse era cortado. */
    padding-bottom: 104px;
}

/* O flex-start acima aplica-se a` linha toda. Se um dia estas paginas levarem
   recorte de produto (o campo `thumbnail`, hoje vazio em todos os banners do
   site), ele deve continuar centrado como nas outras. */
body.page-70 .sa-ph-product,
body.page-74 .sa-ph-product,
body.page-78 .sa-ph-product { align-self: center; }

@media (max-width: 767px) {
    /* No telemovel o logotipo passa a 100x50, logo o header mede 110px. */
    body.page-70 .sa-ph-inner,
    body.page-74 .sa-ph-inner,
    body.page-78 .sa-ph-inner { padding-top: 110px; }
}

.sa-sh-bg {
    position: absolute;
    inset: 0;
}

.sa-sh-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.sa-sh-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 21, 36, 0.9), transparent);
}

.sa-sh-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-sh-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-sh-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 752px;
    padding-top: 80px;
}

/* Breadcrumb */
.sa-sh-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-sh-breadcrumb svg {
    width: 12px;
    height: 12px;
}

/* Title */
.sa-sh-title {
    display: flex;
    flex-direction: column;
    color: #ffffff;
    margin: 0 0 24px;
    font-size: 50px;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .sa-sh-title {
        font-size: 72px;
        line-height: 90px;
    }
}

.sa-sh-title-bold {
    font-weight: 500;
}

.sa-sh-title-light {
    font-weight: 300;
}

/* Description */
.sa-sh-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    color: #d1d5dc;
    margin: 0 0 56px;
}

@media (min-width: 768px) {
    .sa-sh-desc {
        font-size: 18px;
    }
}

/* CTA Button */
.sa-sh-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 50px;
    padding: 0 32px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
    overflow: hidden;
    transition: padding 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-sh-btn:hover {
    padding-right: 56px;
    color: #ffffff;
    text-decoration: none;
}

.sa-sh-btn-text {
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-sh-btn:hover .sa-sh-btn-text {
    transform: translateX(-4px);
}

.sa-sh-btn-arrow {
    position: absolute;
    right: 32px;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 350ms ease, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sa-sh-btn:hover .sa-sh-btn-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 767px) {
    .sa-sh {
        height: 600px;
    }

    .sa-sh-content {
        padding-top: 60px;
    }
}

/* --------------------------------------------------------------------------
   Hero da pagina SERVICES (body.page-65)
   O template e o mesmo dos sectores (.sa-sh), mas o texto do cliente e muito
   maior: titulo de 48 caracteres contra os 15 do "INDUSTRIAL GASES", e uma
   descricao de 236 caracteres contra 129. Com a largura normal (752px) ficava
   apertado. Isto so afecta a pagina 65 — os heros dos sectores nao mudam.
   -------------------------------------------------------------------------- */
body.page-65 .sa-sh-content { max-width: 940px; }
body.page-65 .sa-sh-title { font-size: 44px; line-height: 1.1; }
body.page-65 .sa-sh-desc { max-width: 820px; }

@media (max-width: 1024px) {
    body.page-65 .sa-sh-title { font-size: 34px; }
}

/* ==============================
   Intro Section (text + pillar cards)
   ============================== */

.sa-intro {
    background: #ffffff;
    padding: 96px 0;
    border-bottom: 1px solid #f3f4f6;
    font-family: var(--font-family);
}

.sa-intro-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
}

@media (min-width: 1024px) {
    .sa-intro-inner {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        padding: 0 var(--container-padding);
    }
}

@media (min-width: 1280px) {
    .sa-intro-inner {
        gap: 96px;
    }
}

/* Left column */
.sa-intro-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sa-intro-overline {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-orange);
    margin-bottom: 16px;
}

.sa-intro-title {
    font-weight: 500;
    font-size: 38px;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--color-primary);
    margin: 0 0 24px;
}

@media (min-width: 768px) {
    .sa-intro-title {
        font-size: 44px;
    }
}

.sa-intro-title span {
    font-weight: 300;
    color: #9ca3af;
}

.sa-intro-divider {
    width: 56px;
    height: 3px;
    background: var(--color-orange);
    margin-bottom: 32px;
}

.sa-intro-text-1 {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: #4a5568;
    margin: 0;
}

.sa-intro-text-2 {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: #64748b;
    margin: 0;
}

.sa-intro-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-orange);
    text-decoration: none;
    margin-top: 8px;
    transition: gap 250ms ease;
}

.sa-intro-cta:hover {
    gap: 16px;
    color: var(--color-orange);
    text-decoration: none;
}

.sa-intro-cta img,
.sa-intro-cta svg {
    width: 14px;
    height: 14px;
}

/* Arrow via CSS — no image needed */
.sa-intro-cta::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-orange);
    border-top: 2px solid var(--color-orange);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Right column — pillar cards */
.sa-intro-pillars {
    display: flex;
    flex-direction: column;
    border: 1px solid #f3f4f6;
}

.sa-intro-pillar {
    display: flex;
    gap: 24px;
    padding: 32px;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 200ms ease;
}

.sa-intro-pillar:last-child {
    border-bottom: none;
}

.sa-intro-pillar:hover {
    background: #f8fafc;
}

.sa-intro-pillar-num {
    flex-shrink: 0;
    margin-top: 4px;
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    color: #e2e8f0;
    transition: color 200ms ease;
}

.sa-intro-pillar:hover .sa-intro-pillar-num {
    color: rgba(0, 71, 108, 0.2);
}

.sa-intro-pillar-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-intro-pillar-title {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-primary);
    margin: 0;
}

.sa-intro-pillar-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
}

/* ==============================
   Equipment Selector Section
   ============================== */

.sa-eq {
    background: #f1f5f9;
    padding: 96px 0;
    font-family: var(--font-family);
    /* Anchor target for the sector hero's "Explore Solutions" button.
       Matches the 80px offset already used by the other scroll targets so the
       heading is not flush against the top of the viewport. Global
       `scroll-behavior: smooth` (line 40) makes the jump animate. */
    scroll-margin-top: 80px;
}

.sa-eq-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-eq-inner {
        padding: 0 var(--container-padding);
    }
}

/* Header */
.sa-eq-header {
    text-align: center;
    margin-bottom: 64px;
}

.sa-eq-title {
    font-weight: 500;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.sa-eq-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin: 0 auto 24px;
}

.sa-eq-subtitle {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    color: #6b7280;
    max-width: 640px;
    margin: 0 auto;
}

/* Cards grid */
.sa-eq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .sa-eq-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .sa-eq-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sa-eq-card {
    background: #ffffff;
    padding: 32px;
    border: 1px solid #e5e7eb;
    border-bottom: 4px solid var(--color-orange);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 280px;
    text-decoration: none;
    transition: box-shadow 300ms ease, transform 300ms ease;
}

.sa-eq-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-8px);
    text-decoration: none;
}

.sa-eq-card-icon {
    width: 48px;
    height: 48px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-primary);
    transition: background-color 300ms ease, color 300ms ease;
}

.sa-eq-card:hover .sa-eq-card-icon {
    background: var(--color-primary);
    color: #ffffff;
}

.sa-eq-card-icon img,
.sa-eq-card-icon svg {
    width: 22px;
    height: 22px;
    /* Tint the SVG to primary blue */
    filter: brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(1500%) hue-rotate(170deg) brightness(95%) contrast(95%);
    transition: filter 300ms ease;
}

.sa-eq-card:hover .sa-eq-card-icon img,
.sa-eq-card:hover .sa-eq-card-icon svg {
    /* White on hover */
    filter: brightness(0) invert(1);
}

.sa-eq-card-title {
    font-weight: 500;
    font-size: 20px;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.sa-eq-card-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: #9ca3af;
    margin: 0;
}

.sa-eq-card-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-orange);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 24px;
    transition: gap 250ms ease;
}

.sa-eq-card:hover .sa-eq-card-link {
    gap: 12px;
}

/* ==============================
   Advantages Section
   ============================== */

.sa-adv {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-adv-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-adv-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-adv-header {
    text-align: center;
    margin-bottom: 64px;
}

.sa-adv-title {
    font-weight: 500;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.sa-adv-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin: 0 auto;
}

.sa-adv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .sa-adv-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .sa-adv-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sa-adv-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
    border: 1px solid #f3f4f6;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.sa-adv-card:hover {
    border-color: rgba(237, 110, 0, 0.3);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.sa-adv-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e6f0f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 24px;
    transition: background-color 300ms ease, color 300ms ease;
}

/* Blocos de vantagens com POUCOS cartoes, escritos a mao no `texto`.
   A grelha normal e de 4 colunas porque as vantagens do Catalogo sao 8; com
   dois cartoes ficava meia linha vazia. Com auto-fit dois cartoes ocupam a
   largura toda e continua certo se forem tres ou quatro.
   Ex.: "Compressor Technologies" na pagina 72 (Medical Air):
        <section class="sa-adv sa-adv--few"> */
.sa-adv--few .sa-adv-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sa-adv-card:hover .sa-adv-card-icon {
    background: var(--color-orange);
    color: #ffffff;
}

.sa-adv-card-icon img,
.sa-adv-card-icon svg {
    width: 24px;
    height: 24px;
    /* Tint to primary blue */
    filter: brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(1500%) hue-rotate(170deg) brightness(95%) contrast(95%);
    transition: filter 300ms ease;
}

.sa-adv-card:hover .sa-adv-card-icon img,
.sa-adv-card:hover .sa-adv-card-icon svg {
    /* White on hover (since bg goes orange) */
    filter: brightness(0) invert(1);
}

.sa-adv-card-title {
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.sa-adv-card-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: #6b7280;
    margin: 0;
}

/* ==============================
   Trusted by Industry Leaders (sa-tt)
   Two-column section + autoplay carousel
   ============================== */

.sa-tt {
    background: #f8fafc;
    padding: 96px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.sa-tt-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 48px;
}

@media (min-width: 1024px) {
    .sa-tt-inner {
        padding: 0 var(--container-padding);
    }
}

/* ─── Left Column ───────────────────────────────────────── */
.sa-tt-left {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sa-tt-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.sa-tt-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin-bottom: 24px;
}

.sa-tt-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0 0 32px;
}

.sa-tt-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: gap 250ms ease, color 250ms ease;
}

.sa-tt-cta:hover {
    gap: 12px;
    color: var(--color-orange);
}

.sa-tt-cta img {
    width: 16px;
    height: 16px;
    /* Tint to primary blue (matches existing icon filter pattern) */
    filter: brightness(0) saturate(100%) invert(20%) sepia(35%) saturate(1500%) hue-rotate(170deg) brightness(95%) contrast(95%);
    transition: filter 250ms ease;
}

.sa-tt-cta:hover img {
    /* Tint to secondary orange on hover */
    filter: brightness(0) saturate(100%) invert(50%) sepia(85%) saturate(2200%) hue-rotate(360deg) brightness(98%) contrast(101%);
}

/* ─── Right Column — Carousel ──────────────────────────── */
.sa-tt-right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sa-tt-viewport {
    overflow: hidden;
    width: 100%;
}

.sa-tt-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    /* gap is set to match the JS calculation; JS reads this for translateX math */
    gap: 24px;
    will-change: transform;
}

/* Card flex-basis is set inline by JS based on slidesPerView */
.sa-tt-card {
    background: #ffffff;
    border: 1px solid var(--color-orange);
    padding: 32px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.sa-tt-card-top {
    display: flex;
    flex-direction: column;
}

.sa-tt-card-bar {
    width: 32px;
    height: 4px;
    /* A cor da area (verde em Energy, azul em Medical, laranja em Industrial),
       a 40% como no desenho. Era rgba(237,110,0,.4) fixo e ficava laranja em
       todas as paginas -- pedido do cliente a 22 Set 2026. O body.sector-*
       troca o --color-orange; a opacidade faz o papel do alpha. */
    background: var(--color-orange);
    opacity: 0.4;
    margin-bottom: 24px;
}

.sa-tt-quote {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 15px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0 0 24px;
}

.sa-tt-card-bottom {
    margin-top: auto;
}

.sa-tt-author {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 4px;
}

.sa-tt-role {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
    margin: 0;
}

/* ─── Dots ──────────────────────────────────────────────── */
.sa-tt-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding-left: 4px;
}

.sa-tt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box;
    transition: background 250ms ease, transform 250ms ease;
    flex-shrink: 0;
}

.sa-tt-dot:hover {
    background: #94a3b8;
}

.sa-tt-dot:focus {
    outline: none;
}

.sa-tt-dot.is-active {
    background: var(--color-orange);
    transform: scale(1.25);
}

.sa-tt-dot.is-active:hover {
    background: var(--color-orange);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sa-tt {
        padding: 64px 0;
    }
    .sa-tt-inner {
        flex-direction: column;
        gap: 40px;
    }
    .sa-tt-left,
    .sa-tt-right {
        flex: 1 1 auto;
        max-width: 100%;
    }
    .sa-tt-title {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .sa-tt-inner {
        padding: 0 20px;
    }
    .sa-tt-card {
        padding: 24px;
        min-height: 260px;
    }
}

/* ==============================
   FAQ accordion section (sa-faq)
   ============================== */

.sa-faq {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-faq-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-faq-inner {
        padding: 0 var(--container-padding);
    }
}

/* ─── Header ────────────────────────────────────────────── */
.sa-faq-header {
    text-align: center;
    margin-bottom: 64px;
}

.sa-faq-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.sa-faq-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin: 0 auto;
}

/* ─── Accordion list ────────────────────────────────────── */
/* 960 e nao 768 (pedido 47): a `caixa das perguntas` era estreita e as
   perguntas longas partiam para uma segunda linha, o que engordava a lista
   sem acrescentar nada. A 960 as perguntas do Industrial cabem numa linha.

   O gap desceu de 16 para 8 (pedido 46, "reduzir drasticamente o scroll") --
   com 56 perguntas na Industrial, cada pixel entre caixas conta oito vezes
   mais do que numa pagina normal. */
.sa-faq-list {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Barra do "See more" (22 Set 2026). O aspecto vem todo das classes
   .sa-res-faq-more* das FAQs gerais; aqui so' se alinha a` lista, que e'
   centrada e mais estreita do que a secao. */
.sa-faq .sa-faq-more {
    max-width: 960px;
    margin: 20px auto 0;
}

.sa-faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.sa-faq-item:hover {
    border-color: #d1d5db;
}

.sa-faq-item.is-open {
    border-color: color-mix(in srgb, var(--color-orange) 40%, transparent);
}

/* ─── Question button ───────────────────────────────────── */
/* padding vertical de 24 para 14 (pedido 46). A linha da pergunta fica com
   ~46px em vez de ~72px; com 56 perguntas sao mais de 1400px de scroll a
   menos, so' nesta mudanca. O padding lateral fica nos 24 -- e' o que da o ar
   do desenho. */
.sa-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background 250ms ease;
    font-family: 'Kanit', sans-serif;
}

.sa-faq-question:hover {
    background: #f8fafc;
}

.sa-faq-question:focus {
    outline: none;
}

.sa-faq-question-text {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: var(--color-primary);
    flex: 1;
}

/* ─── Plus / Minus icon ─────────────────────────────────── */
.sa-faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sa-faq-icon-plus,
.sa-faq-icon-minus {
    position: absolute;
    width: 24px;
    height: 24px;
    transition: opacity 250ms ease;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.sa-faq-icon-plus {
    -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/plus.svg');
            mask-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/plus.svg');
    background-color: #94a3b8;
    opacity: 1;
}

.sa-faq-icon-minus {
    -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/dash.svg');
            mask-image: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/dash.svg');
    background-color: var(--color-orange);
    opacity: 0;
}

.sa-faq-item.is-open .sa-faq-icon-plus {
    opacity: 0;
}

.sa-faq-item.is-open .sa-faq-icon-minus {
    opacity: 1;
}

/* ─── Answer panel ──────────────────────────────────────── */
/* O `visibility: hidden` tira a resposta fechada da ordem de tabulacao.
   Com so' o max-height:0 ela some do ecra mas continua a apanhar o Tab, e
   desde que cada resposta ganhou o link "Talk to Engineer" (28 Ago 2026) isso
   eram 56 paragens invisiveis so' na pagina Industrial. Ja' valia antes para
   os links que as respostas ja' pudessem ter.

   O `0s linear 350ms` adia a mudanca para o fim do fecho, senao a resposta
   desaparecia de um golpe em vez de se recolher. */
.sa-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 350ms ease, opacity 250ms ease, visibility 0s linear 350ms;
}

.sa-faq-item.is-open .sa-faq-answer {
    /* JS sets max-height to scrollHeight px on open; this is a fallback */
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transition: max-height 350ms ease, opacity 250ms ease, visibility 0s;
}

.sa-faq-answer-inner {
    padding: 0 24px 24px;
    border-top: 1px dashed #f1f5f9;
    padding-top: 20px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
}

.sa-faq-answer-inner p {
    margin: 0 0 12px;
}

.sa-faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.sa-faq-answer-inner a {
    color: var(--color-orange);
    text-decoration: underline;
}

/* "Talk to Engineer" no fim de cada resposta (pedido 48). Bloco proprio e nao
   a seguir ao texto: o texto da resposta vem do backoffice e pode acabar em
   qualquer coisa, e assim o link tem sempre o mesmo ar e o mesmo espaco por
   cima. */
.sa-faq-engineer {
    display: inline-block;
    margin-top: 16px;
    color: var(--color-orange);
    font-size: 14px;
    text-decoration: underline;
}

.sa-faq-engineer:hover,
.sa-faq-engineer:focus-visible {
    color: var(--color-orange);
    text-decoration: none;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sa-faq {
        padding: 64px 0;
    }
    .sa-faq-title {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .sa-faq-inner {
        padding: 0 20px;
    }
    .sa-faq-question {
        padding: 20px;
    }
    .sa-faq-question-text {
        font-size: 16px;
    }
    .sa-faq-answer-inner {
        padding: 16px 20px 20px;
    }
}

/* ==============================
   Bottom CTAs section (sa-cta)
   3fr engineer card + 2fr stacked cards
   ============================== */

.sa-cta {
    background: #f8fafc;
    padding: 96px 0;
    border-top: 1px solid #e5e7eb;
    font-family: var(--font-family);
}

.sa-cta-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-cta-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-cta-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
    align-items: stretch;
}

/* ─── Big engineer card (left, 3fr) ─────────────────────── */
.sa-cta-engineer {
    display: flex;
    min-height: 360px;
    overflow: hidden;
    position: relative;
}

.sa-cta-engineer-text {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    max-width: 420px;
    flex-shrink: 0;
}

/* No portrait for the linked member -> template-banners-7.tpl renders no photo
   block at all rather than showing the banner's stock face under a real name.
   The text is then the only child, so drop its cap and let it use the whole
   card instead of leaving ~60% as flat colour. */
.sa-cta-engineer-text:only-child {
    max-width: none;
}

.sa-cta-engineer-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.sa-cta-engineer-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.sa-cta-engineer-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 16px;
}

.sa-cta-engineer-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 32px;
    max-width: 320px;
}

/* Badge (division + specialty) */
.sa-cta-engineer-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.sa-cta-engineer-badge-bar {
    width: 4px;
    height: 32px;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.sa-cta-engineer-badge-name {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin: 0 0 2px;
    line-height: 1;
}

.sa-cta-engineer-badge-spec {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Engineer photo panel */
.sa-cta-engineer-photo {
    position: relative;
    flex: 1;
    min-width: 280px;
}

/* object-position: center TOP, nao center center.
   As fotos sao retratos quadrados (600x600) e a caixa muda de forma com a
   largura do ecra: aos 1440 e 1920 fica em retrato e o cover so corta dos
   lados, mas aos 2560 a banda alarga, o min-height do cartao fica nos 360px,
   a caixa vira paisagem (835x606) e o corte passa a ser VERTICAL -- 114px em
   cima, ou seja a cabeca do comercial.

   Ancorando no topo, o que se perde e sempre a parte de baixo. Abaixo dos
   1920 isto nao muda nada: la nao ha corte vertical nenhum para reposicionar.
   (A foto esta escondida abaixo dos 1024px.) */
.sa-cta-engineer-photo picture,
.sa-cta-engineer-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.sa-cta-photo-fade-left {
    position: absolute;
    inset: 0;
    width: 96px;
    z-index: 5;
}

.sa-cta-photo-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    z-index: 5;
}

/* ─── CTA link (shared by engineer + small cards) ──────── */
.sa-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 4px;
    width: fit-content;
    transition: border-color 250ms ease, gap 250ms ease;
}

.sa-cta-link:hover {
    border-color: #ffffff;
    gap: 12px;
}

.sa-cta-link img {
    width: 14px;
    height: 14px;
    filter: brightness(0) invert(1);
}

/* ─── Stacked smaller cards (right, 2fr) ────────────────── */
.sa-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sa-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.sa-cta-card-content {
    position: relative;
    z-index: 5;
}

.sa-cta-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.sa-cta-card-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.sa-cta-card-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 16px;
}

.sa-cta-card-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 32px;
}

.sa-cta-card .sa-cta-link {
    position: relative;
    z-index: 5;
}

/* Decorative blur blob */
.sa-cta-card-blob {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(32px);
    pointer-events: none;
    transition: background 300ms ease;
}

.sa-cta-card:hover .sa-cta-card-blob {
    background: rgba(255, 255, 255, 0.1);
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sa-cta {
        padding: 64px 0;
    }
    .sa-cta-grid {
        grid-template-columns: 1fr;
    }
    .sa-cta-engineer-photo {
        display: none;
    }
    .sa-cta-engineer {
        min-height: auto;
    }
    .sa-cta-engineer-text {
        max-width: 100%;
    }
    .sa-cta-engineer-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .sa-cta-inner {
        padding: 0 20px;
    }
    .sa-cta-engineer-text {
        padding: 32px;
    }
    .sa-cta-card {
        padding: 32px;
    }
    .sa-cta-card-title {
        font-size: 20px;
    }
}

/* ==============================
   Stats Banner section (sa-stats)
   Dark bg + world map + 4 counters
   ============================== */

.sa-stats {
    position: relative;
    padding: 96px 0;
    background: #001524;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-stats-bg {
    position: absolute;
    inset: 0;
    opacity: 0.2;
}

.sa-stats-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.sa-stats-inner {
    position: relative;
    z-index: 5;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-stats-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-stats-grid {
    display: grid;
    /* auto-fit: o numero de colunas segue o numero de itens. Cada sector tem
       uma contagem diferente (Industrial 4, Medical 3, Energy 4), por isso uma
       grelha fixa de 4 deixava um buraco na Medical. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 48px;
    text-align: center;
}

.sa-stats-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-stats-val {
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.sa-stats-label {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
    .sa-stats {
        padding: 64px 0;
    }
    .sa-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .sa-stats-val {
        font-size: 48px;
    }
}

@media (max-width: 600px) {
    .sa-stats-inner {
        padding: 0 20px;
    }
    .sa-stats-val {
        font-size: 40px;
    }
    .sa-stats-label {
        font-size: 12px;
    }
}

/* ==============================
   Product Video section (sa-video)
   Title + YouTube thumbnail + play button
   ============================== */

.sa-video {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-video-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-video-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-video-header {
    text-align: center;
    margin-bottom: 64px;
}

.sa-video-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    color: var(--color-primary);
    text-transform: uppercase;
    margin: 0 0 16px;
}

.sa-video-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin: 0 auto;
}

/* Video container */
.sa-video-container {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.sa-video-container img.sa-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.sa-video-container:hover img.sa-video-thumb {
    transform: scale(1.05);
}

.sa-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: background 300ms ease;
}

.sa-video-container:hover .sa-video-overlay {
    background: rgba(0, 0, 0, 0.2);
}

/* Play button */
.sa-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-video-play-outer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms ease;
}

.sa-video-container:hover .sa-video-play-outer {
    transform: scale(1.1);
}

.sa-video-play-inner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    box-shadow: 0 8px 24px rgba(237, 110, 0, 0.4);
}

/* Play triangle — pure CSS, no image needed */
.sa-video-play-inner::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
}

/* When iframe is loaded, hide the thumbnail */
.sa-video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sa-video-container.is-playing .sa-video-thumb,
.sa-video-container.is-playing .sa-video-overlay,
.sa-video-container.is-playing .sa-video-play {
    display: none;
}

@media (max-width: 1024px) {
    .sa-video {
        padding: 64px 0;
    }
    .sa-video-title {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .sa-video-inner {
        padding: 0 20px;
    }
    .sa-video-play-outer {
        width: 64px;
        height: 64px;
    }
    .sa-video-play-inner {
        width: 44px;
        height: 44px;
    }
    .sa-video-play-inner img {
        width: 20px;
        height: 20px;
    }
}

/* ==============================
   Product Hero section (sa-ph)
   Full-viewport hero with bg + product cutout
   ============================== */

.sa-ph {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: #0f172a;
    overflow: hidden;
    font-family: var(--font-family);
}

/* Background image + gradient */
.sa-ph-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sa-ph-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.sa-ph-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 21, 36, 0.9), transparent);
}

/* Inner layout */
.sa-ph-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 80px var(--container-padding-mobile) 64px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

@media (min-width: 1024px) {
    .sa-ph-inner {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

/* Text content */
.sa-ph-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
    flex-shrink: 0;
}

/* Breadcrumb */
.sa-ph-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
}

.sa-ph-breadcrumb a {
    color: var(--color-orange);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 200ms ease;
}

.sa-ph-breadcrumb a:hover {
    opacity: 1;
}

.sa-ph-breadcrumb-sep {
    opacity: 0.5;
    font-size: 14px;
}

/* Title */
.sa-ph-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 1.25;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.sa-ph-title-light {
    font-weight: 300;
}

/* Description */
.sa-ph-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 440px;
}

/* CTA buttons */
.sa-ph-ctas {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.sa-ph-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 32px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: filter 200ms ease;
}

.sa-ph-btn-primary:hover {
    filter: brightness(1.15);
    color: #ffffff;
    text-decoration: none;
}

.sa-ph-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 32px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}

.sa-ph-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    text-decoration: none;
}

/* Product image */
.sa-ph-product {
    position: relative;
    flex: 1;
    max-width: 600px;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(48px);
    min-height: 0;
}

.sa-ph-product-glow {
    position: absolute;
    inset: 0;
    background: rgba(0, 168, 232, 0.2);
    filter: blur(100px);
    border-radius: 50%;
    pointer-events: none;
}

.sa-ph-product picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Era calc(100vh - 200px) e a maquina passava por baixo da .sa-ph-bar.
       Contas: .sa-ph-inner reserva 64px em baixo para a barra e a imagem fica
       centrada no que sobra -- so que .sa-ph-product leva translateY(48px), e um
       transform nao conta para o layout. Ou seja, so nao ha sobreposicao enquanto
       a folga vertical for maior que 48px. Num 1440x768 (portatil comum) a folga
       era 28px, logo a imagem entrava 20px por baixo da barra.
       Medido na pagina do Oxygen: -200px -> +20px (por baixo), -248px -> -4px
       (raspa), -280px -> -20px (folgado), -320px -> ja encolhia a imagem tambem
       a 900px de altura sem precisar. Fica -280px: a 900 e 1080 de altura a
       imagem nao muda de tamanho nenhum, so a 768 e' que encolhe o suficiente. */
    .sa-ph-product img {
    position: relative;
    z-index: 5;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(600px, calc(100vh - 280px));
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* Bottom bar
   Nasce escondida. Ate' agora desenhava-se logo com as tres ancoras fixas
   (Overview / Specs / Applications) e o script apagava a seguir as que nao
   existiam nesta pagina -- nas paginas sem Specs nem Applications isso dava
   um piscar laranja no carregamento, visivel a olho.
   Agora e' o script que a mostra, depois de saber o que la' vai. Ver o fim do
   template-banners-product-hero.tpl. Sem JS a barra nao aparece, e e' o menos
   mau: aparecer com links para sitios que nao existem era pior. */
.sa-ph-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: 64px;
    display: none;
}

.sa-ph-bar.is-ready {
    display: block;
}

/* Variante "seccoes": em vez das tres ancoras fixas, a barra lista as seccoes
   da propria pagina (as content rows). Os titulos sao mais compridos do que
   "Overview" -- "High Pressure / Cylinder Filling" nao cabe ao lado dos outros
   quatro num portatil -- por isso levam separador, espacamento apertado e
   scroll horizontal, tal como no prototipo (px-4 + overflow-x-auto). */
.sa-ph-bar-links.is-secoes {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}

.sa-ph-bar-links.is-secoes::-webkit-scrollbar {
    display: none;
}

.sa-ph-bar-links.is-secoes .sa-ph-bar-link {
    padding: 0 16px;
    white-space: nowrap;
}

.sa-ph-bar-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    align-self: center;
    flex-shrink: 0;
}

.sa-ph-bar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    height: 100%;
    display: flex;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-ph-bar-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-ph-bar-links {
    display: flex;
    gap: 48px;
}

.sa-ph-bar-link {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 200ms ease;
}

.sa-ph-bar-link:hover,
.sa-ph-bar-link.active {
    color: #ffffff;
    font-weight: 500;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sa-ph {
        height: auto;
        min-height: 100vh;
    }
    .sa-ph-inner {
        height: auto;
        flex-direction: column;
        padding-top: 120px;
        padding-bottom: 96px;
        gap: 40px;
    }
    .sa-ph-content {
        max-width: 100%;
    }
    .sa-ph-title {
        font-size: 48px;
    }
    .sa-ph-product {
        max-width: 400px;
        transform: none;
    }

    .sa-ph-bar {
        position: relative;
    }
}

@media (max-width: 600px) {
    .sa-ph-inner {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 100px;
        padding-bottom: 48px;
    }
    .sa-ph-title {
        font-size: 40px;
    }
    .sa-ph-desc {
        font-size: 16px;
    }
    .sa-ph-ctas {
        flex-direction: column;
    }
    .sa-ph-btn-primary,
    .sa-ph-btn-outline {
        width: 100%;
        text-align: center;
    }
    .sa-ph-bar-links {
        gap: 24px;
    }
}

/* ==============================
   Product Intro section (sa-pi)
   Two-column text layout with checkmarks
   ============================== */

.sa-pi {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-pi-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-pi-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-pi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

/* Left column */
.sa-pi-overline {
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.sa-pi-text-lg {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 24px;
}

.sa-pi-text {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0 0 16px;
}

/* Right column — checkmarks */
.sa-pi-checks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* Era `display:flex; gap:12px`, com o ::before (o circulo do visto) como flex
   item. So que um <sub> tambem e' um elemento, portanto virava flex item por
   direito proprio: o "N<sub>2</sub>" saia como [N] 12px [2] -- separado -- e o
   align-items:center ainda punha o 2 ao meio da linha em vez de assente na base,
   ou seja deixava de ser um indice. Afecta 6 linhas: Oxygen VSA, Methagen AD x2,
   Methagen LF x2, Bioxygen.
   Sem flex o texto volta a ser um unico contexto inline e o <sub> comporta-se
   como indice normal. O icone passa a absoluto e o padding-left abre-lhe espaco;
   line-height igual a' altura do icone (22px) alinha-o com a primeira linha e o
   texto que passe para a linha seguinte fica indentado em vez de correr por baixo. */
.sa-pi-check {
    display: block;
    position: relative;
    padding-left: 34px;
    min-height: 22px;
    line-height: 22px;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}

.sa-pi-check::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #e6f0f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300476c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* CTA link */
.sa-pi-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-orange);
    text-decoration: none;
    margin-top: 24px;
    transition: gap 250ms ease;
}

.sa-pi-cta:hover {
    gap: 12px;
    color: var(--color-orange);
    text-decoration: none;
}

.sa-pi-cta::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-orange);
    border-top: 2px solid var(--color-orange);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .sa-pi {
        padding: 64px 0;
    }
    .sa-pi-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .sa-pi-inner {
        padding: 0 20px;
    }
}

/* ==============================
   Model Comparator section (sa-mc)
   Side-by-side model comparison with dropdowns
   ============================== */

.sa-mc {
    background: #f8fafc;
    padding: 96px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    font-family: var(--font-family);
    /* #specs e' alvo de ancora: o "See the ... range" do simulador aterra aqui
       (pedido 40). Os 80px sao os mesmos que os outros alvos do site ja' usam
       -- sem eles a seccao encostava ao topo da janela e o titulo ficava
       colado. */
    scroll-margin-top: 80px;
}

.sa-mc-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-mc-inner {
        padding: 0 var(--container-padding);
    }
}

/* Header */
.sa-mc-header {
    text-align: center;
    margin-bottom: 64px;
}

.sa-mc-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 40px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.sa-mc-title span {
    color: var(--color-orange);
}

.sa-mc-subtitle {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--color-text-light);
    margin: 0;
}

/* Cards container */
.sa-mc-cards {
    display: flex;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Single card */
.sa-mc-card {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: visible;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.sa-mc-card.is-expanded {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Card header */
.sa-mc-card-header {
    padding: 24px 24px 20px;
    position: relative;
}

.sa-mc-card-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sa-mc-card-label {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #90a1b9;
}

.sa-mc-remove {
    background: none;
    border: 0;
    font-size: 18px;
    color: #d1d5db;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 200ms ease;
}

.sa-mc-remove:hover {
    color: #ef4444;
}

/* Selector button */
.sa-mc-selector {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #f4f4f4;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #474747;
    transition: background 200ms ease, color 200ms ease;
    user-select: none;
}

.sa-mc-selector:hover {
    background: #ebebeb;
}

.sa-mc-card.is-expanded .sa-mc-selector {
    background: var(--color-primary);
    color: #ffffff;
}

.sa-mc-chevron {
    font-size: 18px;
    font-weight: 300;
    transform: rotate(90deg);
    transition: transform 200ms ease;
}

.sa-mc-chevron.is-open {
    transform: rotate(270deg);
}

/* Dropdown */
.sa-mc-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    right: 24px;
    background: #ffffff;
    border: 1px solid var(--color-primary);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
}

.sa-mc-option {
    padding: 12px 16px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    color: #474747;
    border-bottom: 1px solid #f8f8f8;
    transition: background 150ms ease;
}

.sa-mc-option:last-child {
    border-bottom: 0;
}

.sa-mc-option:hover {
    background: #f8fafc;
}

.sa-mc-option.is-active {
    background: #e6f0f5;
    color: var(--color-primary);
    font-weight: 500;
}

/* Card body (expanded) */
.sa-mc-card-body {
    border-top: 1px solid #f1f5f9;
}

/* Specs table */
.sa-mc-specs {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-mc-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.sa-mc-spec-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.sa-mc-spec-label {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #62748e;
}

.sa-mc-spec-val {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--color-primary);
}

/* Placeholder (collapsed) */
.sa-mc-card-placeholder {
    padding: 8px 24px 24px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #d1d5db;
}

/* Add model button */
.sa-mc-add {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: center;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 16px 0;
}

.sa-mc-add-circle {
    width: 56px;
    height: 56px;
    border: 2px dashed #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #d1d5db;
    transition: border-color 200ms ease, color 200ms ease;
}

.sa-mc-add:hover .sa-mc-add-circle {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

.sa-mc-add span {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
    transition: color 200ms ease;
}

.sa-mc-add:hover span {
    color: var(--color-orange);
}

/* Responsive */
@media (max-width: 1024px) {
    .sa-mc {
        padding: 64px 0;
    }
    .sa-mc-title {
        font-size: 32px;
    }
    .sa-mc-cards {
        flex-direction: column;
        gap: 16px;
        /* Sem isto os cartoes encolhiam ao tamanho do conteudo (214px numa
           coluna de 350) e ficavam encostados a` esquerda, com o "Add model"
           por baixo a ocupar a largura toda -- desalinhado e estranho.

           A causa e' o `align-items: flex-start` da regra de cima: em linha
           (desktop) alinha os cartoes pelo topo, que e' o que se quer; ao virar
           coluna aqui, o mesmo valor passa a mandar no eixo HORIZONTAL e deixa
           de esticar. Foi tambem por isso que o .sa-mc-add em baixo precisou do
           `align-self: stretch` -- era o remendo do mesmo problema, so' para
           ele. Com o stretch aqui, esse `align-self` passa a ser redundante
           (fica, nao faz mal nenhum). */
        align-items: stretch;
    }
    .sa-mc-add {
        flex-direction: row;
        align-self: stretch;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .sa-mc-inner {
        padding: 0 20px;
    }
}

/* ==============================
   Global Applications section (sa-ga)
   ------------------------------
   Leitura em dois niveis, porque o conteudo do cliente sao 15 temas / 44
   aplicacoes (Azoto) e 11 / 38 (Oxigenio) — demasiado para a lista de tabs
   original, que foi desenhada para 5 items com foto.

     1. grelha de cartoes = TEMAS  (scan rapido, o utilizador procura o seu sector)
     2. painel lateral    = as aplicacoes desse tema (detalhe, com texto a respirar)

   Linguagem visual alinhada com .sa-eq / .sa-adv das mesmas paginas de produto:
   titulo maiusculas + divider laranja, grelha responsiva, borda inferior de 4px
   no accent e hover a levantar o cartao. A imagem do tema e opcional — cartoes
   sem foto ficam solidos e continuam a ler-se como intencionais.
   ============================== */

.sa-ga {
    background: var(--color-dark);
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-ga-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-ga-inner {
        padding: 0 var(--container-padding);
    }
}

/* --- Header (mesmo padrao de .sa-eq-header) --- */
.sa-ga-header {
    text-align: center;
    margin-bottom: 56px;
}

.sa-ga-title {
    font-weight: 500;
    font-size: 32px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 16px;
}

.sa-ga-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
    margin: 0 auto 24px;
}

.sa-ga-subtitle {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    max-width: 640px;
    margin: 0 auto;
}

/* --- Grelha de temas --- */
.sa-ga-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .sa-ga-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sa-ga-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .sa-ga-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sa-ga-card {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 208px;
    padding: 26px;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 4px solid var(--color-orange);
    cursor: pointer;
    font-family: var(--font-family);
    transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.sa-ga-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.sa-ga-card:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 3px;
}

/* foto do tema (opcional) */
.sa-ga-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    transition: opacity 300ms ease, transform 500ms ease;
}

.sa-ga-card:hover .sa-ga-card-bg {
    opacity: 0.42;
    transform: scale(1.05);
}

/* garante leitura do texto sobre qualquer foto */
.sa-ga-card.has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.94) 25%, rgba(0, 21, 36, 0.55) 100%);
}

.sa-ga-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* chip de icone — mesmo formato do .sa-eq-card-icon das paginas de produto */
.sa-ga-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-orange);
    transition: background 300ms ease, color 300ms ease;
}

.sa-ga-card:hover .sa-ga-card-icon {
    background: var(--color-orange);
    color: #ffffff;
}

/* icone carregado pelo backoffice (PNG transparente) */
.sa-ga-card-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.sa-ga-card-title {
    flex: 1;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffffff;
    margin-top: 18px;
}

.sa-ga-card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 300ms ease;
}

.sa-ga-card:hover .sa-ga-card-cta {
    color: #ffffff;
}

.sa-ga-card-arrow {
    transition: transform 300ms ease;
}

.sa-ga-card:hover .sa-ga-card-arrow {
    transform: translateX(4px);
}

/* --- Painel de detalhe --- */
.sa-ga-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.sa-ga-drawer[hidden] {
    display: none;
}

.sa-ga-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 10, 18, 0.72);
    animation: saGaFade 250ms ease;
}

.sa-ga-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(580px, 100%);
    display: flex;
    flex-direction: column;
    background: #04121d;
    border-left: 4px solid var(--color-orange);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
    animation: saGaSlide 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sa-ga-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 21, 36, 0.72);
    color: #ffffff;
    cursor: pointer;
    transition: background 200ms ease;
}

.sa-ga-drawer-close:hover {
    background: var(--color-orange);
}

.sa-ga-drawer-close:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.sa-ga-drawer-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sa-ga-drawer-body::-webkit-scrollbar {
    width: 4px;
}

.sa-ga-drawer-body::-webkit-scrollbar-track {
    background: transparent;
}

.sa-ga-drawer-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.sa-ga-detail[hidden] {
    display: none;
}

.sa-ga-detail-media {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.sa-ga-detail-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #04121d 2%, rgba(4, 18, 29, 0.25) 100%);
}

.sa-ga-detail-head {
    padding: 32px 32px 0;
}

.sa-ga-detail-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.sa-ga-apps {
    list-style: none;
    margin: 0;
    padding: 28px 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.sa-ga-app-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin: 0 0 8px;
    padding-left: 14px;
    border-left: 3px solid var(--color-orange);
}

.sa-ga-app-desc {
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    padding-left: 17px;
}

.sa-ga-app-desc p {
    margin: 0;
}

/* navegacao entre temas sem fechar o painel */
.sa-ga-drawer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: #04121d;
}

/* Escondidas quando nao tem para onde andar (um tema com uma so' aplicacao,
   como no Helio). O JS poe o atributo; sem esta regra o `display: flex` de
   cima ganhava ao [hidden] do browser. */
.sa-ga-drawer-nav[hidden] {
    display: none;
}

.sa-ga-drawer-nav button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color 200ms ease;
}

.sa-ga-drawer-nav button:hover:not(:disabled) {
    color: #ffffff;
}

.sa-ga-drawer-nav button:disabled {
    opacity: 0.28;
    cursor: default;
}

.sa-ga-drawer-nav button:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

.sa-ga-drawer-pos {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}

/* As duas regras `body.sa-ga-open` sairam a 2 Set 2026 — bloqueavam o scroll
   da pagina e escondiam o botao flutuante do menu enquanto a gaveta das
   aplicacoes estava aberta. Deixou de haver gaveta (a fila de temas passou a
   horizontal e o painel a` inline), o JS ja' nao poe a classe, e ficavam duas
   regras que nunca mais se aplicavam. */

@keyframes saGaFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes saGaSlide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* --- Responsive --- */
@media (max-width: 1023px) {
    .sa-ga {
        padding: 72px 0;
    }
    .sa-ga-title {
        font-size: 26px;
    }
    .sa-ga-header {
        margin-bottom: 40px;
    }
}

/* ATENCAO: este bloco e' do desenho ANTIGO (a grelha de cartoes + gaveta) e
   esta' quase todo SUPERADO pelo bloco `@media (max-width: 1199px)` que vem
   mais abaixo — que ganha por vir depois no ficheiro. Ficou de proposito:
   e' o unico sitio onde o desenho antigo esta' escrito, e o dia em que se
   quiser voltar atras e' aqui que se comeca. Nao lhe acrescentar nada. */
@media (max-width: 640px) {
    .sa-ga-card {
        min-height: 176px;
        padding: 22px;
    }
    .sa-ga-card-title {
        font-size: 16px;
    }
    /* painel ocupa o ecra todo e entra de baixo — mais natural no telemovel */
    .sa-ga-drawer-panel {
        width: 100%;
        border-left: 0;
        border-top: 4px solid var(--color-orange);
        animation: saGaSlideUp 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sa-ga-detail-media {
        height: 160px;
    }
    .sa-ga-detail-head {
        padding: 26px 22px 0;
    }
    .sa-ga-detail-title {
        font-size: 21px;
    }
    .sa-ga-apps {
        padding: 24px 22px 32px;
        gap: 22px;
    }
    .sa-ga-drawer-nav button span {
        display: none;
    }
}

@keyframes saGaSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sa-ga-card,
    .sa-ga-card-bg,
    .sa-ga-card-arrow {
        transition: none;
    }
    .sa-ga-card:hover {
        transform: none;
    }
    .sa-ga-card:hover .sa-ga-card-bg {
        transform: none;
    }
    .sa-ga-drawer-backdrop,
    .sa-ga-drawer-panel {
        animation: none;
    }
}

/* --------------------------------------------------------------
   Pecas que so' existem no desenho de desktop. Ficam escondidas por
   defeito para o telemovel continuar exactamente como estava.
   -------------------------------------------------------------- */
.sa-ga-mark,
.sa-ga-title-2,
.sa-ga-card-chev,
.sa-ga-app-cta {
    display: none;
}

/* Tema sem foto: no telemovel a gaveta continua sem faixa de imagem,
   como hoje. A nopic e' so' para o lugar da direita do desktop. */
.sa-ga-detail-media.is-nopic {
    display: none;
}

/* A barra de posicao da fila de temas so' existe abaixo dos 1200 — no
   desktop a lista e' vertical e tem a sua propria barra. */
.sa-ga-rail {
    display: none;
}

/* ==============================================================
   TELEMOVEL E TABLET < 1200px — 2 Set 2026
   --------------------------------------------------------------
   O MESMO desenho do desktop, empilhado. Ate' aqui era outro: uma
   grelha de cartoes grandes (um por tema) que abria uma gaveta modal
   com as aplicacoes todas listadas. Com os 15 temas do Azoto, so' a
   grelha media 3050px de altura e a seccao inteira 3362.

   Agora:
       fila de temas na horizontal, com scroll lateral
       fotografia do tema por baixo
       uma aplicacao de cada vez, com as setas

   E' o desktop virado 90 graus, que foi o que a Sofia pediu. Nao ha'
   um so' elemento novo no HTML — mudam-se estas regras e o
   initGlobalApps() deixou de ter modos.

   Este bloco vem DEPOIS das regras de base de proposito: e' delas que
   herda tudo o que nao se repete aqui, e e' a elas que tem de ganhar.
   ============================================================== */
@media (max-width: 1199px) {

    /*
     * A margem do container NAO e' a mesma nas duas metades desta gama:
     * o .sa-ga-inner usa --container-padding-mobile (16px) e so' a
     * partir dos 1024 e' que passa a --container-padding (50px). A fila
     * tem de anular exactamente a que estiver em vigor, senao sangra a
     * mais e a PAGINA passa a rolar de lado (foi o que aconteceu a`
     * primeira: 35px de transbordo e o 1o separador cortado).
     */
    .sa-ga {
        --sa-ga-pad: var(--container-padding-mobile);
    }

    /* --- 1. a fila de temas ------------------------------------ */

    /*
     * Sangra ate' a`s bermas do ecra (as margens negativas anulam o
     * padding do container) para o ultimo separador nao ficar preso
     * atras da margem — e para se perceber, pelo corte, que aquilo
     * anda para o lado.
     */
    .sa-ga-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 calc(var(--sa-ga-pad) * -1);
        padding: 0 var(--sa-ga-pad);
        /* sem risco por baixo: quem faz de linha de base e' a .sa-ga-rail */
        scroll-snap-type: x proximity;
        /*
         * SEM isto o snap encosta o 1o separador a` berma do ecra e come a
         * margem: o `scroll-snap-align: start` alinha pela caixa da borda,
         * nao pelo conteudo, e o browser abria a pagina ja' com
         * scrollLeft = 16 (50 no tablet). Media-se, via-se o "METAIS"
         * cortado a meio.
         */
        scroll-padding-left: var(--sa-ga-pad);
        -webkit-overflow-scrolling: touch;
        /*
         * A barra NATIVA sai. Nao ha' maneira de a obrigar a ficar sempre
         * desenhada: em emulacao movel o Chrome reserva-lhe os 4px e depois
         * nao a pinta (provei com a track a verde e o thumb a magenta -- nao
         * apareceu nada), e no iOS ela e' overlay, aparece a arrastar e
         * desaparece. Quem faz esse trabalho e' a `.sa-ga-rail` aqui abaixo.
         */
        scrollbar-width: none;
    }

    .sa-ga-grid::-webkit-scrollbar {
        display: none;
    }

    /* --- 1b. a barra que diz que a fila anda ------------------- */

    /*
     * Sangra como a fila, para o risco atravessar o ecra de lado a lado. O
     * `thumb` e' proporcional ao que se ve' (com 15 temas fica curto, que e'
     * a informacao certa) e o initGlobalApps() mexe-lhe na largura e no
     * translateX.
     */
    .sa-ga-rail {
        display: block;
        position: relative;
        height: 3px;
        margin: 7px calc(var(--sa-ga-pad) * -1) 0;
        background: rgba(255, 255, 255, 0.12);
        overflow: hidden;
    }

    .sa-ga-rail[hidden] {
        display: none;
    }

    /*
     * BRANCO e nao laranja: o laranja ja' esta' a dizer outra coisa mesmo ao
     * lado (o sublinhado do separador activo). Duas marcas laranjas a 7px uma
     * da outra liam-se como a mesma coisa partida ao meio.
     */
    .sa-ga-rail-thumb {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 30%;
        background: rgba(255, 255, 255, 0.45);
        will-change: transform;
    }

    /* O cartao passa a separador: sem fundo, sem foto, sem icone, sem
       "Ver aplicacoes". Fica o nome e o sublinhado laranja do activo,
       que e' a marca que a coluna do desktop usa. */
    /* Sem tecto de largura: o separador e' tao largo quanto o nome do
       sector, numa linha so'. O mais comprido do Azoto da' ~500px, e
       ve^-se arrastando -- e' um scroller. */
    .sa-ga-card {
        flex: 0 0 auto;
        min-height: 0;
        padding: 15px 16px 13px;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        overflow: visible;
        scroll-snap-align: start;
        transition: border-color 200ms ease;
    }

    /* O cartao levantava-se 8px no hover. Num separador de 48px isso
       so' fazia a fila tremer. */
    .sa-ga-card:hover {
        transform: none;
        background: transparent;
        box-shadow: none;
    }

    .sa-ga-card.is-active {
        border-bottom-color: var(--color-orange);
    }

    .sa-ga-card-bg,
    .sa-ga-card.has-image::after,
    .sa-ga-card-icon,
    .sa-ga-card-cta {
        display: none;
    }

    .sa-ga-card-inner {
        display: block;
        gap: 0;
    }

    /*
     * UMA linha por separador (decisao da Sofia, 2 Set 2026). Cheguei a
     * po^-los a duas linhas com um tecto de 62vw, para os nomes compridos
     * ("Seguranca, Prevencao de Incendios, Arquivos e Conservacao")
     * caberem sem alargar a fila; ficava uma fila de altura dupla e com
     * separadores desalinhados. A uma linha a fila e' uma barra baixa e
     * limpa, e os nomes compridos resolvem-se com o scroll, que e' para
     * isso que ele la' esta'.
     */
    .sa-ga-card-title {
        margin: 0;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        white-space: nowrap;
        transition: color 200ms ease;
    }

    .sa-ga-card.is-active .sa-ga-card-title {
        color: #ffffff;
        font-weight: 500;
    }

    /* --- 2. o painel deixa de ser gaveta ----------------------- */

    .sa-ga-drawer {
        position: static;
        inset: auto;
        z-index: auto;
    }

    .sa-ga-drawer-backdrop,
    .sa-ga-drawer-close {
        display: none;
    }

    .sa-ga-drawer-panel {
        position: static;
        width: auto;
        display: block;
        background: transparent;
        border: 0;
        box-shadow: none;
        animation: none;
    }

    .sa-ga-drawer-body {
        flex: none;
        overflow: visible;
    }

    /* --- 3. a fotografia -------------------------------------- */

    .sa-ga-detail-media {
        height: 240px;
        margin-top: 28px;
    }

    /*
     * O MESMO esbatimento do desktop: limpo de cima ate' aos 62%, e a
     * escurecer so' no fim. A regra de base punha um veu de 25% na
     * fotografia INTEIRA (e opaco nos ultimos 2%), porque ali a legenda
     * vinha por cima da foto dentro da gaveta. Aqui a legenda vem por
     * BAIXO, no fundo escuro da seccao — nao ha' nada para proteger, e
     * a fotografia so' tinha a perder. Pedido da Sofia, 2 Set 2026.
     */
    .sa-ga-detail-media::after {
        background:
            linear-gradient(to top, rgba(0, 21, 36, 0.88) 0%, rgba(0, 21, 36, 0.45) 34%, rgba(0, 21, 36, 0) 62%);
    }

    /* Tema sem foto: entra a nopic com o veu carregado, como no
       desktop. Escondê-la fazia a seccao saltar de altura de tema
       para tema, agora que o painel esta' sempre a` vista.
       O veu pesado FICA: a nopic e' a aerea da fabrica, repete-se de
       tema para tema, e sem ele lia-se como a fotografia da aplicacao. */
    .sa-ga-detail-media.is-nopic {
        display: block;
    }

    .sa-ga-detail-media.is-nopic::after {
        background:
            linear-gradient(to top, rgba(0, 21, 36, 0.97) 0%, rgba(0, 21, 36, 0.88) 100%),
            rgba(0, 21, 36, 0.55);
    }

    /*
     * O nome do tema fica, ao contrario do desktop — la' a coluna da
     * esquerda esta' sempre a` vista com a linha activa marcada, aqui a
     * fila pode ter rolado para longe e o titulo da aplicacao sozinho
     * nao diz de que sector e'. Vai pequeno, como sobrescrito.
     */
    .sa-ga-detail-head {
        padding: 22px 0 0;
    }

    .sa-ga-detail-title {
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.14em;
        color: var(--color-orange);
    }

    /* --- 4. uma aplicacao de cada vez -------------------------- */

    .sa-ga-apps {
        padding: 14px 0 0;
        gap: 0;
    }

    /* Sem JS mostra-se a primeira; com JS manda o .is-current. E' a
       mesma rede que o bloco do desktop usa. */
    .sa-ga-apps > .sa-ga-app {
        display: none;
    }
    .sa-ga-apps:not(.is-ready) > .sa-ga-app:first-child,
    .sa-ga-apps.is-ready > .sa-ga-app.is-current {
        display: block;
    }

    .sa-ga-app-title {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .sa-ga-app-desc {
        font-size: 15px;
    }

    /* O "Talk to an Engineer" de cada aplicacao aparece agora tambem
       aqui: com uma aplicacao de cada vez deixou de haver o risco de
       N botoes iguais seguidos que o escondia. */
    .sa-ga-app-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 18px 0 0 17px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
        font-family: var(--font-family);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .sa-ga-app-cta:hover {
        border-bottom-color: var(--color-orange);
        color: var(--color-orange);
    }

    /* --- 5. as setas ------------------------------------------ */

    /* Redondas e centradas, com a posicao no meio — as do desenho do
       desktop. Ja' nao sao um rodape de gaveta, por isso perdem a
       barra de cima e o fundo. */
    .sa-ga-drawer-nav {
        justify-content: center;
        gap: 18px;
        margin-top: 26px;
        padding: 0;
        border-top: 0;
        background: transparent;
    }

    .sa-ga-drawer-nav button {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        color: #ffffff;
    }

    .sa-ga-drawer-nav button:hover:not(:disabled) {
        border-color: var(--color-orange);
        background: var(--color-orange);
    }

    /* "Anterior"/"Seguinte" saem: o botao passou a ser so' o simbolo. */
    .sa-ga-drawer-nav button span {
        display: none;
    }

    .sa-ga-drawer-pos {
        min-width: 62px;
        text-align: center;
        font-size: 13px;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.55);
        font-variant-numeric: tabular-nums;
    }
}

/* Dos 1024 aos 1199 o container ja' usa a margem grande — a fila tem de
   anular essa e nao a do telemovel. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .sa-ga {
        --sa-ga-pad: var(--container-padding);
    }
}

/* Ecras estreitos: a fotografia baixa, para o conjunto caber sem obrigar
   a rolar duas vezes. */
@media (max-width: 640px) {
    .sa-ga-detail-media {
        height: 200px;
        margin-top: 24px;
    }
    .sa-ga-card {
        padding: 14px 14px 12px;
    }
    .sa-ga-app-title {
        font-size: 17px;
    }
}

/* O `prefers-reduced-motion` de cima ja' desliga as animacoes da gaveta;
   aqui so' falta o deslizar da fila ao trocar de tema. */
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
    .sa-ga-grid {
        scroll-behavior: auto;
    }
    .sa-ga-card,
    .sa-ga-card-title {
        transition: none;
    }
}

/* ==============================================================
   DESKTOP >= 1200px — o desenho do design reference
   (`____figma sysadvance prototype v5`, GlobalApplications da
   NitrogenPage.tsx), reposto a 1 Set 2026.
   --------------------------------------------------------------
   Metade esquerda: quadrado laranja, "APPLICATIONS / GLOBAL" em duas
                    linhas, e a lista dos temas — contida, letra
                    pequena em maiusculas, e a ROLAR dentro de si
                    propria com a barra laranja a` direita.
   Metade direita:  a fotografia do tema activo, com a legenda da
                    aplicacao actual e as setas.

   A seccao tem exactamente 100vh: e' a lista que rola, nao a pagina.
   Por isso a coluna da direita nao precisa de `sticky` — enche a
   celula da grelha e fica quieta.

   Sao os mesmos elementos do telemovel, so' que:
     .sa-ga-grid   grelha de cartoes  ->  lista com scroll proprio
     .sa-ga-drawer gaveta fixa        ->  coluna direita
     .sa-ga-app    lista empilhada    ->  uma legenda de cada vez

   1200 e nao 1024 de proposito: a 1024, quinze temas com titulos como
   "Seguranca, Prevencao de Incendios, Arquivos e Conservacao" ao lado
   de uma foto ficam esmagados contra a margem.
   ============================================================== */
@media (min-width: 1200px) {

    /* A seccao sangra de margem a margem; o texto e' que se alinha ao
       container. Sem isto a foto ficava com uma calha a` direita nos
       ecras acima de 1662. */
    .sa-ga {
        --sa-ga-gutter: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
        padding: 0;
    }

    .sa-ga-inner {
        max-width: none;
        margin: 0;
        padding: 0;
        display: grid;
        /* 1/3 para a lista, 2/3 para a fotografia -- e' o que o desenho tem
           (`md:w-1/3` + `md:w-2/3` no prototipo). Esteve meio a meio ate' 1 Set
           2026, e era isso que empurrava o texto da legenda para cima do
           esbatimento e obrigava a andar com ele para a direita. */
        grid-template-columns: 1fr 2fr;
        align-items: stretch;
        height: 100vh;
        min-height: 640px;
    }

    /*
     * O padding de baixo e' grande de proposito: a barra de navegacao
     * flutuante (.sa-nav, position:fixed, bottom:50px, 43px de altura)
     * passa por cima do meio da seccao. Sem esta folga a ultima linha
     * da lista ficava por baixo dela.
     */
    .sa-ga-col {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding: 72px 64px 112px var(--sa-ga-gutter);
    }

    /* --- Cabecalho --- */
    .sa-ga-header {
        text-align: left;
        margin: 0 0 40px;
        flex-shrink: 0;
    }

    /* o quadrado laranja do desenho, no lugar de uma sobrelinha de texto */
    .sa-ga-mark {
        display: block;
        width: 16px;
        height: 16px;
        background: var(--color-orange);
        margin: 0 0 32px;
    }

    .sa-ga-title {
        font-size: clamp(30px, 2.6vw, 40px);
        font-weight: 500;
        line-height: 1.15;
        margin: 0;
    }

    .sa-ga-title-2 {
        display: block;
    }

    /* no desenho o titulo vem sozinho: sem risco e sem subtitulo */
    .sa-ga-divider,
    .sa-ga-subtitle {
        display: none;
    }

    /* --- Os temas: de grelha a lista com scroll proprio --- */
    .sa-ga-grid {
        display: block;
        gap: 0;
        max-width: 560px;
        /* min-height:0 e' obrigatorio: sem isso um filho que rola dentro
           de um flex container nunca encolhe abaixo do seu conteudo e a
           barra nunca chega a aparecer */
        min-height: 0;
        overflow-y: auto;
        padding-right: 18px;
    }

    /*
     * Nada de `overscroll-behavior: contain` aqui: com a seccao a ocupar o
     * ecra todo, isso prendia a pagina — chegado ao fim da lista, a roda do
     * rato deixava de fazer nada enquanto o cursor estivesse por cima dela.
     * Assim a lista rola primeiro e a pagina continua a seguir, que e' o que
     * se espera.
     */
    .sa-ga-grid::-webkit-scrollbar {
        width: 4px;
    }

    .sa-ga-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.08);
    }

    .sa-ga-grid::-webkit-scrollbar-thumb {
        background: var(--color-orange);
    }

    /*
     * O Firefox nao tem os pseudo-elementos acima, so' as propriedades
     * padrao. Mas estas NAO se podem declarar sempre: no Chrome, declarar
     * `scrollbar-color` DESLIGA o ::-webkit-scrollbar e volta a barra do
     * sistema, com setas nas pontas. Por isso ficam so' onde fazem falta.
     */
    @supports not selector(::-webkit-scrollbar) {
        .sa-ga-grid {
            scrollbar-width: thin;
            scrollbar-color: var(--color-orange) rgba(255, 255, 255, 0.08);
        }
    }

    .sa-ga-card {
        width: 100%;
        min-height: 0;
        padding: 0;
        background: none;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* a barra do accent existe sempre, transparente, para a linha nao
           mudar de largura quando fica activa */
        border-left: 4px solid transparent;
        transition: background 200ms ease, border-color 200ms ease;
    }

    .sa-ga-card:hover {
        transform: none;
        box-shadow: none;
        background: none;
    }

    .sa-ga-card.is-active,
    .sa-ga-card.is-active:hover {
        background: rgba(255, 255, 255, 0.05);
        border-left-color: var(--color-orange);
    }

    /* a foto do tema e o veu de leitura sao coisa dos cartoes */
    .sa-ga-card-bg,
    .sa-ga-card.has-image::after,
    .sa-ga-card-icon {
        display: none;
    }

    /* o texto avanca ao passar o rato e mais um pouco quando fica activo
       — e' o `hover:pl-2` / `pl-4` do prototipo */
    .sa-ga-card-inner {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 22px 0;
        transition: padding-left 200ms ease;
    }

    .sa-ga-card:hover .sa-ga-card-inner {
        padding-left: 8px;
    }

    .sa-ga-card.is-active .sa-ga-card-inner,
    .sa-ga-card.is-active:hover .sa-ga-card-inner {
        padding-left: 16px;
    }

    .sa-ga-card-title {
        flex: 1;
        margin-top: 0;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.45;
        letter-spacing: 0.1em;
        color: #6b7280;
        transition: color 200ms ease;
    }

    .sa-ga-card:hover .sa-ga-card-title {
        color: #d1d5db;
    }

    .sa-ga-card.is-active .sa-ga-card-title,
    .sa-ga-card.is-active:hover .sa-ga-card-title {
        font-weight: 500;
        color: #ffffff;
    }

    /* do "Ver aplicacoes ->" fica so' o chevron, e so' na linha activa */
    .sa-ga-card-cta {
        margin: 0 16px 0 0;
        flex-shrink: 0;
        opacity: 0;
        color: var(--color-orange);
        transition: opacity 200ms ease;
    }

    .sa-ga-card-cta > span,
    .sa-ga-card-arrow {
        display: none;
    }

    .sa-ga-card-chev {
        display: block;
    }

    .sa-ga-card.is-active .sa-ga-card-cta {
        opacity: 1;
    }

    .sa-ga-card:focus-visible {
        outline-offset: -2px;
    }

    /* --- A coluna da direita: a gaveta deixa de ser gaveta --- */
    .sa-ga-drawer,
    .sa-ga-drawer[hidden] {
        display: block;
        position: relative;
        inset: auto;
        z-index: 1;
        height: 100%;
        overflow: hidden;
    }

    .sa-ga-drawer-backdrop,
    .sa-ga-drawer-close,
    .sa-ga-detail-head {
        display: none;
    }

    /*
     * O painel e' a grelha da legenda: uma linha encostada ao fundo, com o
     * texto na 1a celula e as setas na 2a. E' isto que poe as setas ao lado
     * do titulo da aplicacao, como no desenho, em vez de as deixar soltas no
     * canto inferior direito.
     *
     * `align-content: end` cola a linha ao fundo; o `align-items: start` da
     * celula das setas alinha-as pelo TOPO do bloco, ou seja pela linha do
     * titulo, independentemente de a descricao ter duas ou quatro linhas.
     *
     * UMA so' coluna, com as setas por cima dela encostadas a` direita
     * (`justify-self: end` mais abaixo). No desenho as setas acabam onde acaba
     * o texto, nao depois dele -- medido no print da Sofia: texto 6,2% -> 49,5%
     * da largura do painel, setas 43% -> 49,5%.
     *
     * Os 56px da esquerda sao os do desenho. Cheguei a po^-los a 26% para tirar
     * o texto de cima do esbatimento, e estava errado: no desenho o texto esta'
     * mesmo encostado a` esquerda da fotografia. O 120px em baixo e' a folga da
     * barra flutuante `.sa-nav`.
     */
    .sa-ga-drawer-panel {
        position: absolute;
        inset: 0;
        display: grid;
        /* No desenho o bloco de texto vale 43% da largura da fotografia. Em px
           puros ficava estreito a 1600 e largo demais a 2560 (uma linha de 700px
           nao se le'), por isso vai em percentagem com travoes nas pontas.
           Os 48,5% sao da CAIXA DE CONTEUDO da grelha (o painel menos os
           paddings), o que da' os 43% da largura do painel que o desenho pede. */
        grid-template-columns: minmax(0, clamp(340px, 48.5%, 560px));
        justify-content: start;
        align-content: end;
        width: auto;
        /*
         * 64px em baixo, do desenho: la' a margem inferior vale 0,40 da altura
         * do bloco (46px para um bloco de 115 no print da Sofia); aqui o bloco
         * tem ~158px, logo 64. Estava a 120, que era o dobro.
         *
         * ATENCAO: so' cabe aqui porque a barra flutuante `.sa-nav` esta'
         * escondida enquanto esta seccao esta' no ecra. Isso hoje acontece por
         * ACIDENTE -- o observador do `template-nav-bottom.tpl` faz
         * `querySelector('footer')` e apanha o <footer> das setas deste bloco
         * em vez do rodape da pagina. Se esse defeito for corrigido, a barra
         * volta a aparecer aqui (topo a 93px do fundo, 117 acima dos 2200) e
         * cai em cima do "Talk to an Engineer": nessa altura ou se sobe isto
         * para 104/128, ou se passa a esconder a barra de PROPOSITO nesta
         * seccao.
         */
        padding: 0 56px 64px clamp(48px, 6.3%, 110px);
        background: var(--color-dark);
        border-left: 0;
        box-shadow: none;
        animation: none;
    }

    /* fica SEM posicao: se fosse `relative` passava a ser o bloco de
       referencia da fotografia, que e' absoluta, e a foto encolhia ao
       tamanho da legenda */
    .sa-ga-drawer-body {
        position: static;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        overflow: visible;
    }

    .sa-ga-detail {
        position: static;
        inset: auto;
        width: 100%;
    }

    /* --- A fotografia --- */
    /*
     * Continua a encher o painel todo: o `.sa-ga-detail` deixou de ser
     * posicionado, por isso o `inset: 0` resolve-se contra o painel, que e'
     * a caixa toda (o padding fica dentro dela).
     */
    .sa-ga-detail-media,
    .sa-ga-detail-media.is-nopic {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        height: auto;
    }

    /*
     * SEM esbatimento para a esquerda: no desenho a fotografia tem aresta viva
     * contra a coluna escura, nao entra nela. O que fica e' so' o escurecer em
     * baixo, e esse tem de ficar: a legenda e' branca e as fotografias vem do
     * cliente, algumas claras naquele canto.
     */
    .sa-ga-detail-media::after {
        background:
            linear-gradient(to top, rgba(0, 21, 36, 0.88) 0%, rgba(0, 21, 36, 0.45) 34%, rgba(0, 21, 36, 0) 62%);
    }

    /*
     * Sem foto do tema entra a nopic da casa (a aerea da fabrica), que e'
     * pequena para este lugar e repete-se de tema para tema. Por isso leva
     * veu quase opaco: passa a fundo industrial, nao a fotografia da
     * aplicacao. Quando o cliente carregar as fotos reais esta regra deixa
     * de apanhar nada sozinha.
     */
    .sa-ga-detail-media.is-nopic::after {
        background:
            linear-gradient(to top, rgba(0, 21, 36, 0.97) 0%, rgba(0, 21, 36, 0.88) 100%),
            rgba(0, 21, 36, 0.55);
    }

    /* --- A legenda: uma aplicacao de cada vez --- */
    /* posicionada so' para ficar POR CIMA da fotografia (que e' absoluta
       e por isso pinta depois do conteudo em fluxo) */
    .sa-ga-apps {
        position: relative;
        z-index: 1;
        inset: auto;
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .sa-ga-app {
        display: none;
    }

    /* antes do JS correr mostra-se a primeira; depois manda o .is-current */
    .sa-ga-apps:not(.is-ready) > .sa-ga-app:first-child,
    .sa-ga-apps.is-ready > .sa-ga-app.is-current {
        display: block;
        animation: saGaFade 300ms ease;
    }

    .sa-ga-app-title {
        font-weight: 500;
        font-size: clamp(22px, 1.7vw, 30px);
        line-height: 1.15;
        letter-spacing: -0.01em;
        margin: 0 0 12px;
        /*
         * Ar entre o risco laranja e a letra. Estava a 0 e, com o titulo aos
         * 30px, o risco ficava colado ao "C" de CORTE. 18 de padding + os 3 da
         * borda poem o texto aos 21 — e e' por isso que a descricao aqui
         * abaixo leva 21 e nao 18: ela nao tem borda, e assim as duas linhas
         * arrancam do mesmo sitio.
         */
        padding-left: 18px;
        /* as setas ficam por cima do canto superior direito deste bloco: o
           titulo reserva-lhes o lugar para nunca lhes passar por baixo. Um
           titulo comprido parte a linha antes delas. */
        padding-right: 112px;
    }

    /* Sem setas (tema com uma so' aplicacao, como no Helio) o titulo usa a
       largura toda -- senao partia a linha por causa de um espaco vazio.
       Sem borda tambem: e ai' o padding sobe aos 21, para o titulo continuar
       alinhado com a descricao. */
    .sa-ga.is-sem-setas .sa-ga-app-title {
        padding-right: 0;
        border-left: 0;
        padding-left: 21px;
    }

    .sa-ga-app-desc {
        font-size: 15.5px;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.72);
        /* 21 = os 18 do titulo + os 3 da borda dele. Sem isto a descricao
           arrancava 21px a` esquerda do titulo. */
        padding-left: 21px;
    }

    /*
     * "Talk to an Engineer", um por aplicacao. Vai ao formulario dos
     * Contactos com o assunto ja' escolhido, como todos os outros botoes com
     * este nome no site. O risco por baixo e' `border-bottom` e nao
     * `text-decoration` para poder ficar afastado do texto e mudar de cor
     * sozinho no hover.
     */
    .sa-ga-app-cta {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-top: 18px;
        /* alinhado com o titulo e a descricao, nos mesmos 21 */
        margin-left: 21px;
        padding-bottom: 7px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        text-decoration: none;
        color: #ffffff;
        transition: color 200ms ease, border-color 200ms ease;
    }

    .sa-ga-app-cta svg {
        transition: transform 200ms ease;
    }

    .sa-ga-app-cta:hover,
    .sa-ga-app-cta:focus-visible {
        color: var(--color-orange);
        border-bottom-color: var(--color-orange);
    }

    .sa-ga-app-cta:hover svg {
        transform: translateX(4px);
    }

    /* --- As setas, ao fim da linha do titulo --- */
    /*
     * Mesma celula da grelha que o texto (`grid-column: 1`), encostadas a`
     * direita e ao topo: ficam onde acaba o bloco de texto e a` altura da 1a
     * linha do titulo, que e' o que o desenho mostra. Numa 2a coluna iam parar
     * aos 84% do painel, muito longe do texto.
     */
    .sa-ga-drawer-nav {
        position: relative;
        inset: auto;
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        /* o titulo tem ~31px de altura de linha e o botao 40px: sobe-se
           metade da diferenca para os dois ficarem centrados um no outro */
        margin-top: -5px;
        width: auto;
        justify-content: flex-start;
        gap: 10px;
        padding: 0;
        border-top: 0;
        background: none;
    }

    .sa-ga-drawer-nav button {
        width: 40px;
        height: 40px;
        justify-content: center;
        gap: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(0, 21, 36, 0.35);
        color: #ffffff;
        transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
    }

    .sa-ga-drawer-nav button:hover:not(:disabled) {
        background: var(--color-orange);
        border-color: var(--color-orange);
        color: #ffffff;
    }

    .sa-ga-drawer-nav button:disabled {
        opacity: 0.3;
    }

    .sa-ga-drawer-nav button span {
        display: none;
    }

    /* o contador "01 / 04" nao existe no desenho do desktop; no telemovel
       continua a dizer em que tema se esta' */
    .sa-ga-drawer-pos {
        display: none;
    }

    /* rede de seguranca: se alguem redimensionar com a gaveta aberta, a
       pagina nao pode ficar com o scroll bloqueado */
    body.sa-ga-open {
        overflow: visible;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .sa-ga-card-inner,
    .sa-ga-apps:not(.is-ready) > .sa-ga-app:first-child,
    .sa-ga-apps.is-ready > .sa-ga-app.is-current {
        transition: none;
        animation: none;
    }
}

/* ==============================
   Process Diagrams section (sa-pd)
   Two-row layout: text+diagram, then process flow
   ============================== */

.sa-pd {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-pd-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-pd-inner {
        padding: 0 var(--container-padding);
    }
}

/* Top row: text + vertical diagram */
.sa-pd-top {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-bottom: 96px;
}

@media (min-width: 1024px) {
    .sa-pd-top {
        flex-direction: row;
        align-items: center;
    }
}

.sa-pd-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sa-pd-overline {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
    margin: 0;
}

.sa-pd-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--color-primary);
    margin: 0;
}

.sa-pd-divider {
    width: 48px;
    height: 4px;
    background: var(--color-orange);
}

.sa-pd-divider-blue {
    width: 48px;
    height: 4px;
    background: var(--color-primary);
}

.sa-pd-body {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: #6b7280;
}

.sa-pd-body p {
    margin: 0 0 16px;
}

.sa-pd-body p:last-child {
    margin-bottom: 0;
}

/* Diagram image */
.sa-pd-diagram {
    flex: 1;
    text-align: center;
}

.sa-pd-diagram-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 24px;
}

.sa-pd-diagram img {
    max-width: 100%;
    height: auto;
}

/* Bottom row: process flow */
.sa-pd-bottom {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.sa-pd-bottom img {
    max-width: 1048px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.sa-pd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1048px;
    margin: 0 auto;
}

.sa-pd-grid img {
    margin: 0;
}

@media (max-width: 768px) {
    .sa-pd-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 1024px) {
    .sa-pd {
        padding: 64px 0;
    }
    .sa-pd-top {
        margin-bottom: 64px;
    }
    .sa-pd-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .sa-pd-inner {
        padding: 0 20px;
    }
}

/* ==============================
   Download Catalog section (sa-dl)
   Fundo escuro, titulo + descricao + dois botoes a` esquerda, capa a` direita.

   Desenho de 1 Set 2026. Antes era so' texto a` esquerda e um botao a` direita
   (justify-content: space-between entre os dois). Agora os botoes vivem dentro
   da coluna de texto e o lugar da direita e' da capa.

   A COR: `--color-orange` e' reescrito por sector la' em cima (linhas 35-36),
   por isso os botoes saem laranja no Industrial, azuis no Medical e verdes na
   Energy sem uma unica regra por sector aqui.
   ============================== */

.sa-dl {
    background: #001524;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-dl-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    position: relative;
    z-index: 5;
}

@media (min-width: 1024px) {
    .sa-dl-inner {
        padding: 0 var(--container-padding);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 64px;
    }
}

/* A coluna e' mais estreita do que os 640px de antes para o paragrafo quebrar
   onde quebra no desenho -- e e' ela que da' a largura ao botao. */
.sa-dl-text {
    max-width: 520px;
}

.sa-dl-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 16px;
}

.sa-dl-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #9ca3af;
    margin: 0;
}

/*
 * O botao ocupa a LARGURA DA COLUNA, e nao a do proprio rotulo -- e' assim no
 * desenho, e faz o bloco de texto ler-se como uma peca so'. Em coluna e nao em
 * linha porque ja' so' ha' um botao aqui: o Download passou para os cartoes.
 */
.sa-dl-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 32px;
}

.sa-dl-actions .sa-dl-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 13px;
}

.sa-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: var(--color-orange);
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    /* 300 e nao 500: o desenho pede a letra fina nos dois botoes. */
    font-weight: 300;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, filter 200ms ease;
    flex-shrink: 0;
}

.sa-dl-btn:hover {
    filter: brightness(1.15);
    color: #ffffff;
    text-decoration: none;
}

/*
 * O segundo botao ("View all brochures") e' de contorno, nao preenchido: dois
 * botoes cheios da mesma cor lado a lado disputavam o olho um com o outro, e a
 * accao principal e' descarregar. O contorno faz-se com um inset box-shadow em
 * vez de border para o botao nao mudar de tamanho ao passar a preenchido.
 */
.sa-dl-btn--ghost {
    background: transparent;
    color: var(--color-orange);
    box-shadow: inset 0 0 0 1px var(--color-orange);
}

.sa-dl-btn--ghost:hover {
    background: var(--color-orange);
    color: #ffffff;
    filter: none;
}

/* A seta de download so' nos botoes dos CARTOES.
   Ate 2 Set 2026 era `:not(.sa-dl-btn--ghost)`, quando o Download vivia na
   coluna da esquerda. Agora o unico botao a` esquerda e' o "View all
   brochures", que nao descarrega nada -- e com a seta prometia o que nao faz. */
/* 25.709px sao os do Figma. O `background-size: contain` la' em baixo faz o
   desenho acompanhar, por isso o SVG embutido pode continuar a dizer 18. */
.sa-dl-card-btn::before {
    content: '';
    display: inline-block;
    width: 25.709px;
    height: 25.709px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/*
 * A capa: a 1a pagina do PDF. Sem moldura -- a propria pagina ja' e' branca e,
 * contra o azul escuro, ja' se destaca sozinha. So' uma sombra a dar-lhe corpo,
 * como uma brochura pousada.
 */
/*
 * Um cartao por catalogo (2 Set 2026). Antes era uma capa so' (.sa-dl-cover);
 * agora a pagina de produto mostra o catalogo da area E o da sub-area, quando
 * ela tem um proprio, por isso isto passou a ser uma fila.
 *
 * Com um catalogo so' -- que e' o caso de todas as paginas hoje -- desenha um
 * cartao e fica igual ao que estava.
 */
.sa-dl-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex-shrink: 0;
}

/* 211px: e' a largura do botao no Figma (210.894), e como o botao ocupa o
   cartao todo e' ela que manda -- a capa acompanha. */
.sa-dl-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 211px;
}

.sa-dl-card-capa {
    display: block;
    line-height: 0;
    cursor: pointer;
}

.sa-dl-card-capa img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    transition: transform 260ms ease, box-shadow 260ms ease;
}

/* A capa descarrega o mesmo PDF que o botao -- o hover esta' no link, e nao na
   imagem, para a area toda responder. */
.sa-dl-card-capa:hover img {
    transform: translateY(-4px);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.55);
}

/*
 * O nome do catalogo, discreto. Nao e' titulo de nada: e' so' para desempatar
 * dois cartoes lado a lado, cujas capas podem ser muito parecidas. Com um
 * cartao so' quase nao se da' por ele, que e' o que se quer.
 */
.sa-dl-card-nome {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.62);
}

/*
 * O botao acompanha a largura do cartao, e por dentro a seta e o rotulo vao
 * cada um para o seu canto -- seta encostada a` esquerda, texto alinhado a`
 * direita. E' o que esta' no desenho, e da'-lhe um ar de barra em vez de
 * etiqueta centrada.
 *
 * `space-between` faz o afastamento; o `text-align: right` e' para o rotulo
 * ficar certo quando passa a duas linhas, que e' o caso em 200px.
 */
/*
 * Valores do Figma, tal e qual.
 *
 * Duas coisas que eu tinha adivinhado mal antes de ver a caixa do desenho:
 *
 *   - o afastamento entre a seta e o rotulo NAO e' `space-between`: e'
 *     `center` com um `gap` grande (28.291px). Da' quase o mesmo com o texto
 *     que ha' hoje, mas nao e' a mesma coisa -- com um rotulo mais curto, o
 *     space-between atirava a seta para o canto e aqui o conjunto fica centrado;
 *   - o alinhamento vertical e' `flex-end` e nao `center`: a seta encosta a`
 *     BASE, ao nivel da ultima linha do texto, em vez de ficar a meio das duas.
 *
 * A altura sai da conta e nao esta' escrita: 28.8 de texto (2 x 14.414) mais
 * 11.167 + 13 de padding = 52.97, contra os 53.167 do Figma.
 */
.sa-dl-card-btn {
    justify-content: center;
    /* O Figma diz `flex-end` na caixa, mas a Sofia quer a seta ao meio -- e com
       ela a 25.709 contra 28.8 de texto a diferenca entre um e outro sao 1.5px,
       por isso o `center` nao desalinha nada. O texto e' o item mais alto, logo
       continua a ser ele a mandar na altura e nao se mexe. */
    align-items: center;
    gap: 28.291px;
    padding: 11.167px 11.894px 13px 11px;
    color: #ffffff;
    text-align: right;
    font-size: 14px;
    font-weight: 300;
    line-height: 14.414px;
    letter-spacing: 1.009px;
}

@media (prefers-reduced-motion: reduce) {
    .sa-dl-cover img,
    .sa-dl-btn {
        transition: none;
    }
    .sa-dl-cover a:hover img {
        transform: none;
    }
}

/*
 * Abaixo dos 1024 o bloco passa a coluna e a capa vai para CIMA do titulo
 * (order: -1). Assim le'-se "isto e' o que vais levar" antes do texto, em vez
 * de a capa ficar esquecida por baixo dos botoes.
 *
 * 1023 e nao 1024 de proposito: a regra de cima e' min-width:1024, e nos exactos
 * 1024px as duas valiam ao mesmo tempo -- a capa saltava para a ESQUERDA do
 * texto, em linha.
 */
@media (max-width: 1023px) {
    .sa-dl-cover {
        order: -1;
    }
    .sa-dl-cover img {
        width: 150px;
    }
}

@media (max-width: 1024px) {
    .sa-dl {
        padding: 64px 0;
    }
    .sa-dl-title {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .sa-dl-inner {
        padding: 0 20px;
    }
    .sa-dl-actions {
        width: 100%;
    }
    .sa-dl-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================
   Error Pages (404 / 403)
   ============================== */

.sa-err-hero {
    position: relative;
    min-height: 180px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
}

.sa-err-main {
    background-color: var(--color-bg-light);
    padding: 80px var(--container-padding-mobile) 120px;
    display: flex;
    justify-content: center;
}

.sa-err-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
}

.sa-err-code {
    font-family: var(--font-family);
    font-size: clamp(96px, 16vw, 200px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
}

.sa-err-accent {
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--color-orange);
    margin: 24px auto 32px;
    border-radius: 2px;
}

.sa-err-title {
    font-family: var(--font-family);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 16px;
}

.sa-err-desc {
    font-family: var(--font-family);
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 auto 40px;
    max-width: 480px;
}

.sa-err-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.sa-err-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-err-btn-primary {
    background-color: var(--color-primary);
    color: #fff;
}

.sa-err-btn-primary:hover {
    background-color: var(--color-orange);
    color: #fff;
    text-decoration: none;
}

@media (min-width: 1024px) {
    .sa-err-hero {
        min-height: 140px;
    }
    .sa-err-main {
        padding: 120px var(--container-padding) 160px;
    }
}

@media (max-width: 600px) {
    .sa-err-main {
        padding: 60px 20px 80px;
    }
    .sa-err-btn {
        width: 100%;
    }
}

/* ============================================================
   NITROGEN PROJECTS — Reference Projects / "Nitrogen in the Field"
   ============================================================ */
.sa-np {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    padding: 96px 0;
}

.sa-np-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Header */
.sa-np-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: 32px;
    margin-bottom: 64px;
    border-bottom: 1px solid #e5e7eb;
}

.sa-np-eyebrow {
    display: block;
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-orange);
    margin-bottom: 12px;
}

.sa-np-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.sa-np-title-light {
    font-weight: 300;
    color: #9ca3af;
}

.sa-np-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
    text-decoration: none;
    transition: gap 200ms ease;
    flex-shrink: 0;
}

.sa-np-all:hover,
.sa-np-all:focus {
    gap: 16px;
    color: var(--color-orange);
}

.sa-np-all svg {
    width: 14px;
    height: 14px;
}

/* Tabs */
.sa-np-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.sa-np-tab {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #9ca3af;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 200ms ease;
}

.sa-np-tab:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.sa-np-tab.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Projects */
.sa-np-projects {
    position: relative;
}

.sa-np-project {
    display: none;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #fff;
}

.sa-np-project.is-active {
    display: grid;
}

/* Image side */
.sa-np-project-img {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.sa-np-project-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-np-project-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.7), transparent 60%);
}

.sa-np-project-img-meta {
    position: absolute;
    left: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-np-chip {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
}

.sa-np-meta {
    font-family: 'Kanit', sans-serif;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
}

/* Content side */
.sa-np-project-content {
    background: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.sa-np-project-title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 24px;
}

.sa-np-project-desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 32px;
}

/* Specs strip */
.sa-np-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #f1f5f9;
    margin-bottom: 32px;
}

.sa-np-spec {
    padding: 16px 8px;
    text-align: center;
    border-right: 1px solid #f1f5f9;
}

.sa-np-spec:last-child {
    border-right: none;
}

.sa-np-spec-val {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--color-primary);
    margin: 0;
}

.sa-np-spec-label {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin: 4px 0 0;
}

/* Read more */
.sa-np-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-orange);
    text-decoration: none;
    transition: gap 200ms ease;
}

.sa-np-readmore:hover,
.sa-np-readmore:focus {
    gap: 16px;
    color: var(--color-orange);
}

.sa-np-readmore svg {
    width: 13px;
    height: 13px;
}

/* Dashes */
/* Barra de navegacao: setas + tracos + contador */
.sa-np-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

/* Discretas: mantem-se os 44x44 de area de clique (o alvo continua grande),
   mas sem caixa nem fundo — so o icone leve, que ganha a cor do sector ao
   passar o rato. O mesmo principio dos tracos: alvo grande, peso visual baixo. */
.sa-np-arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 200ms ease, transform 200ms ease;
}

.sa-np-arrow svg { width: 18px; height: 18px; }

.sa-np-arrow:hover { color: var(--color-orange, #ED6E00); }
.sa-np-arrow[data-np-prev]:hover { transform: translateX(-2px); }
.sa-np-arrow[data-np-next]:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .sa-np-arrow { transition: color 200ms ease; }
    .sa-np-arrow:hover { transform: none; }
}

.sa-np-arrow:focus-visible {
    outline: 2px solid var(--color-orange, #ED6E00);
    outline-offset: 2px;
}

.sa-np-counter {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-left: auto;
}

.sa-np-dashes {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* O traco visivel continua com 3px, mas o BOTAO passa a ter 32px de altura:
   3px era alvo pequeno de mais para acertar com o rato ou o dedo. A linha e
   desenhada no ::before, o botao fica transparente. */
.sa-np-dash {
    height: 32px;
    width: 16px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 300ms ease;
}

.sa-np-dash::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #d1d5db;
    transition: background 300ms ease;
}

.sa-np-dash:hover::before { background: #9ca3af; }

.sa-np-dash:focus-visible {
    outline: 2px solid var(--color-orange, #ED6E00);
    outline-offset: 3px;
}

.sa-np-dash.is-active::before { background: var(--color-orange, #ED6E00); }

.sa-np-dash.is-active {
    width: 40px;
}

/* Responsive */
@media (max-width: 900px) {
    .sa-np {
        padding: 64px 0;
    }
    .sa-np-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40px;
    }
    .sa-np-title {
        font-size: 32px;
    }
    .sa-np-project {
        grid-template-columns: 1fr;
    }
    .sa-np-project-img {
        height: 280px;
    }
    .sa-np-project-content {
        padding: 32px 24px;
    }
    .sa-np-specs {
        grid-template-columns: repeat(2, 1fr);
    }
    .sa-np-spec {
        border-bottom: 1px solid #f1f5f9;
    }
    .sa-np-spec:nth-child(2) {
        border-right: none;
    }
    .sa-np-spec:nth-child(3),
    .sa-np-spec:nth-child(4) {
        border-bottom: none;
    }
}

@media (max-width: 600px) {
    .sa-np-title {
        font-size: 26px;
    }
    .sa-np-tab {
        padding: 8px 14px;
        font-size: 11px;
    }
    .sa-np-project-title {
        font-size: 18px;
    }
}

/* ==============================
   News Page (sa-news)
   ============================== */

/* Hero */
.sa-news-hero {
    position: relative;
    width: 100%;
    height: 520px;
    background: var(--color-dark);
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-news-hero-bg {
    position: absolute;
    inset: 0;
}

.sa-news-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.sa-news-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 21, 36, 0.95) 0%, rgba(0, 21, 36, 0.75) 50%, transparent 100%);
}

.sa-news-hero-inner {
    position: relative;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
}

@media (min-width: 1024px) {
    .sa-news-hero-inner {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

.sa-news-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    color: var(--color-primary);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-news-hero-breadcrumb svg {
    width: 12px;
    height: 12px;
}

.sa-news-hero-title {
    display: flex;
    flex-direction: column;
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .sa-news-hero-title {
        font-size: 80px;
    }
}

.sa-news-hero-title-light {
    font-weight: 300;
    color: #ffffff;
}

.sa-news-hero-title-bold {
    font-weight: 500;
    color: #ffffff;
}

.sa-news-hero-tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #d1d5dc;
    max-width: 480px;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-news-hero-tagline {
        font-size: 18px;
    }
}

/* Featured */
.sa-news-featured {
    background: #ffffff;
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-news-featured-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;   /* anchor for the stretched "Read full article" link */
    cursor: pointer;
}

/* Whole featured block clickable — stretched-link pattern.
   The horizontal inset matches this container's own padding so the click area
   stops at the image/text edges instead of spilling into the page gutters. */
.sa-news-featured-btn::after {
    content: "";
    position: absolute;
    inset: 0 var(--container-padding-mobile);
    z-index: 1;
}
@media (min-width: 1024px) {
    .sa-news-featured-btn::after { inset: 0 var(--container-padding); }
}

@media (min-width: 1024px) {
    .sa-news-featured-inner {
        padding: 0 var(--container-padding);
        grid-template-columns: 1fr 1fr;
    }
}

/* As imagens em destaque sao capas de relatorios e revistas -- TEM TEXTO.
   Com `cover` a imagem era recortada para encher a caixa e o texto da capa
   ficava cortado. Com `contain` nada e cortado: a capa aparece inteira e
   sobra margem, que leva a cor do painel de texto ao lado para parecer
   intencional em vez de um buraco. */
.sa-news-featured-image {
    position: relative;
    /* 16:9 com um chao de 420px, em vez de 420px fixos (22 Set 2026). As
       fotos das noticias sao ~16:9 (800x439); com a altura fixa, num ecra
       largo a caixa ficava achatada (3,2:1 aos 3440) e a foto, em `contain`,
       encolhia no meio de duas faixas vazias. O chao mantem o destaque como
       estava nos portateis, onde 16:9 dava menos de 420.
       O width:100% e' obrigatorio: sem ele, o aspect-ratio com o min-height
       fazia o browser ALARGAR a caixa para 747px (420 x 16/9) e ela saia da
       coluna -- 343px no telemovel, 626 aos 1366. */
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 420px;
    overflow: hidden;
    background: #f8fafc;
}

.sa-news-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 400ms ease;
}

/* O zoom de hover foi substituido por um fade: um `scale(1.05)` sobre uma
   imagem em `contain` volta a empurrar as bordas para fora da caixa, ou seja,
   corta o texto outra vez -- exactamente o que se queria evitar. */
.sa-news-featured-image:hover img {
    opacity: 0.92;
}

.sa-news-featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 30px;
    padding: 0 16px;
    background: var(--color-orange);
    display: flex;
    align-items: center;
}

.sa-news-featured-badge span {
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sa-news-featured-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 21, 36, 0.4) 0%, transparent 60%);
    pointer-events: none;
}

.sa-news-featured-content {
    background: #f8fafc;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (min-width: 1280px) {
    .sa-news-featured-content {
        padding: 56px;
    }
}

.sa-news-featured-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.sa-news-featured-cat {
    background: rgba(0, 71, 108, 0.1);
    color: var(--color-primary);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 12px;
    font-weight: 500;
}

.sa-news-featured-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 300;
}

.sa-news-featured-date svg {
    width: 12px;
    height: 12px;
}

.sa-news-featured-title {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-dark);
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 20px;
}

@media (min-width: 1024px) {
    .sa-news-featured-title {
        font-size: 36px;
    }
}

.sa-news-featured-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
    /* 4 linhas no maximo, com "..." -- como os cartoes da grelha (3 linhas).
       Ate' 22 Set 2026 nao tinha limite: um resumo comprido ocupava o
       destaque todo. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-news-featured-btn {
    margin-top: 32px;
    align-self: flex-start;
    height: 50px;
    padding: 0 32px;
    background: var(--color-primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.sa-news-featured-btn:hover {
    background: #003350;
    color: #ffffff;
}

.sa-news-featured-btn svg {
    width: 14px;
    height: 14px;
}

/* Grid */
.sa-news-grid {
    background: #f8fafc;
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-news-grid-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-news-grid-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-news-grid-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .sa-news-grid-filters {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.sa-news-grid-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-news-grid-pill {
    height: 36px;
    padding: 0 20px;
    background: #ffffff;
    color: var(--color-primary);
    border: 1px solid rgba(0, 71, 108, 0.2);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.sa-news-grid-pill:not(.sa-news-grid-pill--active):hover {
    background: rgba(0, 71, 108, 0.05);
}

.sa-news-grid-pill--active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.sa-news-grid-search {
    position: relative;
}

.sa-news-grid-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.sa-news-grid-search input {
    height: 40px;
    width: 260px;
    padding: 0 16px 0 36px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    outline: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    color: var(--color-dark);
    transition: border-color 200ms ease;
}

.sa-news-grid-search input::placeholder {
    color: var(--color-text-muted);
}

.sa-news-grid-search input:focus {
    border-color: var(--color-primary);
}

.sa-news-grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .sa-news-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-news-grid-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sa-news-card {
    background: #ffffff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;   /* anchor for the stretched "Read more" link below */
}

/* Whole card clickable — same stretched-link pattern as .sa-cards-readmore.
   The card already had cursor:pointer and a hover state, so it looked
   clickable while only the small "Read more" link actually was. */
.sa-news-card-readmore::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sa-news-card-img {
    position: relative;
    /* 16:9 e nao 220px fixos (22 Set 2026). A foto e' ~16:9 e vai em `cover`:
       com a altura fixa, quanto mais largo o cartao mais ela era cortada em
       cima e em baixo -- 20% aos 1920, mais de metade aos 3440 (caixa 4:1).
       Aos 1366 da' 223px, praticamente o que era. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sa-news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.sa-news-card:hover .sa-news-card-img img {
    transform: scale(1.05);
}

.sa-news-card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 21, 36, 0.2) 0%, transparent 60%);
    pointer-events: none;
}

.sa-news-card-content {
    padding: 28px;
}

.sa-news-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sa-news-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 71, 108, 0.08);
    color: var(--color-primary);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 2px 10px;
    font-weight: 500;
}

.sa-news-card-cat svg,
.sa-news-card-cat img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.sa-news-card-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 300;
}

.sa-news-card-date svg {
    width: 11px;
    height: 11px;
}

.sa-news-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-dark);
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 12px;
}

.sa-news-card-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sa-news-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap 200ms ease;
}

.sa-news-card:hover .sa-news-card-readmore {
    gap: 12px;
}

/* The global `a:hover { color: #f0f0f0 }` at the top of this file outranks the
   colour set on .sa-news-card-readmore — (0,1,1) beats (0,1,0) — so the label
   turned near-white on a white card and disappeared. And because the stretched
   ::after covers the whole card, the hover fires from anywhere on it, not just
   over the link. Restating the colour here is enough; the arrow follows,
   since the svg is stroked with currentColor. */
.sa-news-card-readmore:hover,
.sa-news-card-readmore:focus {
    color: var(--color-primary);
}

.sa-news-card-readmore svg {
    width: 12px;
    height: 12px;
}

.sa-news-grid-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--color-text-muted);
    font-weight: 300;
    font-size: 16px;
}

.sa-news-grid-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.sa-news-grid-loadmore {
    height: 52px;
    padding: 0 48px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.sa-news-grid-loadmore:hover {
    background: var(--color-primary);
    color: #ffffff;
}

/* Newsletter */
.sa-news-newsletter {
    background: var(--color-primary);
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-news-newsletter-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 1024px) {
    .sa-news-newsletter-inner {
        padding: 0 var(--container-padding);
        flex-direction: row;
        justify-content: space-between;
    }
}

.sa-news-newsletter-heading h3 {
    font-size: 32px;
    line-height: 1.15;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 8px;
}

@media (min-width: 1024px) {
    .sa-news-newsletter-heading h3 {
        font-size: 40px;
    }
}

.sa-news-newsletter-heading-light {
    font-weight: 300;
}

.sa-news-newsletter-heading-bold {
    font-weight: 500;
}

.sa-news-newsletter-heading p {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 15px;
    margin: 0;
}

.sa-news-newsletter-form {
    display: flex;
    gap: 0;
    min-width: 380px;
}

.sa-news-newsletter-form input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    outline: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    color: #ffffff;
    transition: border-color 200ms ease;
}

.sa-news-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.sa-news-newsletter-form input:focus {
    border-color: #ffffff;
}

.sa-news-newsletter-form button {
    height: 52px;
    padding: 0 24px;
    background: #ffffff;
    color: var(--color-primary);
    border: none;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 200ms ease;
}

.sa-news-newsletter-form button:hover {
    background: #f0f4f8;
}

/* --- Newsletter: o formulario deixou de ser so uma linha ------------------
   Ate 28 Ago 2026 era input + botao lado a lado e mais nada. Agora leva por
   baixo o consentimento da politica de privacidade, por isso o <form> passa
   a coluna e o par input+botao vive num .sa-news-newsletter-row.

   As regras `.sa-news-newsletter-form input` la de cima continuam a valer,
   e apanhariam tambem a caixa do consentimento e o honeypot -- dai as duas
   excepcoes a seguir. */
.sa-news-newsletter-form {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.sa-news-newsletter-row {
    display: flex;
    gap: 0;
}

/* Fora do ecra em vez de display:none -- ha bots que ignoram campos
   escondidos, e o objectivo e que o preencham. */
.sa-news-newsletter-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sa-news-newsletter-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.sa-news-newsletter-form .sa-news-newsletter-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    min-width: 0;
    padding: 0;
    margin: 1px 0 0;
    background: none;
    border: none;
    accent-color: #ffffff;
    cursor: pointer;
}

.sa-news-newsletter-consent a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sa-news-newsletter-error {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #ffb4a2;
}


.sa-news-newsletter-success {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 32px;
    color: #ffffff;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-news-newsletter-success svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

/* ==============================
   Newsletter — botão + janela (sa-nl)
   4 Set 2026, desenho novo do Figma.

   A faixa deixou de ter o campo do email à vista: tem um botão que abre uma
   janela onde se escolhem as áreas de interesse.

   A janela abre por :target, não por JavaScript. É de propósito — sem JS o
   botão continua a abri-la e a subscrição continua a funcionar, que é o que
   já acontecia antes desta mudança. O JS só acrescenta o fechar com Escape e
   o painel de sucesso sem recarregar a página.
   ============================== */

.sa-news-newsletter-open {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 40px;
    background: #ffffff;
    color: var(--color-primary, #00476c);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}
/* A cor vai repetida de proposito: ha uma regra GLOBAL no topo deste
   ficheiro -- `a:hover, a:focus { color: #f0f0f0 }` -- que apanha
   qualquer <a>. Sem isto o texto do botao ficava quase branco sobre o
   fundo claro do hover, ou seja invisivel. */
.sa-news-newsletter-open:hover,
.sa-news-newsletter-open:focus,
.sa-news-newsletter-open:focus-visible {
    background: #f0f4f8;
    color: var(--color-primary, #00476c);
}
.sa-news-newsletter-open svg { width: 15px; height: 15px; }

/* ---- a janela ---- */
.sa-nl-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* As duas maneiras de a abrir: o :target (o botão) e a classe que o PHP põe
   quando a submissão volta com erro — senão a mensagem ficava escondida lá
   dentro e a pessoa não percebia porque é que nada aconteceu. */
.sa-nl-modal:target,
.sa-nl-modal--open { display: flex; }

/* Enquanto a janela esta aberta, a pagina por baixo nao anda. Posta pelo
   JavaScript; sem JavaScript nao ha classe nenhuma e nada disto se aplica. */
body.sa-nl-lock { overflow: hidden; }

.sa-nl-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 21, 36, 0.72);
}

.sa-nl-panel {
    position: relative;
    width: 100%;
    max-width: 416px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

/* ---- cabeçalho ---- */
.sa-nl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 28px;
    background: var(--color-primary, #00476c);
}
.sa-nl-title {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.2px;
}
.sa-nl-sub {
    margin: 2px 0 0;
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.sa-nl-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-decoration: none;
    transition: background-color .15s ease;
}
.sa-nl-close:hover,
.sa-nl-close:focus,
.sa-nl-close:focus-visible { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.sa-nl-close svg { width: 13px; height: 13px; }

/* ---- corpo ---- */
.sa-nl-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px 28px;
}
.sa-nl-field { display: block; }
.sa-nl-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af;
}
.sa-nl-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-family: inherit;
    font-weight: 300;
    font-size: 14px;
    color: var(--color-dark, #001524);
    outline: none;
    transition: border-color .15s ease;
}
.sa-nl-input::placeholder { color: #d1d5dc; }
.sa-nl-input:focus { border-color: var(--color-primary, #00476c); }

/* ---- áreas ---- */
.sa-nl-areas { display: flex; flex-direction: column; gap: 8px; }
.sa-nl-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.sa-nl-area:hover { border-color: rgba(0, 71, 108, 0.3); }
/* A caixa a sério fica escondida mas continua a existir: é ela que leva o
   valor no POST e que dá o teclado e o leitor de ecrã de graça. */
.sa-nl-area input,
.sa-nl-consent input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.sa-nl-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #d1d5dc;
    color: #ffffff;
    transition: background-color .15s ease, border-color .15s ease;
}
.sa-nl-box svg { width: 10px; height: 10px; opacity: 0; }
.sa-nl-area input:checked ~ .sa-nl-box,
.sa-nl-consent input:checked ~ .sa-nl-box {
    background: var(--color-primary, #00476c);
    border-color: var(--color-primary, #00476c);
}
.sa-nl-area input:checked ~ .sa-nl-box svg,
.sa-nl-consent input:checked ~ .sa-nl-box svg { opacity: 1; }
.sa-nl-area:has(input:checked) {
    border-color: var(--color-primary, #00476c);
    background: #f0f7ff;
}
/* O foco tem de aparecer: a caixa está escondida, por isso o anel vai para a
   linha inteira. */
.sa-nl-area:focus-within,
.sa-nl-consent:focus-within { outline: 2px solid var(--color-primary, #00476c); outline-offset: 2px; }
.sa-nl-area-text {
    font-weight: 300;
    font-size: 13px;
    color: var(--color-dark, #001524);
}

/* ---- consentimento ---- */
.sa-nl-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.sa-nl-consent .sa-nl-box { margin-top: 2px; }
.sa-nl-consent-text {
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}
.sa-nl-consent-text a { color: var(--color-primary, #00476c); }
/* Idem: sem isto o link da politica desaparecia ao passar o rato. */
.sa-nl-consent-text a:hover,
.sa-nl-consent-text a:focus { color: #003350; text-decoration: underline; }

/* ---- botão ---- */
.sa-nl-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 0;
    background: var(--color-primary, #00476c);
    color: #ffffff;
    font-family: inherit;
    font-weight: 300;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.sa-nl-submit:hover { background: #003350; }
.sa-nl-submit svg { width: 14px; height: 14px; }
.sa-nl-foot {
    margin: -12px 0 0;
    font-weight: 300;
    font-size: 10px;
    color: #d1d5dc;
    text-align: center;
}

/* ---- painel de sucesso (só com JavaScript) ---- */
.sa-nl-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 28px;
    text-align: center;
}
.sa-nl-done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary, #00476c);
    color: #ffffff;
}
.sa-nl-done-icon svg { width: 24px; height: 24px; }
.sa-nl-done-title {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-dark, #001524);
    text-transform: uppercase;
}
.sa-nl-done-text {
    margin: 0;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}
.sa-nl-done-btn {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 32px;
    background: var(--color-primary, #00476c);
    color: #ffffff;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.sa-nl-done-btn:hover,
.sa-nl-done-btn:focus { background: #003350; color: #ffffff; }


/* ---- as áreas em grelha de duas colunas, e a caixa que as embrulha.
   Usadas no REGISTO e no cartão do PORTAL; a janela da /news mantém a lista
   de uma coluna. Tudo o resto (.sa-nl-area, .sa-nl-box, .sa-nl-area-text) é
   partilhado pelos três — um só desenho, três sítios. */
.sa-nl-areas--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 420px) {
    .sa-nl-areas--grid { grid-template-columns: 1fr; }
}

.sa-nl-pick {
    padding: 16px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}
.sa-nl-pick-label {
    margin: 0 0 12px;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af;
}
/* Dentro da caixa cinzenta as linhas são brancas, senão desapareciam no fundo. */
.sa-nl-pick .sa-nl-area { background: #ffffff; }
.sa-nl-area--all { margin-bottom: 8px; }

/* ---- a versão COMPACTA (registo e cartão do portal) --------------------
   O desenho tem dois tratamentos diferentes de propósito, e nós tínhamos
   unificado os três sítios num só. Comparado com o protótipo:

     janela da /news  (NewsPage.tsx, NewsletterModal)
        gap-3 · px-4 py-3 · texto 0.8125rem · escolhido bg-[#f0f7ff]
        -> é exactamente o que .sa-nl-area já faz. Fica como está.

     registo          (LoginPage.tsx, tab === 'register')
        "Todos os tópicos":  gap-3   · px-3 py-2.5 · texto 0.8125rem
        áreas em grelha:     gap-2.5 · px-3 py-2.5 · texto 0.75rem
        escolhido: bg-white (NÃO o azul claro da janela)

   Daí as quatro diferenças em baixo. O gap e o tamanho de letra vão presos
   ao .sa-nl-areas--grid para a linha do "Todos os tópicos", que está FORA
   da grelha, manter os 12px/13px que o desenho lhe dá. */
.sa-nl-pick .sa-nl-area,
.sa-nl-card-body .sa-nl-area { padding: 10px 12px; }

.sa-nl-areas--grid .sa-nl-area { gap: 10px; }
.sa-nl-areas--grid .sa-nl-area-text { font-size: 12px; }

.sa-nl-pick .sa-nl-area:has(input:checked),
.sa-nl-card-body .sa-nl-area:has(input:checked) { background: #ffffff; }

/* ---- o cartão do portal ---- */
.sa-nl-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.sa-nl-card-rule { height: 3px; background: var(--color-primary, #00476c); }
.sa-nl-card-body { padding: 20px; }
.sa-nl-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.sa-nl-card-title {
    margin: 0;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--color-dark, #001524);
}
.sa-nl-card-sub {
    margin: 2px 0 0;
    font-weight: 300;
    font-size: 11px;
    color: #9ca3af;
}
.sa-nl-card-head svg { width: 15px; height: 15px; color: var(--color-primary, #00476c); flex-shrink: 0; margin-top: 2px; }
.sa-nl-card .sa-nl-areas { margin-bottom: 16px; }
.sa-nl-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    border: 0;
    background: var(--color-primary, #00476c);
    color: #ffffff;
    font-family: inherit;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.sa-nl-card-btn:hover { background: #003350; }
.sa-nl-card-btn svg { width: 12px; height: 12px; }
.sa-nl-card-ok {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0f7ff;
    border: 1px solid rgba(0, 71, 108, 0.2);
}
.sa-nl-card-ok-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary, #00476c);
    color: #ffffff;
}
.sa-nl-card-ok-icon svg { width: 12px; height: 12px; }
.sa-nl-card-ok p {
    margin: 0;
    font-weight: 300;
    font-size: 13px;
    color: var(--color-primary, #00476c);
}

@media (max-width: 480px) {
    .sa-news-newsletter-open { width: 100%; justify-content: center; }
    .sa-nl-body { padding: 20px 20px 24px; }
    .sa-nl-head { padding: 18px 20px; }
}


/* ==============================
   Contacts Page (sa-contacts)
   ============================== */

/* Hero */
.sa-contacts-hero {
    position: relative;
    width: 100%;
    height: 520px;
    background: var(--color-dark);
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-contacts-hero-bg {
    position: absolute;
    inset: 0;
}

.sa-contacts-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

.sa-contacts-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 21, 36, 0.95) 0%, rgba(0, 21, 36, 0.7) 50%, transparent 100%);
}

.sa-contacts-hero-inner {
    position: relative;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 80px var(--container-padding-mobile) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .sa-contacts-hero-inner {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

.sa-contacts-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    color: var(--color-medical);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-contacts-hero-breadcrumb svg {
    width: 12px;
    height: 12px;
}

.sa-contacts-hero-title {
    display: flex;
    flex-direction: column;
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .sa-contacts-hero-title {
        font-size: 80px;
    }
}

.sa-contacts-hero-title-light {
    font-weight: 300;
    color: #ffffff;
}

.sa-contacts-hero-title-bold {
    font-weight: 500;
    color: #ffffff;
}

.sa-contacts-hero-tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #d1d5dc;
    max-width: 480px;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-contacts-hero-tagline {
        font-size: 18px;
    }
}

/* Shared — overline + section title */
.sa-contacts-overline {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 12px;
}

.sa-contacts-overline--primary { color: var(--color-primary); }
.sa-contacts-overline--orange  { color: var(--color-orange); }
.sa-contacts-overline--medical { color: var(--color-medical); }

.sa-contacts-section-title {
    font-size: 42px;
    line-height: 1.05;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-contacts-section-title {
        font-size: 56px;
    }
}

.sa-contacts-section-title--light {
    color: #ffffff;
}

.sa-contacts-section-title-light {
    font-weight: 300;
}

.sa-contacts-section-title-bold {
    font-weight: 500;
}

/* Contact Types */
.sa-contacts-types {
    background: #f8fafc;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-contacts-types-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-contacts-types-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-contacts-types-header {
    margin-bottom: 56px;
}

.sa-contacts-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .sa-contacts-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-contacts-types-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sa-contacts-type-card {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 300ms ease;
}

.sa-contacts-type-card:hover {
    transform: translateY(-4px);
}

.sa-contacts-type-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.sa-contacts-type-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
}

.sa-contacts-type-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Card is an <a> tag now (CTA is editor-set); neutralise default link styling. */
a.sa-contacts-type-card,
a.sa-contacts-type-card:hover,
a.sa-contacts-type-card:visited,
a.sa-contacts-type-card:focus {
    color: inherit;
    text-decoration: none;
}

.sa-contacts-type-title {
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 4px;
}

.sa-contacts-type-subtitle {
    font-weight: 300;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 16px;
}

.sa-contacts-type-desc {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.sa-contacts-type-cta {
    margin-top: 24px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0 0 6px;
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: border-color 200ms ease;
}

.sa-contacts-type-cta:hover {
    border-bottom-color: #ffffff;
}

.sa-contacts-type-cta svg {
    width: 13px;
    height: 13px;
}

.sa-contacts-type-glow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    filter: blur(40px);
    transition: background-color 300ms ease;
    pointer-events: none;
}

.sa-contacts-type-card:hover .sa-contacts-type-glow {
    background: rgba(255, 255, 255, 0.1);
}

/* Form + Side Info */
.sa-contacts-form {
    background: #ffffff;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-contacts-form-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}

@media (min-width: 1024px) {
    .sa-contacts-form-inner {
        padding: 0 var(--container-padding);
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .sa-contacts-form-inner {
        gap: 96px;
    }
}

.sa-contacts-form-left .sa-contacts-section-title {
    margin-bottom: 40px;
    font-size: 40px;
}

@media (min-width: 1024px) {
    .sa-contacts-form-left .sa-contacts-section-title {
        font-size: 52px;
    }
}

/* The form wraps its fields; each field's width comes from the backoffice
   column `largura_ele` (%), passed in as the inline custom property --w.
   50 + 50 sit on one row, 100 takes the whole row, 33.333 gives three. */
.sa-contacts-form-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.sa-contacts-form-field {
    flex: 1 1 calc(var(--w, 100) * 1% - 20px);
    min-width: 0;
}

/* Below the breakpoint every field is full width, whatever largura_ele says. */
@media (max-width: 767px) {
    .sa-contacts-form-field {
        flex-basis: 100%;
    }
}

/* Element type "Quebra de Linha" — forces the next field onto a new row. */
.sa-contacts-form-break {
    flex: 0 0 100%;
    height: 0;
}

/* Element type "Separador" — a titled divider between groups of fields. */
.sa-contacts-form-sep {
    flex: 0 0 100%;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 20px;
}

.sa-contacts-form-sep span {
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* Element types "Radio" and "Checkbox". */
.sa-contacts-form-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

/* Two classes deep so these beat the generic .sa-contacts-form-field label /
   input rules defined further down the file. */
.sa-contacts-form-field .sa-contacts-form-choices label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-dark);
    cursor: pointer;
}

.sa-contacts-form-field .sa-contacts-form-choices input {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    flex: 0 0 auto;
}

/* Kept for the unreferenced monolith section-contacts-index.tpl. */
.sa-contacts-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sa-contacts-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.sa-contacts-form-field label {
    display: block;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.sa-contacts-form-field input,
.sa-contacts-form-field select,
.sa-contacts-form-field textarea {
    width: 100%;
    background: #f0f4f8;
    border: 1px solid transparent;
    outline: none;
    padding: 0 16px;
    height: 50px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-dark);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.sa-contacts-form-field textarea {
    height: auto;
    padding: 14px 16px;
    resize: none;
    line-height: 1.5;
}

.sa-contacts-form-field input[type="file"] {
    height: auto;
    padding: 13px 16px;
    cursor: pointer;
}

.sa-contacts-form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2300476c' stroke-width='1.5'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.sa-contacts-form-field input::placeholder,
.sa-contacts-form-field textarea::placeholder {
    color: var(--color-text-muted);
}

.sa-contacts-form-field input:focus,
.sa-contacts-form-field select:focus,
.sa-contacts-form-field textarea:focus {
    background: #ffffff;
    border-color: var(--color-primary);
}

/* Consentimento da politica de privacidade, entre os campos e o botao.
   flex-basis 100% para ocupar a linha toda: os campos do formulario correm
   num flex com larguras em % (--w), e sem isto esta caixa ia encaixar ao
   lado do ultimo campo de 50%. */
.sa-contacts-form-consent {
    flex: 1 1 100%;
    margin: 4px 0 8px;
}

.sa-contacts-form-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5565;
    cursor: pointer;
}

/* margin-top alinha a caixa com a primeira linha do texto, e nao com o
   centro do bloco -- que e onde ela cai quando o texto passa a duas linhas
   nos ecras estreitos. */
.sa-contacts-form-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--color-orange, #ED6E00);
    cursor: pointer;
}

.sa-contacts-form-consent a {
    color: var(--color-orange, #ED6E00);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sa-contacts-form-submit {
    height: 52px;
    width: 100%;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    transition: background-color 200ms ease;
}

.sa-contacts-form-submit:hover {
    background: #003350;
}

.sa-contacts-form-submit svg {
    width: 15px;
    height: 15px;
}

.sa-contacts-form-success {
    background: var(--color-primary);
    padding: 40px;
    color: #ffffff;
}

.sa-contacts-form-success-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.sa-contacts-form-success-icon svg {
    width: 22px;
    height: 22px;
    color: #ffffff;
}

.sa-contacts-form-success h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 22px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 12px;
}

/* O `div` esta' aqui porque a mensagem de sucesso vem do backoffice e pode
   trazer o texto embrulhado -- ver Formularios > Contactos > Mensagem de
   sucesso.
   O :not() e' preciso porque o icone tambem e' um <div>, e este selector de
   elemento ganha ao de classe: sem ele, o `margin: 0` daqui anulava os 28px
   do .sa-contacts-form-success-icon e o titulo ficava colado ao icone. */
.sa-contacts-form-success p,
.sa-contacts-form-success div:not(.sa-contacts-form-success-icon) {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.sa-contacts-form-success-again {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    transition: color 200ms ease;
}

.sa-contacts-form-success-again:hover {
    color: #ffffff;
}

/* "Live chat" quicklink in the contacts right column — hidden until a chat
   provider is actually wired up. It is the only quicklink with a placeholder
   href; the other three are tel:, mailto: and maps.google.com. The markup
   lives in the page 127 texto, so hiding it here covers all five language
   rows at once. Delete this rule to bring the link back. */
.sa-contacts-quicklink[href="#"] {
    display: none;
}

/* Server-side rejection (?senderror=...) — CSRF, reCAPTCHA or a missing field. */
.sa-contacts-form-error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    color: #991b1b;
}

/* Honeypot — must stay reachable to bots but invisible to humans, so it is
   moved off-screen rather than display:none. */
.sa-contacts-form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sa-contacts-form-success h3 {
    font-weight: 500;
    font-size: 22px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.sa-contacts-form-success p {
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.sa-contacts-form-success button {
    margin-top: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    transition: color 200ms ease;
}

.sa-contacts-form-success button:hover {
    color: #ffffff;
}

/* Form right side */
.sa-contacts-form-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sa-contacts-hq {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.sa-contacts-hq img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-contacts-hq-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 21, 36, 0.6) 0%, transparent 60%);
    pointer-events: none;
}

.sa-contacts-hq-caption {
    position: absolute;
    bottom: 24px;
    left: 24px;
}

.sa-contacts-hq-caption-overline {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.sa-contacts-hq-caption-place {
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0;
}

.sa-contacts-quicklinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.sa-contacts-quicklink {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    transition: background-color 200ms ease;
}

.sa-contacts-quicklink:hover {
    background: #f0f4f8;
}

.sa-contacts-quicklink-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-contacts-quicklink-icon svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

/* PNG icon variants (quick links / offices are inline in cms_pagina texto,
   so they use /uploads/rte/icons/ PNGs — TinyMCE strips inline <svg>). */
.sa-contacts-quicklink-icon img {
    width: 16px;
    height: 16px;
}

.sa-contacts-quicklink-text {
    flex: 1;
}

.sa-contacts-quicklink-label {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 2px;
}

.sa-contacts-quicklink-value {
    font-weight: 500;
    font-size: 15px;
    color: var(--color-dark);
    margin: 0;
}

.sa-contacts-quicklink-arrow {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    margin-left: auto;
    opacity: 0;
    transition: opacity 200ms ease;
}

.sa-contacts-quicklink:hover .sa-contacts-quicklink-arrow {
    opacity: 1;
}

/* Offices */
.sa-contacts-offices {
    background: var(--color-dark);
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-contacts-offices-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-contacts-offices-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-contacts-offices-header {
    margin-bottom: 56px;
}

.sa-contacts-offices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .sa-contacts-offices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-contacts-offices-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sa-contacts-office {
    background: var(--color-dark);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color 200ms ease;
}

.sa-contacts-office:hover {
    background: #00243d;
}

.sa-contacts-office-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-contacts-office-flag {
    color: var(--color-medical);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1.4px;
    padding: 6px 10px;
    background: rgba(0, 166, 214, 0.12);
}

.sa-contacts-office-name {
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.sa-contacts-office-country {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.sa-contacts-office-divider {
    width: 32px;
    height: 1px;
    background: var(--color-primary);
}

.sa-contacts-office-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-contacts-office-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sa-contacts-office-row svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 3px;
}

.sa-contacts-office-row img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
}

.sa-contacts-office-row p {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.sa-contacts-office-row-city {
    color: rgba(255, 255, 255, 0.6) !important;
}

.sa-contacts-office-row a {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
    font-size: 13px;
    text-decoration: none;
    transition: color 200ms ease;
}

.sa-contacts-office-row a:hover {
    color: #ffffff;
}

/* ==============================
   Feiras Page (sa-feiras)
   ============================== */

/* Hero */
.sa-feiras-hero {
    position: relative;
    width: 100%;
    height: 520px;
    background: var(--color-dark);
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-feiras-hero-bg {
    position: absolute;
    inset: 0;
}

.sa-feiras-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.sa-feiras-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 21, 36, 0.95) 0%, rgba(0, 21, 36, 0.75) 50%, transparent 100%);
}

.sa-feiras-hero-inner {
    position: relative;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 80px var(--container-padding-mobile) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .sa-feiras-hero-inner {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

.sa-feiras-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    color: var(--color-orange);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-feiras-hero-breadcrumb svg {
    width: 12px;
    height: 12px;
}

.sa-feiras-hero-title {
    display: flex;
    flex-direction: column;
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .sa-feiras-hero-title {
        font-size: 80px;
    }
}

.sa-feiras-hero-title-light { font-weight: 300; color: #ffffff; }
.sa-feiras-hero-title-bold  { font-weight: 500; color: #ffffff; }

.sa-feiras-hero-tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #d1d5dc;
    max-width: 500px;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-feiras-hero-tagline {
        font-size: 18px;
    }
}

/* Shared overline + section title */
.sa-feiras-overline {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 12px;
}

.sa-feiras-overline--primary { color: var(--color-primary); }
.sa-feiras-overline--orange  { color: var(--color-orange); }
.sa-feiras-overline--medical { color: var(--color-medical); }

.sa-feiras-section-title {
    font-size: 40px;
    line-height: 1.05;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-feiras-section-title {
        font-size: 52px;
    }
}

.sa-feiras-section-title--light { color: #ffffff; }
.sa-feiras-section-title-light  { font-weight: 300; }
.sa-feiras-section-title-bold   { font-weight: 500; }

/* Calendar Overview */
.sa-feiras-calendar {
    background: #f8fafc;
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-feiras-calendar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-feiras-calendar-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-feiras-calendar-header {
    margin-bottom: 48px;
}

.sa-feiras-calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (min-width: 768px) {
    .sa-feiras-calendar-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-feiras-calendar-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.sa-feiras-calendar-month {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 8px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.sa-feiras-calendar-month--active {
    background: #ffffff;
    border-color: rgba(0, 71, 108, 0.3);
}

.sa-feiras-calendar-month-name {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-text-muted);
}

.sa-feiras-calendar-month--active .sa-feiras-calendar-month-name {
    color: var(--color-primary);
}

.sa-feiras-calendar-month-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.sa-feiras-calendar-month-bar {
    height: 6px;
    width: 100%;
    border-radius: 9999px;
}

.sa-feiras-calendar-month-bar--empty {
    background: transparent;
}

.sa-feiras-calendar-month-count {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-primary);
}

.sa-feiras-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}

.sa-feiras-calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-feiras-calendar-legend-bar {
    width: 16px;
    height: 6px;
    border-radius: 9999px;
}

.sa-feiras-calendar-legend-label {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ============================================================================
   Calendar v2 — spanning bars across months
   Three stacked sub-grids (labels / events / counts), each 12 columns aligned.
   Each event bar uses inline `grid-column: <start> / span <span>` to span
   visually across the months it touches.
   ============================================================================ */
.sa-feiras-cal2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: auto;
}

.sa-feiras-cal2-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(48px, 1fr));
    gap: 0;
    min-width: 576px; /* 12 * 48px — horizontal scroll on narrower screens */
}

/* Labels row */
.sa-feiras-cal2-labels {
    border-bottom: 1px solid rgba(0, 71, 108, 0.1);
}

.sa-feiras-cal2-label {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-text-muted);
    text-align: center;
    padding: 12px 0 16px;
}

.sa-feiras-cal2-label--active {
    color: var(--color-primary);
}

/* Events row — auto-grows rows for each spanning bar */
.sa-feiras-cal2-events {
    grid-auto-rows: 16px;
    row-gap: 6px;
    padding: 16px 0;
    align-content: start;
}

.sa-feiras-cal2-bar {
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    overflow: hidden;
    transition: filter 200ms ease;
    cursor: default;
}

.sa-feiras-cal2-bar:hover {
    filter: brightness(1.08);
}

.sa-feiras-cal2-bar-name {
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Counts row */
.sa-feiras-cal2-counts {
    border-top: 1px solid rgba(0, 71, 108, 0.1);
}

.sa-feiras-cal2-count {
    font-size: 10px;
    font-weight: 500;
    color: transparent; /* placeholder so cell occupies space even when empty */
    text-align: center;
    padding: 12px 0;
}

.sa-feiras-cal2-count--active {
    color: var(--color-primary);
}

/* Setas do ano no calendario + filtros da lista (25 Set 2026). O `hidden`
   que o JS poe tem de ganhar ao display:flex/grid destes blocos. */
.sa-feiras-cal2[hidden],
.sa-feiras-show[hidden],
.sa-feiras-filtros-vazio[hidden] {
    display: none;
}

.sa-feiras-calendar-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.sa-feiras-cal-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sa-feiras-cal-nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(0, 71, 108, 0.25);
    color: var(--color-primary);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.sa-feiras-cal-nav-btn svg {
    width: 18px;
    height: 18px;
}

.sa-feiras-cal-nav-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #ffffff;
}

.sa-feiras-cal-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Um filtro por linha, com o nome a' frente. Nao ha' desenho para isto
   (nao existe no prototipo); no telemovel cada linha rola na horizontal em
   vez de partir, para continuar a ser uma linha so'. */
.sa-feiras-filtros {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: -16px 0 32px;
}

.sa-feiras-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.sa-feiras-filtro::-webkit-scrollbar {
    display: none;
}

.sa-feiras-filtro-nome {
    flex: 0 0 56px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sa-feiras-filtro-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.sa-feiras-filtro-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #e5e7eb;
    color: var(--color-dark);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.sa-feiras-filtro-btn:hover {
    border-color: var(--color-primary);
}

.sa-feiras-filtro-btn.is-activo {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.sa-feiras-filtro-cor {
    width: 12px;
    height: 4px;
    border-radius: 2px;
}

.sa-feiras-filtros-vazio {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0;
}

/* Upcoming Shows */
.sa-feiras-upcoming {
    background: #ffffff;
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-feiras-upcoming-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-feiras-upcoming-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-feiras-upcoming-header {
    margin-bottom: 48px;
}

.sa-feiras-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sa-feiras-show {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.sa-feiras-show-main {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .sa-feiras-show-main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.sa-feiras-show-info {
    flex: 1;
}

.sa-feiras-show-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sa-feiras-show-sector {
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* Sede/filial que leva a feira, a seguir ao sector (ponto 7 do cliente,
   25 Set 2026). Contorno neutro para nao competir com a cor do sector. */
.sa-feiras-show-sede {
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 71, 108, 0.35);
    color: var(--color-primary);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sa-feiras-show-status {
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-feiras-show-status--confirmed {
    background: #ecfdf5;
    color: #047857;
}

.sa-feiras-show-status--planned {
    background: #f0f4f8;
    color: var(--color-text-light);
}

.sa-feiras-show-name {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-dark);
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0 0 4px;
}

@media (min-width: 1024px) {
    .sa-feiras-show-name {
        font-size: 36px;
    }
}

.sa-feiras-show-year {
    font-weight: 300;
    color: var(--color-primary);
}

.sa-feiras-show-desc {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0 0 20px;
    max-width: 48rem; /* widened from 36rem (prototype default) per Sofia */
}

.sa-feiras-show-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.sa-feiras-show-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sa-feiras-show-meta-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

.sa-feiras-show-meta-item span {
    color: var(--color-dark);
    font-weight: 500;
    font-size: 14px;
}

.sa-feiras-show-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 180px;
}

.sa-feiras-show-toggle {
    height: 44px;
    padding: 0 24px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 200ms ease;
}

.sa-feiras-show-toggle:hover {
    background: #003350;
}

.sa-feiras-show-toggle svg {
    width: 12px;
    height: 12px;
}

.sa-feiras-show-toggle-close { display: none; }
.sa-feiras-show--expanded .sa-feiras-show-toggle-open  { display: none; }
.sa-feiras-show--expanded .sa-feiras-show-toggle-close { display: inline; }

.sa-feiras-show-link {
    height: 44px;
    padding: 0 24px;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid rgba(0, 71, 108, 0.2);
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 200ms ease;
}

/* O `color` tem de ser repetido aqui: sem ele, a regra global
   `a:hover, a:focus { color: #f0f0f0 }` (topo deste ficheiro) ganha, e o
   rotulo passava a quase-branco sobre um fundo quase-branco -- ao passar o
   rato o botao ficava a parecer vazio. Mesmo caso dos outros ja corrigidos
   neste ficheiro. */
.sa-feiras-show-link:hover,
.sa-feiras-show-link:focus {
    background: rgba(0, 71, 108, 0.05);
    color: var(--color-primary);
}

.sa-feiras-show-link svg {
    width: 12px;
    height: 12px;
}

.sa-feiras-show-reps {
    display: none;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 24px 32px;
}

.sa-feiras-show--expanded .sa-feiras-show-reps {
    display: block;
}

.sa-feiras-show-reps-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin: 0 0 16px;
}

.sa-feiras-show-reps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sa-feiras-rep {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 16px;
    min-width: 260px;
}

.sa-feiras-rep-img {
    width: 48px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-primary);
}

.sa-feiras-rep-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.sa-feiras-rep-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0;
}

.sa-feiras-rep-role {
    font-weight: 300;
    font-size: 11px;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.sa-feiras-rep-email {
    font-weight: 300;
    font-size: 11px;
    color: var(--color-primary);
    text-decoration: none;
}

.sa-feiras-rep-email:hover {
    text-decoration: underline;
}

/* Past Shows */
.sa-feiras-past {
    background: var(--color-dark);
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-feiras-past-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-feiras-past-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-feiras-past-header {
    margin-bottom: 48px;
}

.sa-feiras-past-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
    .sa-feiras-past-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .sa-feiras-past-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sa-feiras-past-card {
    background: var(--color-dark);
    padding: 28px;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.sa-feiras-past-card:hover {
    background: #00243d;
}

.sa-feiras-past-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sa-feiras-past-card-sector {
    height: 24px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* A sede fica colada ao sector; o ano continua encostado a' direita. */
.sa-feiras-past-card-sede {
    height: 24px;
    padding: 0 10px;
    margin: 0 auto 0 8px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sa-feiras-past-card-year {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
    font-size: 12px;
}

.sa-feiras-past-card-name {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.sa-feiras-past-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sa-feiras-past-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    font-size: 12px;
}

.sa-feiras-past-card-meta svg {
    width: 11px;
    height: 11px;
}

/* CTA Banner */
.sa-feiras-cta {
    background: var(--color-orange);
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-feiras-cta-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 1024px) {
    .sa-feiras-cta-inner {
        padding: 0 var(--container-padding);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.sa-feiras-cta-title {
    font-size: 32px;
    line-height: 1.15;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 8px;
}

@media (min-width: 1024px) {
    .sa-feiras-cta-title {
        font-size: 42px;
    }
}

.sa-feiras-cta-title-light { font-weight: 300; }
.sa-feiras-cta-title-bold  { font-weight: 500; }

.sa-feiras-cta-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 15px;
    max-width: 32rem;
    margin: 0;
}

.sa-feiras-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.sa-feiras-cta-btn {
    height: 52px;
    padding: 0 40px;
    font-family: var(--font-family);
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease, color 200ms ease;
}

.sa-feiras-cta-btn--primary {
    background: #ffffff;
    color: var(--color-orange);
    border: none;
    font-weight: 500;
}

.sa-feiras-cta-btn--primary:hover {
    background: #f0f4f8;
}

/* O "Book a Meeting" passou de <button> a <a> (22 Set 2026). O a:hover,
   a:focus global la' de cima poe color:#f0f0f0 e pesa mais do que a classe
   sozinha: o texto laranja ficava quase branco no fundo branco -- ao passar
   o rato e, depois do clique, enquanto o link tivesse o foco. */
.sa-feiras-cta-btn--primary:hover,
.sa-feiras-cta-btn--primary:focus {
    color: var(--color-orange);
}

.sa-feiras-cta-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

.sa-feiras-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ==============================
   Carreira Page (sa-carreira)
   ============================== */

/* Hero */
.sa-carreira-hero {
    position: relative;
    width: 100%;
    height: 560px;
    background: var(--color-dark);
    overflow: hidden;
    font-family: var(--font-family);
}

.sa-carreira-hero-bg {
    position: absolute;
    inset: 0;
}

.sa-carreira-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.sa-carreira-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 21, 36, 0.95) 0%, rgba(0, 21, 36, 0.75) 50%, transparent 100%);
}

.sa-carreira-hero-inner {
    position: relative;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 80px var(--container-padding-mobile) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .sa-carreira-hero-inner {
        padding-left: var(--container-padding);
        padding-right: var(--container-padding);
    }
}

.sa-carreira-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    color: var(--color-primary);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-carreira-hero-breadcrumb svg {
    width: 12px;
    height: 12px;
}

.sa-carreira-hero-title {
    display: flex;
    flex-direction: column;
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .sa-carreira-hero-title {
        font-size: 80px;
    }
}

.sa-carreira-hero-title-light { font-weight: 300; color: #ffffff; }
.sa-carreira-hero-title-bold  { font-weight: 500; color: #ffffff; }

.sa-carreira-hero-tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #d1d5dc;
    max-width: 500px;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-carreira-hero-tagline {
        font-size: 18px;
    }
}

.sa-carreira-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.sa-carreira-hero-btn {
    height: 50px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.sa-carreira-hero-btn svg {
    width: 14px;
    height: 14px;
}

.sa-carreira-hero-btn--primary {
    background: var(--color-primary);
    color: #ffffff;
}

.sa-carreira-hero-btn--primary:hover {
    background: #003350;
    color: #ffffff;
}

.sa-carreira-hero-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.sa-carreira-hero-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Shared overline + section title */
.sa-carreira-overline {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 12px;
}

.sa-carreira-overline--primary { color: var(--color-primary); }
.sa-carreira-overline--orange  { color: var(--color-orange); }

.sa-carreira-section-title {
    font-size: 40px;
    line-height: 1.05;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-carreira-section-title {
        font-size: 52px;
    }
}

.sa-carreira-section-title--light  { color: #ffffff; }
.sa-carreira-section-title-light   { font-weight: 300; }
.sa-carreira-section-title-bold    { font-weight: 500; }

/* Perks */
.sa-carreira-perks {
    background: #ffffff;
    padding: 80px 0;
    font-family: var(--font-family);
}

.sa-carreira-perks-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-carreira-perks-inner {
        padding: 0 var(--container-padding);
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .sa-carreira-perks-inner {
        gap: 96px;
    }
}

.sa-carreira-perks-text .sa-carreira-section-title {
    margin-bottom: 32px;
}

.sa-carreira-perks-intro {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 40px;
    max-width: 32rem;
}

.sa-carreira-perks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 640px) {
    .sa-carreira-perks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sa-carreira-perk {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sa-carreira-perk-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 71, 108, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-carreira-perk-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.sa-carreira-perk-icon img {
    width: 18px;
    height: 18px;
}

.sa-carreira-perk-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.sa-carreira-perk-desc {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
}

.sa-carreira-perks-image {
    position: relative;
    height: 480px;
    overflow: hidden;
}

.sa-carreira-perks-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sa-carreira-perks-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 21, 36, 0.4) 0%, transparent 60%);
    pointer-events: none;
}

.sa-carreira-perks-stat {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: var(--color-primary);
    padding: 16px 24px;
}

.sa-carreira-perks-stat-overline {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.sa-carreira-perks-stat-value {
    color: #ffffff;
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    margin: 0;
}

/* Open Positions */
.sa-carreira-positions {
    background: #f8fafc;
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-carreira-positions-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-carreira-positions-inner {
        padding: 0 var(--container-padding);
    }
}

.sa-carreira-positions-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .sa-carreira-positions-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.sa-carreira-positions-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-carreira-positions-filter-btn {
    height: 36px;
    padding: 0 20px;
    background: #ffffff;
    color: var(--color-primary);
    border: 1px solid rgba(0, 71, 108, 0.2);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.sa-carreira-positions-filter-btn:not(.sa-carreira-positions-filter-btn--active):hover {
    background: rgba(0, 71, 108, 0.05);
}

.sa-carreira-positions-filter-btn--active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* v3 filter dropdowns — replaces the button group above. Custom arrow inline
   as data-URI so no extra asset is needed. */
.sa-carreira-positions-filter-select {
    height: 42px;
    padding: 0 36px 0 16px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid #e5e7eb;
    color: #001524;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: border-color 200ms ease;
}

.sa-carreira-positions-filter-select:focus,
.sa-carreira-positions-filter-select:hover {
    border-color: var(--color-primary);
}

/* Tres contagens, nao quatro: o cartao "+120 Colaboradores" saiu, era um numero
   escrito a mao que nao tinha nada a ver com as vagas.
   A grelha tem fundo cinzento a aparecer pelas juntas de 1px, portanto uma
   celula vazia desenhava um rectangulo cinzento. Em ecra estreito ficam dois em
   cima e o terceiro a ocupar a linha toda; a partir de 768px ficam os tres
   lado a lado. Assim nao sobra celula vazia em largura nenhuma. */
.sa-carreira-positions-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #e5e7eb;
    margin-bottom: 32px;
}

.sa-carreira-positions-stat:last-child {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .sa-carreira-positions-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .sa-carreira-positions-stat:last-child {
        grid-column: auto;
    }
}

.sa-carreira-positions-stat {
    background: #ffffff;
    padding: 20px 24px;
    text-align: center;
}

.sa-carreira-positions-stat-value {
    font-weight: 500;
    font-size: 28px;
    color: var(--color-primary);
    margin: 0;
}

.sa-carreira-positions-stat-label {
    font-weight: 300;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.sa-carreira-positions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-carreira-positions-empty {
    text-align: center;
    padding: 64px 0;
    color: var(--color-text-muted);
    font-weight: 300;
    font-size: 16px;
}

/* Job card */
.sa-carreira-job {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: box-shadow 200ms ease;
}

.sa-carreira-job:hover {
    box-shadow: 0 10px 24px -12px rgba(0, 21, 36, 0.15);
}

.sa-carreira-job-head {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    cursor: pointer;
}

@media (min-width: 768px) {
    .sa-carreira-job-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.sa-carreira-job-info {
    flex: 1;
}

.sa-carreira-job-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.sa-carreira-job-dep {
    height: 26px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-carreira-job-meta-pill {
    height: 26px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    background: #f0f4f8;
    color: var(--color-text-light);
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sa-carreira-job-title {
    font-weight: 500;
    font-size: 20px;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0 0 8px;
}

.sa-carreira-job-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    color: var(--color-text-muted);
    font-weight: 300;
    font-size: 12px;
}

.sa-carreira-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sa-carreira-job-meta svg {
    width: 12px;
    height: 12px;
}

.sa-carreira-job-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.sa-carreira-job-apply {
    height: 42px;
    padding: 0 24px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 200ms ease;
}

.sa-carreira-job-apply:hover {
    background: #003350;
}

.sa-carreira-job-apply svg {
    width: 12px;
    height: 12px;
}

.sa-carreira-job-toggle {
    width: 42px;
    height: 42px;
    background: transparent;
    border: 1px solid #e5e7eb;
    color: var(--color-text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 200ms ease, color 200ms ease;
}

.sa-carreira-job-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sa-carreira-job-toggle svg {
    width: 16px;
    height: 16px;
}

.sa-carreira-job-toggle-close { display: none; }
.sa-carreira-job--expanded .sa-carreira-job-toggle-open  { display: none; }
.sa-carreira-job--expanded .sa-carreira-job-toggle-close { display: inline; }

.sa-carreira-job-body {
    display: none;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: 24px 28px;
}

.sa-carreira-job--expanded .sa-carreira-job-body {
    display: block;
}

.sa-carreira-job-body-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .sa-carreira-job-body-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sa-carreira-job-body-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin: 0 0 12px;
}

.sa-carreira-job-body-text {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

.sa-carreira-job-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-carreira-job-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 300;
    font-size: 13px;
    color: var(--color-text);
}

.sa-carreira-job-list-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
}

.sa-carreira-job-list--primary .sa-carreira-job-list-dot { background: var(--color-primary); }
.sa-carreira-job-list--orange  .sa-carreira-job-list-dot { background: var(--color-orange); }

.sa-carreira-job-apply-inline {
    margin-top: 24px;
    height: 40px;
    width: 100%;
    padding: 0 24px;
    background: var(--color-orange);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 200ms ease;
}

.sa-carreira-job-apply-inline:hover {
    background: #ff8f33;
}

.sa-carreira-job-apply-inline svg {
    width: 12px;
    height: 12px;
}

/* Spontaneous */
.sa-carreira-spontaneous {
    background: var(--color-dark);
    padding: 96px 0;
    font-family: var(--font-family);
}

.sa-carreira-spontaneous-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
}

@media (min-width: 1024px) {
    .sa-carreira-spontaneous-inner {
        padding: 0 var(--container-padding);
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .sa-carreira-spontaneous-inner {
        gap: 96px;
    }
}

.sa-carreira-spontaneous-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.sa-carreira-spontaneous-info .sa-carreira-section-title {
    margin-bottom: 24px;
}

.sa-carreira-spontaneous-desc {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 32rem;
}

.sa-carreira-spontaneous-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-carreira-spontaneous-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sa-carreira-spontaneous-card-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-carreira-spontaneous-card-icon svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

.sa-carreira-spontaneous-card-label {
    color: #ffffff;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0;
}

.sa-carreira-spontaneous-card-sub {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    font-size: 12px;
    margin: 0;
}

.sa-carreira-spontaneous-form-wrap {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 32px;
}

@media (min-width: 768px) {
    .sa-carreira-spontaneous-form-wrap {
        padding: 40px;
    }
}

.sa-carreira-spontaneous-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sa-carreira-spontaneous-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sa-carreira-spontaneous-row {
        grid-template-columns: 1fr 1fr;
    }
}

.sa-carreira-spontaneous-field label:not(.sa-carreira-file) {
    display: block;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.sa-carreira-spontaneous-field input,
.sa-carreira-spontaneous-field select,
.sa-carreira-spontaneous-field textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    outline: none;
    padding: 0 16px;
    height: 50px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    color: #ffffff;
    transition: border-color 200ms ease;
}

.sa-carreira-spontaneous-field textarea {
    height: auto;
    padding: 14px 16px;
    resize: none;
    line-height: 1.5;
}

.sa-carreira-spontaneous-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.sa-carreira-spontaneous-field select option {
    background: var(--color-dark);
    color: #ffffff;
}

.sa-carreira-spontaneous-field input::placeholder,
.sa-carreira-spontaneous-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sa-carreira-spontaneous-field input:focus,
.sa-carreira-spontaneous-field select:focus,
.sa-carreira-spontaneous-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

.sa-carreira-spontaneous-submit {
    margin-top: 8px;
    height: 52px;
    background: var(--color-orange);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background-color 200ms ease;
}

.sa-carreira-spontaneous-submit:hover {
    background: #ff8f33;
}

.sa-carreira-spontaneous-submit svg {
    width: 15px;
    height: 15px;
}

.sa-carreira-spontaneous-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 48px 0;
}

.sa-carreira-spontaneous-success-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-carreira-spontaneous-success-icon svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.sa-carreira-spontaneous-success h3 {
    font-weight: 500;
    font-size: 22px;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.sa-carreira-spontaneous-success p {
    font-weight: 300;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 20rem;
}

/* O "enviar outra" passou de <button> movido a JavaScript para <a> -- o sucesso
   agora vem do servidor, nao ha' JavaScript nenhum a fingir que enviou. O
   selector aceita os dois para nao partir nada que ainda use o botao. */
.sa-carreira-spontaneous-success button,
.sa-carreira-spontaneous-success a {
    margin-top: 8px;
    background: none;
    border: none;
    color: var(--color-medical);
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms ease;
}

.sa-carreira-spontaneous-success button:hover,
.sa-carreira-spontaneous-success a:hover {
    text-decoration: underline;
}

/* Shared file input */
.sa-carreira-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 200ms ease;
}

.sa-carreira-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.sa-carreira-file:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.sa-carreira-file svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.4);
}

.sa-carreira-file-text {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* Light file variant (used inside modal) */
.sa-carreira-modal .sa-carreira-file {
    background: #f0f4f8;
    border-color: transparent;
    height: 52px;
}

.sa-carreira-modal .sa-carreira-file:hover {
    border-color: rgba(0, 71, 108, 0.3);
}

.sa-carreira-modal .sa-carreira-file svg {
    color: var(--color-text-muted);
}

.sa-carreira-modal .sa-carreira-file-text {
    color: var(--color-text-muted);
}

/* Apply Modal */
.sa-carreira-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 15, 24, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--font-family);
}

@media (min-width: 768px) {
    .sa-carreira-modal {
        padding: 32px;
    }
}

.sa-carreira-modal--open {
    display: flex;
}

.sa-carreira-modal-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: #ffffff;
    overflow-y: auto;
}

.sa-carreira-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-primary);
    padding: 24px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sa-carreira-modal-header-overline {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.sa-carreira-modal-header-title {
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.sa-carreira-modal-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.sa-carreira-modal-header-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    font-size: 12px;
}

.sa-carreira-modal-header-loc svg {
    width: 11px;
    height: 11px;
}

.sa-carreira-modal-header-dep {
    height: 22px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sa-carreira-modal-close {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
    transition: background-color 200ms ease;
}

.sa-carreira-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sa-carreira-modal-close svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
}

.sa-carreira-modal-body {
    padding: 32px;
}

.sa-carreira-modal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sa-carreira-modal-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sa-carreira-modal-row {
        grid-template-columns: 1fr 1fr;
    }
}

.sa-carreira-modal-field label:not(.sa-carreira-file) {
    display: block;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.sa-carreira-modal-field input,
.sa-carreira-modal-field textarea {
    width: 100%;
    background: #f0f4f8;
    border: 1px solid transparent;
    outline: none;
    padding: 0 16px;
    height: 50px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-dark);
    transition: background-color 200ms ease, border-color 200ms ease;
}

.sa-carreira-modal-field textarea {
    height: auto;
    padding: 14px 16px;
    resize: none;
    line-height: 1.5;
}

.sa-carreira-modal-field input::placeholder,
.sa-carreira-modal-field textarea::placeholder {
    color: var(--color-text-muted);
}

.sa-carreira-modal-field input:focus,
.sa-carreira-modal-field textarea:focus {
    background: #ffffff;
    border-color: var(--color-primary);
}

.sa-carreira-modal-requirements {
    background: #f8fafc;
    border-left: 2px solid var(--color-primary);
    padding: 16px 20px;
}

.sa-carreira-modal-requirements-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin: 0 0 8px;
}

.sa-carreira-modal-requirements-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-carreira-modal-requirements-item {
    font-weight: 300;
    font-size: 12px;
    color: var(--color-dark);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 4px 12px;
}

.sa-carreira-modal-submit {
    height: 52px;
    background: var(--color-orange);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background-color 200ms ease;
}

.sa-carreira-modal-submit:hover {
    background: #ff8f33;
}

.sa-carreira-modal-submit svg {
    width: 15px;
    height: 15px;
}

.sa-carreira-modal-disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 300;
    margin: 0;
}

.sa-carreira-modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 48px 0;
}

.sa-carreira-modal-success-icon {
    width: 64px;
    height: 64px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-carreira-modal-success-icon svg {
    width: 26px;
    height: 26px;
    color: #ffffff;
}

.sa-carreira-modal-success h3 {
    font-weight: 500;
    font-size: 22px;
    color: var(--color-dark);
    text-transform: uppercase;
    margin: 0;
}

.sa-carreira-modal-success p {
    font-weight: 300;
    font-size: 15px;
    color: var(--color-text-light);
    margin: 0;
    max-width: 20rem;
}

.sa-carreira-modal-success button {
    margin-top: 8px;
    height: 44px;
    padding: 0 32px;
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.sa-carreira-modal-success button:hover {
    background: #003350;
}

/* ============================================================================
   Services Page (sa-svc)
   ============================================================================ */

.sa-svc-section-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}
@media (min-width: 1024px) {
    .sa-svc-section-inner {
        padding: 0 var(--container-padding);
    }
}

/* Common — title / overline / paragraph / subtitle */
.sa-svc-overline {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ED6E00;
    margin: 0 0 16px;
}
.sa-svc-overline--orange { color: #ED6E00; }
.sa-svc-overline--primary { color: #00476c; }
/* sobretitulo por cima de fundo escuro — usado no bloco Become a Distributor */
.sa-svc-overline--light { color: rgba(255, 255, 255, 0.5); }

.sa-svc-section-title {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.1;
    color: #001524;
    text-transform: uppercase;
    margin: 0 0 24px;
}
@media (min-width: 768px) {
    .sa-svc-section-title { font-size: 44px; }
}
.sa-svc-section-title-bold { font-weight: 500; }
.sa-svc-section-title--light { color: #ffffff; }

.sa-svc-paragraph {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin: 0 0 20px;
}
.sa-svc-paragraph--light { color: rgba(255, 255, 255, 0.7); }

.sa-svc-subtitle {
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #001524;
    margin: 32px 0 24px;
}

/* Common — buttons */
.sa-svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 32px;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
    border: none;
    cursor: pointer;
}
.sa-svc-btn svg,
.sa-svc-btn img { width: 14px; height: 14px; object-fit: contain; }
.sa-svc-btn--primary { background: #00476c; color: #ffffff; }
.sa-svc-btn--primary:hover { background: #003350; color: #ffffff; }
.sa-svc-btn--orange { background: #ED6E00; color: #ffffff; }
.sa-svc-btn--orange:hover { background: #d45f00; color: #ffffff; }
.sa-svc-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.sa-svc-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; }
.sa-svc-btn--white { background: #ffffff; color: #00476c; font-weight: 500; height: 52px; }
.sa-svc-btn--white:hover { background: #f0f4f8; color: #00476c; }
.sa-svc-btn--outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 52px;
}
.sa-svc-btn--outline:hover { border-color: rgba(255, 255, 255, 0.7); color: #ffffff; }

/* Hero */
.sa-svc-hero {
    position: relative;
    width: 100%;
    height: 520px;
    background: #001524;
    overflow: hidden;
    font-family: var(--font-family);
}
.sa-svc-hero-bg {
    position: absolute;
    inset: 0;
}
.sa-svc-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.sa-svc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 21, 36, 0.95) 0%, rgba(0, 21, 36, 0.75) 50%, transparent 100%);
}
.sa-svc-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 1024px) {
    .sa-svc-hero-inner { padding: 0 var(--container-padding); }
}
.sa-svc-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
}
.sa-svc-hero-breadcrumb a,
.sa-svc-hero-breadcrumb span {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00476c;
    text-decoration: none;
    transition: color 200ms ease;
}
.sa-svc-hero-breadcrumb a:hover { color: #ffffff; }
.sa-svc-hero-breadcrumb svg { width: 12px; height: 12px; color: #00476c; }
.sa-svc-hero-title {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .sa-svc-hero-title { font-size: 80px; }
}
.sa-svc-hero-title-light { font-weight: 300; }
.sa-svc-hero-title-bold { font-weight: 500; }
.sa-svc-hero-tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: #d1d5dc;
    max-width: 520px;
    margin: 0;
}
@media (min-width: 768px) {
    .sa-svc-hero-tagline { font-size: 18px; }
}

/* Overview (6 anchor cards) */
.sa-svc-overview {
    background: #ffffff;
    padding: 64px 0;
    border-bottom: 1px solid #e5e7eb;
    font-family: var(--font-family);
}
.sa-svc-overview-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}
@media (min-width: 1024px) {
    .sa-svc-overview-inner { padding: 0 var(--container-padding); }
}
.sa-svc-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #e5e7eb;
}
@media (min-width: 768px) {
    .sa-svc-overview-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .sa-svc-overview-grid { grid-template-columns: repeat(6, 1fr); }
}
.sa-svc-overview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    text-decoration: none;
    border-right: 1px solid #e5e7eb;
    transition: background-color 200ms ease;
}
.sa-svc-overview-card:last-child { border-right: none; }
.sa-svc-overview-card:hover { background: #f8fafc; }
.sa-svc-overview-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.08);
    color: #00476c;
    transition: background-color 200ms ease, color 200ms ease;
}
.sa-svc-overview-card:hover .sa-svc-overview-card-icon {
    background: #00476c;
    color: #ffffff;
}
.sa-svc-overview-card-icon svg,
.sa-svc-overview-card-icon img { width: 20px; height: 20px; object-fit: contain; }
/* Os icones sao PNG com a cor ja "queimada" (o TinyMCE tira <svg> inline), por
   isso o `color: #fff` da regra de cima nao lhes toca: ao passar o rato o chip
   ficava azul e o icone azul desaparecia. O filtro pinta o PNG de branco,
   seja qual for a cor original, e mantem a transparencia. */
.sa-svc-overview-card-icon img { transition: filter 200ms ease; }
.sa-svc-overview-card:hover .sa-svc-overview-card-icon img { filter: brightness(0) invert(1); }
.sa-svc-overview-card-title {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #374151;
    line-height: 1.2;
    transition: color 200ms ease;
}
.sa-svc-overview-card:hover .sa-svc-overview-card-title { color: #00476c; }
.sa-svc-overview-card-lock {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9ca3af;
}
.sa-svc-overview-card-lock svg,
.sa-svc-overview-card-lock img { width: 9px; height: 9px; object-fit: contain; }

/* Maintenance */
.sa-svc-maintenance {
    background: #f8fafc;
    padding: 80px 0;
    scroll-margin-top: 80px;
    font-family: var(--font-family);
}
.sa-svc-maintenance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
@media (min-width: 1280px) {
    .sa-svc-maintenance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}
.sa-svc-maintenance-image {
    position: relative;
    height: 480px;
    overflow: hidden;
}
.sa-svc-maintenance-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sa-svc-maintenance-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.6), transparent);
}
.sa-svc-maintenance-image-caption {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
}
.sa-svc-maintenance-image-badge {
    display: inline-block;
    background: #ED6E00;
    color: #ffffff;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    margin-bottom: 12px;
}
.sa-svc-maintenance-image-tagline {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
}

.sa-svc-plans {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 32px;
}
.sa-svc-plan {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}
.sa-svc-plan--highlight {
    background: #00476c;
    border-color: #00476c;
}
.sa-svc-plan-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #00476c;
    margin-top: 2px;
}
.sa-svc-plan--highlight .sa-svc-plan-icon { color: #ffffff; }
.sa-svc-plan-title {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #001524;
    margin: 0 0 4px;
}
.sa-svc-plan--highlight .sa-svc-plan-title { color: #ffffff; }
.sa-svc-plan-desc {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}
.sa-svc-plan--highlight .sa-svc-plan-desc { color: rgba(255, 255, 255, 0.7); }

.sa-svc-note {
    background: #f0f4f8;
    border: 1px solid #e5e7eb;
    padding: 20px;
    margin: 0 0 32px;
}
.sa-svc-note p {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}
.sa-svc-note strong { font-weight: 500; color: #001524; }

/* Rental (dark) */
.sa-svc-rental {
    background: #001524;
    padding: 80px 0;
    scroll-margin-top: 80px;
    font-family: var(--font-family);
}
.sa-svc-rental-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 1280px) {
    .sa-svc-rental-grid {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}
.sa-svc-rental-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 40px;
}
@media (min-width: 768px) {
    .sa-svc-rental-benefits { grid-template-columns: 1fr 1fr; }
}
.sa-svc-rental-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    /* o texto pode vir solto no div (sem <span>) desde que o TinyMCE limpou o
       markup, por isso o estilo do texto vive aqui e nao so no <span> */
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
/* O ponto laranja era um <span> vazio. O TinyMCE apaga elementos inline vazios
   ao gravar a pagina — em PT ja desapareceram, nas outras 4 linguas ainda la
   estao. Passa a ser desenhado em CSS (::before), que o editor nao consegue
   apagar, e o <span> antigo e escondido para nao aparecerem dois pontos nas
   linguas que ainda o tem. */
.sa-svc-rental-benefit::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #ED6E00;
    flex-shrink: 0;
}
.sa-svc-rental-benefit-dot { display: none; }
.sa-svc-rental-benefit span {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.sa-svc-rental-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 640px) {
    .sa-svc-rental-cta { flex-direction: row; }
}
.sa-svc-rental-image {
    position: relative;
    height: 460px;
    overflow: hidden;
    display: none;
}
@media (min-width: 1280px) {
    .sa-svc-rental-image { display: block; }
}
.sa-svc-rental-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.sa-svc-rental-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent, rgba(0, 21, 36, 0.4));
}

/* R&D */
.sa-svc-rnd {
    background: #ffffff;
    padding: 80px 0;
    scroll-margin-top: 80px;
    font-family: var(--font-family);
}
.sa-svc-rnd-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
}
@media (min-width: 1280px) {
    .sa-svc-rnd-header {
        grid-template-columns: 1fr 1fr;
        gap: 64px;
    }
}
.sa-svc-rnd-header-image {
    position: relative;
    height: 360px;
    overflow: hidden;
}
.sa-svc-rnd-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sa-svc-rnd-header-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.4), transparent);
}

.sa-svc-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #e5e7eb;
    margin: 0 0 64px;
}
@media (min-width: 768px) {
    .sa-svc-pillars { grid-template-columns: repeat(3, 1fr); }
}
.sa-svc-pillar {
    background: #ffffff;
    padding: 28px;
}
.sa-svc-pillar-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00476c;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 20px;
}
/* Os 3 pilares passaram a ter titulo (o texto novo do cliente traz um por
   pilar). Mesmo tratamento do .sa-svc-activity-title. */
.sa-svc-pillar-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.35;
    text-transform: uppercase;
    color: #001524;
    margin: 0 0 10px;
}
.sa-svc-pillar p {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.sa-svc-activities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 0 0 48px;
}
@media (min-width: 768px) {
    .sa-svc-activities { grid-template-columns: 1fr 1fr; }
}
.sa-svc-activity {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 32px;
}
.sa-svc-activity-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.sa-svc-activity-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.1);
    color: #00476c;
}
.sa-svc-activity-icon svg,
.sa-svc-activity-icon img { width: 20px; height: 20px; object-fit: contain; }
.sa-svc-activity-title {
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    color: #001524;
    margin: 0;
}
.sa-svc-activity-body {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Video placeholder */
.sa-svc-video {
    background: #000000;
    font-family: var(--font-family);
}
.sa-svc-video-inner {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sa-svc-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}
.sa-svc-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 21, 36, 0.6);
}
.sa-svc-video-play {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.sa-svc-video-play:hover { background: rgba(255, 255, 255, 0.2); }
.sa-svc-video-play svg,
.sa-svc-video-play img {
    width: 28px;
    height: 28px;
    color: #ffffff;
    object-fit: contain;
    margin-left: 4px;
}

/* Quote CTA */
.sa-svc-cta {
    background: #00476c;
    padding: 64px 0;
    font-family: var(--font-family);
}
.sa-svc-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
@media (min-width: 768px) {
    .sa-svc-cta-row { flex-direction: row; }
}
.sa-svc-cta-title {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 8px;
}
@media (min-width: 768px) {
    .sa-svc-cta-title { font-size: 36px; }
}
.sa-svc-cta-desc {
    font-weight: 300;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.sa-svc-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Become a Distributor  —  .sa-svc-dist-*     (1 Set 2026)

   Do prototipo v3 (11), `ServicesPage.tsx` > DistributorSection. Entra na
   pagina 65 entre o #rnd e o CTA final, que e' a ordem do prototipo, e o
   cartao "Become a Distributor" da grelha de topo aponta para o #distributor.

   Sao cinco faixas: introducao escura, 6 razoes, apoio em 5 passos, como se
   tornar em 4 passos, e o CTA. As classes comuns (.sa-svc-overline,
   -section-title, -paragraph, -btn) sao as que a pagina ja' usa — aqui so'
   vive o que e' proprio deste bloco.

   Uma diferenca deliberada em relacao ao prototipo: ele repete os paragrafos
   da coluna da direita num segundo bloco so' para telemovel. Aqui o texto
   existe UMA vez, e abaixo dos 1280 a coluna vira uma faixa #001f35 de
   largura inteira (as margens negativas anulam o padding do container). Quem
   edita no backoffice nao tem de manter duas copias do mesmo paragrafo.
   --------------------------------------------------------------------------- */
.sa-svc-dist {
    scroll-margin-top: 80px;
    font-family: var(--font-family);
}

/* 1 — Introducao (fundo escuro com fotografia esbatida) */
.sa-svc-dist-intro {
    position: relative;
    background: #001524;
    padding: 48px 0;
    overflow: hidden;
}
@media (min-width: 768px) {
    .sa-svc-dist-intro { padding: 96px 0; }
}
.sa-svc-dist-intro-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}
.sa-svc-dist-intro-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #001524, rgba(0, 21, 36, 0.9) 50%, rgba(0, 21, 36, 0.6));
}
.sa-svc-dist-intro .sa-svc-section-inner { position: relative; }
.sa-svc-dist-intro-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 1280px) {
    .sa-svc-dist-intro-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* A coluna da direita: faixa de largura inteira no telemovel, aparte com
   risco a` esquerda a partir dos 1280. */
.sa-svc-dist-aside {
    background: #001f35;
    margin: 0 calc(var(--container-padding-mobile) * -1);
    padding: 32px var(--container-padding-mobile);
}
@media (min-width: 1024px) {
    .sa-svc-dist-aside {
        margin: 0 calc(var(--container-padding) * -1);
        padding: 32px var(--container-padding);
    }
}
@media (min-width: 1280px) {
    .sa-svc-dist-aside {
        background: transparent;
        margin: 0;
        padding: 0 0 0 64px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}
.sa-svc-dist-aside-label {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 24px;
}
.sa-svc-dist-aside p {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
}
.sa-svc-dist-aside p:last-child { margin-bottom: 0; }

/* 2 — As 6 razoes */
.sa-svc-dist-why {
    background: #f8fafc;
    padding: 48px 0;
}
@media (min-width: 768px) {
    .sa-svc-dist-why { padding: 80px 0; }
}
.sa-svc-dist-head { margin-bottom: 40px; }
.sa-svc-dist-head .sa-svc-section-title { margin-bottom: 0; }

.sa-svc-dist-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #e5e7eb;
    border: 1px solid #e5e7eb;
}
@media (min-width: 768px)  { .sa-svc-dist-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sa-svc-dist-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sa-svc-dist-benefit {
    background: #ffffff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background-color 200ms ease;
}
.sa-svc-dist-benefit:hover { background: #00476c; }
.sa-svc-dist-benefit-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.08);
    flex-shrink: 0;
    transition: background-color 200ms ease;
}
.sa-svc-dist-benefit:hover .sa-svc-dist-benefit-icon { background: rgba(255, 255, 255, 0.15); }
.sa-svc-dist-benefit-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: filter 200ms ease;
}
/* Os PNG do RTE tem a cor cozida; e' o mesmo truque do .sa-svc-overview-card. */
.sa-svc-dist-benefit:hover .sa-svc-dist-benefit-icon img { filter: brightness(0) invert(1); }
.sa-svc-dist-benefit-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: #001524;
    margin: 0;
    transition: color 200ms ease;
}
.sa-svc-dist-benefit:hover .sa-svc-dist-benefit-title { color: #ffffff; }
.sa-svc-dist-benefit-body {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
    transition: color 200ms ease;
}
.sa-svc-dist-benefit:hover .sa-svc-dist-benefit-body { color: rgba(255, 255, 255, 0.7); }

/* 3 — Apoio em cada fase */
.sa-svc-dist-support {
    background: #ffffff;
    padding: 48px 0;
    border-top: 1px solid #e5e7eb;
}
@media (min-width: 768px) {
    .sa-svc-dist-support { padding: 80px 0; }
}
.sa-svc-dist-support-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 1280px) {
    .sa-svc-dist-support-grid { grid-template-columns: 1fr 1.4fr; gap: 64px; }
    .sa-svc-dist-support-intro { position: sticky; top: 112px; }
}
.sa-svc-dist-support-intro .sa-svc-section-title { margin-bottom: 24px; }
.sa-svc-dist-support-intro .sa-svc-paragraph { margin-bottom: 0; }

.sa-svc-dist-steps { display: flex; flex-direction: column; }
.sa-svc-dist-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0;
    border-top: 1px solid #f3f4f6;
}
.sa-svc-dist-step:first-child { border-top: none; padding-top: 0; }
.sa-svc-dist-step-num {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00476c;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    margin-top: 2px;
}
.sa-svc-dist-step-title {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: #001524;
    margin: 0 0 6px;
}
.sa-svc-dist-step-body {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

/* 4 — Como se tornar distribuidor */
.sa-svc-dist-how {
    background: #00476c;
    padding: 48px 0;
}
@media (min-width: 768px) {
    .sa-svc-dist-how { padding: 80px 0; }
}
.sa-svc-dist-how-head { margin-bottom: 48px; }
.sa-svc-dist-how-head .sa-svc-section-title { margin-bottom: 0; }
.sa-svc-dist-hows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px)  { .sa-svc-dist-hows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sa-svc-dist-hows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sa-svc-dist-how-card {
    position: relative;
    background: #00476c;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color 200ms ease;
}
.sa-svc-dist-how-card:hover { background: #003350; }
.sa-svc-dist-how-num {
    font-weight: 500;
    font-size: 48px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    user-select: none;
}
.sa-svc-dist-how-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 8px;
}
.sa-svc-dist-how-body {
    font-weight: 300;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
/* o risco curto entre cartoes, so' quando estao os quatro em linha */
@media (min-width: 1280px) {
    .sa-svc-dist-how-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 72px;
        right: 0;
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
    }
}

/* 5 — CTA */
.sa-svc-dist-cta {
    position: relative;
    background: #001524;
    overflow: hidden;
}
.sa-svc-dist-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}
.sa-svc-dist-cta-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 21, 36, 0.98) 40%, rgba(0, 21, 36, 0.7));
}
.sa-svc-dist-cta .sa-svc-section-inner {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}
@media (min-width: 768px) {
    .sa-svc-dist-cta .sa-svc-section-inner { padding-top: 112px; padding-bottom: 112px; }
}
.sa-svc-dist-cta-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}
@media (min-width: 1280px) {
    .sa-svc-dist-cta-row { flex-direction: row; align-items: center; }
}
.sa-svc-dist-cta-text { max-width: 640px; }
.sa-svc-dist-cta-text .sa-svc-section-title { margin-bottom: 16px; }
.sa-svc-dist-cta-desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}
.sa-svc-dist-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    align-items: stretch;
}
.sa-svc-dist-cta-actions .sa-svc-btn {
    height: 60px;
    justify-content: center;
}

/* ===========================================================================
   Case Studies page (id=151)  —  .sa-cs-*
   =========================================================================== */

/* Shared meta + chips (used by featured card and grid cards) */
.sa-cs-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sa-cs-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    white-space: nowrap;
}
.sa-cs-chip--sector {
    font-weight: 500;
    color: #00476c;
    background: rgba(0, 71, 108, 0.08);
}
.sa-cs-chip--location {
    font-weight: 300;
    color: #9ca3af;
    background: transparent;
    padding: 0;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.sa-cs-chip--location::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #9ca3af;
}

/* Pages count (e.g., "8 pages") */
.sa-cs-pages {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* Buttons */
.sa-cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 32px;
    background: #00476c;
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease;
}
.sa-cs-btn:hover { background: #003350; color: #ffffff; text-decoration: none; }
.sa-cs-btn--sm {
    height: 38px;
    padding: 0 20px;
    font-size: 11px;
    letter-spacing: 1.2px;
}

/* -------- Hero -------- */
.sa-cs-hero {
    position: relative;
    width: 100%;
    height: 520px;
    background: #001524;
    overflow: hidden;
    font-family: var(--font-family);
}
.sa-cs-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.sa-cs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 21, 36, 0.95), rgba(0, 21, 36, 0.75) 50%, transparent);
}
.sa-cs-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    padding: 80px 32px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 768px) {
    .sa-cs-hero-inner { padding-left: 64px; padding-right: 64px; }
}
.sa-cs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
}
.sa-cs-breadcrumb a,
.sa-cs-breadcrumb span {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00476c;
    text-decoration: none;
    transition: color 200ms ease;
}
.sa-cs-breadcrumb a:hover { color: #ffffff; text-decoration: none; }
.sa-cs-breadcrumb-sep { color: #00476c; }
.sa-cs-hero-title {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    font-size: 56px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 24px;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .sa-cs-hero-title { font-size: 80px; }
}
.sa-cs-hero-title-light { font-weight: 300; }
.sa-cs-hero-title-bold { font-weight: 500; }
.sa-cs-hero-desc {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #d1d5dc;
    max-width: 480px;
    margin: 0;
}
@media (min-width: 768px) {
    .sa-cs-hero-desc { font-size: 18px; }
}

/* -------- Featured Case -------- */
.sa-cs-featured {
    background: #ffffff;
    padding: 80px 0;
    font-family: var(--font-family);
}
.sa-cs-featured-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}
@media (min-width: 768px) {
    .sa-cs-featured-inner { padding: 0 64px; }
}
.sa-cs-featured-card {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .sa-cs-featured-card { grid-template-columns: 1fr 1fr; }
}
.sa-cs-featured-img {
    position: relative;
    height: 420px;
    overflow: hidden;
}
.sa-cs-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms ease;
}
.sa-cs-featured-card:hover .sa-cs-featured-img img { transform: scale(1.05); }
.sa-cs-featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 30px;
    padding: 0 16px;
    background: #ED6E00;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    z-index: 2;
}
.sa-cs-featured-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.4), transparent);
}
.sa-cs-featured-content {
    background: #f8fafc;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
@media (min-width: 1280px) {
    .sa-cs-featured-content { padding: 56px; }
}
.sa-cs-featured-title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: #001524;
    text-transform: uppercase;
    margin: 0 0 20px;
}
@media (min-width: 768px) {
    .sa-cs-featured-title { font-size: 36px; }
}
.sa-cs-featured-desc {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}
.sa-cs-featured-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* -------- Cases Grid Section -------- */
.sa-cs-grid-section {
    background: #f8fafc;
    padding: 80px 0;
    font-family: var(--font-family);
}
.sa-cs-grid-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
}
@media (min-width: 768px) {
    .sa-cs-grid-inner { padding: 0 64px; }
}

/* Controls (filters + search) */
.sa-cs-controls {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}
@media (min-width: 768px) {
    .sa-cs-controls { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sa-cs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sa-cs-filter {
    height: 36px;
    padding: 0 20px;
    background: #ffffff;
    color: #00476c;
    border: 1px solid rgba(0, 71, 108, 0.2);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sa-cs-filter:hover { background: rgba(0, 71, 108, 0.05); }
.sa-cs-filter.is-active {
    background: #00476c;
    color: #ffffff;
    border-color: #00476c;
}

/* Search */
.sa-cs-search-wrap {
    position: relative;
    width: 100%;
}
@media (min-width: 768px) {
    .sa-cs-search-wrap { width: 280px; }
}
.sa-cs-search-wrap::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 1.5px solid #9ca3af;
    border-radius: 50%;
    pointer-events: none;
}
.sa-cs-search-wrap::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 6px;
    height: 1.5px;
    margin-top: 4px;
    background: #9ca3af;
    transform: rotate(45deg);
    pointer-events: none;
}
.sa-cs-search {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 36px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    outline: none;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    color: #001524;
    transition: border-color 200ms ease;
}
.sa-cs-search::placeholder { color: #9ca3af; }
.sa-cs-search:focus { border-color: #00476c; }

/* Grid */
.sa-cs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 768px) {
    .sa-cs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .sa-cs-grid { grid-template-columns: repeat(3, 1fr); }
}

.sa-cs-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}
.sa-cs-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 336 / 226;
    overflow: hidden;
    background: #e5e7eb;
}
.sa-cs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms ease;
}
.sa-cs-card:hover .sa-cs-card-img img { transform: scale(1.05); }
.sa-cs-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.2), transparent);
    pointer-events: none;
}
.sa-cs-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.sa-cs-card-title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #001524;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.sa-cs-card-desc {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sa-cs-card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Empty state */
.sa-cs-empty {
    text-align: center;
    padding: 80px 16px;
    color: #9ca3af;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
}

/* Load more */
.sa-cs-loadmore-wrap {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}
.sa-cs-loadmore {
    height: 52px;
    padding: 0 48px;
    background: transparent;
    color: #00476c;
    border: 1px solid #00476c;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}
.sa-cs-loadmore:hover {
    background: #00476c;
    color: #ffffff;
}

/* -------- CTA -------- */
.sa-cs-cta {
    background: #00476c;
    padding: 80px 0;
    font-family: var(--font-family);
}
.sa-cs-cta-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
@media (min-width: 768px) {
    .sa-cs-cta-inner { flex-direction: row; padding: 0 64px; }
}
.sa-cs-cta-title {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 32px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0 0 8px;
}
@media (min-width: 768px) {
    .sa-cs-cta-title { font-size: 40px; }
}
.sa-cs-cta-title-bold { font-weight: 500; }
.sa-cs-cta-desc {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.sa-cs-cta-btn {
    height: 52px;
    padding: 0 40px;
    background: #ffffff;
    color: #00476c;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 200ms ease;
}
.sa-cs-cta-btn:hover { background: #f0f4f8; color: #00476c; text-decoration: none; }

/* ===========================================================================
   Resources page (id=117)  —  .sa-res-*  (v3 prototype-exact rebuild)
   Sections: hero (Banners cat 50) + Simulators & Comparators + Knowledge.
   Sector accent switches via .sa-res-tools[data-sector] (industrial|medical).
   =========================================================================== */

.sa-res-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 64px;
}

.sa-res-overline {
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #ED6E00;
    margin: 0 0 12px;
}

.sa-res-overline--blue { color: #00476c; }

.sa-res-title {
    font-weight: 300;
    font-size: 48px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #001524;
    margin: 0;
}

.sa-res-title span { font-weight: 500; }

/* ── Simulators & Comparators ──────────────────────────────────────────── */

.sa-res-tools { font-family: 'Kanit', sans-serif; }

.sa-res-tools-head {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding-top: 40px;
}

.sa-res-tools-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* sector accent cascade */
.sa-res-tools[data-sector="medical"] .sa-res-overline { color: #00A6D6; }

.sa-res-sectors {
    display: flex;
    border: 1px solid #e5e7eb;
    width: fit-content;
}

.sa-res-sector {
    height: 48px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    background: #fff;
    color: #4b5563;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.sa-res-sector svg { width: 14px; height: 14px; }
.sa-res-sector[data-sector="industrial"] { border-right: 1px solid #e5e7eb; }
.sa-res-sector[data-sector="industrial"].is-active { background: #ED6E00; color: #fff; }
.sa-res-sector[data-sector="medical"].is-active { background: #00A6D6; color: #fff; }

.sa-res-subtabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 40px;
}

.sa-res-subtab {
    padding: 16px 32px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: #6b7280;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease;
}

.sa-res-tools[data-sector="industrial"] .sa-res-subtab.is-active { color: #ED6E00; border-bottom-color: #ED6E00; }
.sa-res-tools[data-sector="medical"] .sa-res-subtab.is-active { color: #00A6D6; border-bottom-color: #00A6D6; }

/* ── Product Simulator ─────────────────────────────────────────────────── */

.sa-res-sim { background: #fff; padding: 40px 0; }

.sa-res-sim-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
}

.sa-res-sim-panel {
    border: 1px solid #e5e7eb;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sa-res-slider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sa-res-slider-label {
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #9ca3af;
}

.sa-res-slider-value {
    font-weight: 500;
    font-size: 26px;
    color: #001524;
    line-height: 1;
}

.sa-res-slider-unit {
    font-weight: 300;
    font-size: 13px;
    color: #9ca3af;
    margin-left: 4px;
}

.sa-res-slider-track {
    position: relative;
    height: 4px;
    background: #e5e7eb;
}

.sa-res-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ED6E00;
    transition: width 100ms ease;
}

.sa-res-tools[data-sector="medical"] .sa-res-slider-fill { background: #00A6D6; }

.sa-res-slider-track input[type="range"] {
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    height: 20px;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.sa-res-slider-knob {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -6px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    background: #ED6E00;
    pointer-events: none;
    transition: left 100ms ease;
}

.sa-res-tools[data-sector="medical"] .sa-res-slider-knob { background: #00A6D6; }

.sa-res-slider-bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-weight: 300;
    font-size: 10px;
    color: #d1d5dc;
}

.sa-res-sim-rec {
    border-top: 1px solid #e5e7eb;
    padding-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sa-res-rec-overline {
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #9ca3af;
    margin: 0 0 8px;
}

.sa-res-rec-name {
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    color: #001524;
    line-height: 1.2;
    margin: 0;
}

.sa-res-rec-series {
    font-weight: 300;
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0;
}

.sa-res-rec-btn {
    flex-shrink: 0;
    height: 46px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: #ED6E00;
    color: #fff;
    text-decoration: none;
    transition: opacity 200ms ease;
}

.sa-res-rec-btn:hover { opacity: 0.8; color: #fff; text-decoration: none; }
.sa-res-tools[data-sector="medical"] .sa-res-rec-btn { background: #00A6D6; }

.sa-res-sim-imgcard {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px;
}

.sa-res-sim-imgcard img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.sa-res-sim-imgmeta {
    width: 100%;
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
    text-align: center;
}

.sa-res-sim-imgmeta-name {
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    color: #001524;
    margin: 0;
}

.sa-res-sim-imgmeta-series {
    font-weight: 300;
    font-size: 12px;
    color: #9ca3af;
    margin: 2px 0 0;
}

/* ── Equipment Comparator ──────────────────────────────────────────────── */

.sa-res-comp { background: #f8fafc; padding: 64px 0; }

.sa-res-comp-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.sa-res-comp-slot { flex: 1; min-width: 0; }

.sa-res-comp-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: visible;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.sa-res-comp-card.is-expanded {
    border-color: #00476c;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.sa-res-tools[data-sector="medical"] .sa-res-comp-card.is-expanded { border-color: #00A6D6; }

.sa-res-comp-cardhead { padding: 24px 24px 16px; position: relative; }

.sa-res-comp-cardlabel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sa-res-comp-cardlabel {
    font-size: 11px;
    color: #90a1b9;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.sa-res-comp-remove {
    background: none;
    border: none;
    color: #d1d5dc;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.sa-res-comp-remove:hover { color: #f87171; }
.sa-res-comp-remove svg { width: 14px; height: 14px; }

.sa-res-comp-select {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #f4f4f4;
    color: #474747;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.sa-res-comp-card.is-expanded .sa-res-comp-select { background: #00476c; color: #fff; }
.sa-res-tools[data-sector="medical"] .sa-res-comp-card.is-expanded .sa-res-comp-select { background: #00A6D6; }

.sa-res-comp-select svg {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}

.sa-res-comp-card.is-open .sa-res-comp-select svg { transform: rotate(180deg); }

.sa-res-comp-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 4px);
    left: 24px;
    right: 24px;
    background: #fff;
    border: 1px solid #00476c;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
}

.sa-res-tools[data-sector="medical"] .sa-res-comp-dropdown { border-color: #00A6D6; }
.sa-res-comp-card.is-open .sa-res-comp-dropdown { display: block; }

.sa-res-comp-option {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f9fafb;
    font-size: 14px;
    color: #474747;
    transition: background-color 150ms ease;
}

.sa-res-comp-option:last-child { border-bottom: none; }
.sa-res-comp-option:hover { background: #f8fafc; }
.sa-res-comp-option.is-selected { background: #e6f0f5; color: #00476c; font-weight: 500; }
.sa-res-tools[data-sector="medical"] .sa-res-comp-option.is-selected { background: #e6f7fb; color: #00A6D6; }

.sa-res-comp-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 500ms ease, opacity 500ms ease;
}

.sa-res-comp-card.is-expanded .sa-res-comp-body { max-height: 600px; opacity: 1; }

.sa-res-comp-imgwrap {
    display: flex;
    justify-content: center;
    padding: 32px 0;
    background: #f8fafc;
}

.sa-res-comp-imgwrap img {
    width: 55%;
    height: 180px;
    object-fit: contain;
    filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.08));
}

.sa-res-comp-specs {
    padding: 20px 24px;
    border-top: 1px solid #f3f4f6;
}

.sa-res-comp-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f9fafb;
    padding: 0 0 10px;
    margin-bottom: 12px;
}

.sa-res-comp-spec:last-child { border-bottom: none; margin-bottom: 0; }

.sa-res-comp-spec-label { font-weight: 300; font-size: 13px; color: #62748e; }
.sa-res-comp-spec-val { font-weight: 500; font-size: 14px; color: #004e7c; }
.sa-res-tools[data-sector="medical"] .sa-res-comp-spec-val { color: #006a8a; }

.sa-res-comp-empty {
    padding: 4px 24px 24px;
    font-weight: 300;
    font-size: 13px;
    color: #d1d5dc;
    margin: 0;
}

.sa-res-comp-add {
    flex: none;
    width: 80px;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
}

.sa-res-comp-add-circle {
    width: 56px;
    height: 56px;
    border: 2px dashed #d1d5dc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5dc;
    transition: border-color 200ms ease, color 200ms ease;
}

.sa-res-comp-add-circle svg { width: 22px; height: 22px; }

.sa-res-comp-add-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9ca3af;
    text-align: center;
    transition: color 200ms ease;
}

.sa-res-tools[data-sector="industrial"] .sa-res-comp-add:hover .sa-res-comp-add-circle { border-color: #ED6E00; color: #ED6E00; }
.sa-res-tools[data-sector="industrial"] .sa-res-comp-add:hover .sa-res-comp-add-label { color: #ED6E00; }
.sa-res-tools[data-sector="medical"] .sa-res-comp-add:hover .sa-res-comp-add-circle { border-color: #00A6D6; color: #00A6D6; }
.sa-res-tools[data-sector="medical"] .sa-res-comp-add:hover .sa-res-comp-add-label { color: #00A6D6; }

/* ── Knowledge / Resources & Downloads ─────────────────────────────────── */

.sa-res-knowledge {
    background: #f8fafc;
    padding: 80px 0;
    font-family: 'Kanit', sans-serif;
}

.sa-res-kn-head { margin-bottom: 48px; }

.sa-res-kn-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
}

.sa-res-faq-title {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #001524;
    margin: 0 0 20px;
}

.sa-res-faq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.sa-res-faq-pill {
    height: 32px;
    padding: 0 16px;
    font-family: 'Kanit', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    cursor: pointer;
    transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.sa-res-faq-pill:hover { border-color: rgba(0, 71, 108, 0.3); }
.sa-res-faq-pill.is-active { background: #00476c; border-color: #00476c; color: #fff; }

.sa-res-faq-list { display: flex; flex-direction: column; gap: 1px; }

.sa-res-faq { background: #fff; }

.sa-res-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.sa-res-faq-q-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-right: 16px;
}

.sa-res-faq-qicon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.08);
    color: #00476c;
}

.sa-res-faq-qicon svg { width: 12px; height: 12px; }

.sa-res-faq-qtext {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #001524;
    line-height: 1.4;
}

.sa-res-faq-chev {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: #9ca3af;
    transition: transform 200ms ease;
}

.sa-res-faq.is-open .sa-res-faq-chev { transform: rotate(180deg); }

.sa-res-faq-a {
    display: none;
    padding: 0 20px 20px 56px;
}

.sa-res-faq.is-open .sa-res-faq-a { display: block; }

.sa-res-faq-a p {
    font-weight: 300;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* "See more" das FAQs — v3 (11).
   A barra por baixo da lista: contagem a` esquerda, botao a` direita. O botao
   desaparece quando ja' nao ha' mais nada para revelar, mas a contagem fica
   sempre -- com 109 perguntas na base (o prototipo tinha 16) e' ela que diz a`
   pessoa onde e' que esta'. */
.sa-res-faq-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.sa-res-faq-count {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #9ca3af;
}

.sa-res-faq-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 24px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease;
}

.sa-res-faq-more-btn:hover { border-color: #00476c; color: #00476c; }

.sa-res-faq-more-btn svg { width: 12px; height: 12px; }

.sa-res-cards { display: flex; flex-direction: column; gap: 16px; }

.sa-res-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: border-color 200ms ease;
}

.sa-res-card:hover { border-color: rgba(0, 71, 108, 0.3); }

.sa-res-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 108, 0.08);
    color: #00476c;
}

.sa-res-card-icon svg { width: 18px; height: 18px; }

.sa-res-card-titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sa-res-card-title {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #001524;
    margin: 0;
}

.sa-res-card-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 300;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
}

.sa-res-card-lock svg { width: 9px; height: 9px; }

.sa-res-card-desc {
    font-weight: 300;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 12px;
}

.sa-res-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #00476c;
    text-decoration: none;
    transition: gap 200ms ease;
}

.sa-res-card-cta:hover { gap: 10px; color: #00476c; text-decoration: none; }
.sa-res-card-cta svg { width: 11px; height: 11px; }

.sa-res-cta {
    background: #00476c;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sa-res-cta-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sa-res-cta-icon svg { width: 18px; height: 18px; }

.sa-res-cta-title {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 4px;
}

.sa-res-cta-desc {
    font-weight: 300;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0 0 16px;
}

.sa-res-cta-btn {
    height: 38px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #00476c;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.sa-res-cta-btn:hover { background: #f0f4f8; color: #00476c; text-decoration: none; }
.sa-res-cta-btn svg { width: 11px; height: 11px; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .sa-res-kn-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .sa-res-inner { padding: 0 32px; }
    .sa-res-sim-grid { grid-template-columns: 1fr; }
    .sa-res-comp-row { flex-direction: column; align-items: stretch; }
    .sa-res-comp-add { width: 100%; flex-direction: row; justify-content: center; padding: 16px 0; }
}

@media (max-width: 768px) {
    .sa-res-title { font-size: 36px; }
    .sa-res-tools-head-row { align-items: flex-start; flex-direction: column; }
    .sa-res-subtab { padding: 16px 20px; }
    .sa-res-sim-rec { flex-direction: column; align-items: flex-start; }
}

/* ── Careers: listing card (link) + job detail page (designer layout) ─────── */
.sa-carreira-job--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.sa-carreira-job--link:hover { box-shadow: 0 8px 24px rgba(0,21,36,0.08); border-color: var(--color-primary); }
.sa-carreira-job-teaser {
    color: var(--color-text-muted); font-weight: 300; font-size: 14px;
    line-height: 1.6; margin: 8px 0 12px; max-width: 70ch;
}
.sa-carreira-job-view {
    display: inline-flex; align-items: center; gap: 8px; color: var(--color-orange);
    font-weight: 500; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.sa-carreira-job-view svg { width: 16px; height: 16px; }

/* Detail: shared container matches the listing (max-width 1662, same padding) */
.sa-carreira-det-body { font-family: var(--font-family); background: #ffffff; }
.sa-carreira-det-inner {
    width: 100%; max-width: var(--container-max); margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}
@media (min-width: 1024px) { .sa-carreira-det-inner { padding: 0 var(--container-padding); } }

/* Breadcrumb — the page's own top bar (no site header on job detail pages),
   sticky so it stays on top as you scroll (matches prototype) */
.sa-carreira-det-crumb { background: #001524; padding: 16px 0; position: sticky; top: 0; z-index: 20; }
.sa-carreira-det-crumb .sa-carreira-det-inner { display: flex; align-items: center; gap: 8px; }
.sa-carreira-det-crumb a, .sa-carreira-det-crumb span {
    font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 300;
}
.sa-carreira-det-crumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.sa-carreira-det-crumb a:hover { color: #fff; }
.sa-carreira-det-crumb span { color: rgba(255,255,255,0.8); }
.sa-carreira-det-crumb svg { width: 12px; height: 12px; color: rgba(255,255,255,0.3); }

/* Hero */
/* ---------------------------------------------------------------------------
   Fotografia do cargo na pagina da vaga   (1 Set 2026)

   Do prototipo v3 (11), JobDetailView. A mesma imagem em dois sitios: a SERIO
   na barra lateral, a 4:3 por cima do cartao de detalhes (no prototipo esta'
   comentada como "Role image"), e outra vez no hero como textura a 28%.

   Vem do departamento; a vaga pode sobrepor-se com a sua. Sem nenhuma das
   duas, o template nao desenha nada e isto tudo fica inerte — o hero volta a
   ser o `background` liso e a barra lateral fica so' com o cartao.
   --------------------------------------------------------------------------- */
.sa-carreira-det-hero { background: #001524; padding: 56px 0 48px; position: relative; overflow: hidden; }
.sa-carreira-det-hero .sa-carreira-det-inner { position: relative; z-index: 1; }
/* A altura minima so' entra quando ha' foto: sem ela o hero encolhe ao
   conteudo, como sempre fez. */
.sa-carreira-det-hero.has-foto { min-height: 416px; display: flex; align-items: center; }
.sa-carreira-det-hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.28;
}
/* Cobre a esquerda por inteiro e vai abrindo: o texto vive a` esquerda e nao
   pode perder contraste, a foto respira a` direita. */
.sa-carreira-det-hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to right, #001524 0%, #001524 35%, rgba(0, 21, 36, 0.75) 60%, rgba(0, 21, 36, 0.40) 100%);
}
.sa-carreira-det-hero-vinheta {
    position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.6), transparent);
}

/* A barra lateral passa a ter dois filhos (foto + cartao), por isso precisa de
   um intervalo proprio -- antes era so' o cartao e nao precisava de nada. */
.sa-carreira-det-side { display: flex; flex-direction: column; gap: 24px; }

.sa-carreira-det-foto {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef2f6;
}
/* Recurso para quem nao tem aspect-ratio (Safari < 15): a proporcao 4:3 pelo
   truque do padding. O `supports` evita que as duas regras se somem. */
@supports not (aspect-ratio: 4 / 3) {
    .sa-carreira-det-foto { height: 0; padding-bottom: 75%; }
}
.sa-carreira-det-foto img,
.sa-carreira-det-foto picture {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sa-carreira-det-foto-faixa {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 16px;
    font-weight: 300; font-size: 9px; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.9);
}

/* "What We Offer" — por baixo do cartao de detalhes, na barra lateral.
   Fundo levemente azulado para se distinguir do cartao branco de cima sem
   pedir mais uma cor. Sem regalias escritas, o template nao desenha isto. */
.sa-carreira-det-oferta {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 24px;
}
.sa-carreira-det-oferta-label {
    margin: 0 0 16px;
    font-weight: 500; font-size: 11px; letter-spacing: 1.4px;
    text-transform: uppercase; color: #00476c;
}
.sa-carreira-det-oferta-lista {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.sa-carreira-det-oferta-lista li {
    display: flex; align-items: flex-start; gap: 10px;
    font-weight: 300; font-size: 13px; line-height: 1.5; color: #4b5563;
}
/* O visto e' verde de proposito — e' a unica coisa desta pagina que nao usa a
   cor do departamento, porque significa "incluido" e nao "categoria". */
.sa-carreira-det-oferta-lista svg {
    width: 14px; height: 14px; flex-shrink: 0;
    margin-top: 2px;
    color: #8FD400;
}
.sa-carreira-det-hero-grid { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .sa-carreira-det-hero-grid { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.sa-carreira-det-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sa-carreira-det-badge {
    height: 26px; padding: 0 12px; display: inline-flex; align-items: center;
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
}
.sa-carreira-det-badge--dep { color: #fff; font-weight: 500; }
.sa-carreira-det-badge--ghost { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); font-weight: 300; }
.sa-carreira-det-title {
    font-weight: 500; font-size: 36px; line-height: 1.15; color: #fff;
    text-transform: uppercase; margin: 0 0 16px;
}
@media (min-width: 768px) { .sa-carreira-det-title { font-size: 48px; } }
.sa-carreira-det-hero-meta {
    display: flex; flex-wrap: wrap; gap: 24px; color: rgba(255,255,255,0.5);
    font-weight: 300; font-size: 13px;
}
.sa-carreira-det-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.sa-carreira-det-hero-meta svg { width: 14px; height: 14px; }
.sa-carreira-det-hero-actions { display: flex; gap: 12px; flex-shrink: 0; }
.sa-carreira-det-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 28px;
    font-weight: 400; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
    text-decoration: none; cursor: pointer; transition: background-color 200ms ease, filter 200ms ease;
}
.sa-carreira-det-btn svg { width: 16px; height: 16px; }
.sa-carreira-det-btn--apply { background: var(--color-orange); color: #fff; }
.sa-carreira-det-btn--apply:hover { filter: brightness(1.1); }
.sa-carreira-det-btn--back { border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.sa-carreira-det-btn--back:hover { background: rgba(255,255,255,0.1); }
.sa-carreira-det-btn--darkblue { background: var(--color-primary); color: #fff; border: none; }
.sa-carreira-det-btn--darkblue:hover { filter: brightness(1.15); }

/* Content grid */
.sa-carreira-det-content { padding-top: 64px; padding-bottom: 64px; }
.sa-carreira-det-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .sa-carreira-det-grid { grid-template-columns: 2fr 1fr; gap: 64px; } }
.sa-carreira-det-block { margin-bottom: 40px; }
.sa-carreira-det-block:last-child { margin-bottom: 0; }
.sa-carreira-det-label {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin: 0 0 16px;
}
.sa-carreira-det-label--orange { color: var(--color-orange); }
.sa-carreira-det-lead { color: #4b5563; font-weight: 300; font-size: 15px; line-height: 1.75; margin: 0; }

/* RTE body (the page texto: Responsibilities / Requirements / anything) */
.sa-carreira-det-rte { color: #374151; font-weight: 300; font-size: 14px; line-height: 1.75; }
.sa-carreira-det-rte h1, .sa-carreira-det-rte h2, .sa-carreira-det-rte h3 {
    color: var(--color-primary); font-weight: 500; font-size: 11px; letter-spacing: 2px;
    text-transform: uppercase; margin: 36px 0 20px;
}
.sa-carreira-det-rte h1:first-child, .sa-carreira-det-rte h2:first-child, .sa-carreira-det-rte h3:first-child { margin-top: 0; }
.sa-carreira-det-rte ul { list-style: none; margin: 0 0 24px; padding: 0; }
.sa-carreira-det-rte li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.sa-carreira-det-rte li::before {
    content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
    border-radius: 50%; background: rgba(0,71,108,0.1);
}
.sa-carreira-det-rte li::after {
    content: ""; position: absolute; left: 7px; top: 8px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--color-primary);
}
.sa-carreira-det-rte p { margin: 0 0 16px; }

/* Sidebar */
.sa-carreira-det-card { border: 1px solid #e5e7eb; padding: 24px; }
.sa-carreira-det-card-label {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--color-text-muted); font-weight: 500; margin: 0 0 20px;
}
.sa-carreira-det-card-list { display: flex; flex-direction: column; gap: 16px; }
.sa-carreira-det-card-k {
    font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--color-text-muted); font-weight: 500; margin: 0 0 2px;
}
.sa-carreira-det-card-v { font-weight: 300; font-size: 14px; color: #001524; margin: 0; }
.sa-carreira-det-card-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; margin-top: 24px; background: var(--color-primary); color: #fff;
    font-weight: 400; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none; transition: filter 200ms ease;
}
.sa-carreira-det-card-btn:hover { filter: brightness(1.15); }
.sa-carreira-det-card-btn svg { width: 14px; height: 14px; }

/* Anuncio no LinkedIn -- so' existe quando o campo estiver preenchido no
   backoffice. Secundario em relacao ao "Apply": contorno em vez de cheio, e no
   azul do LinkedIn e nao no laranja do site, para se ler como o que e' -- um
   atalho para fora, nao a maneira principal de se candidatar. */
.sa-carreira-det-card-linkedin {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; margin-top: 10px;
    background: #ffffff; color: #0a66c2; border: 1px solid #0a66c2;
    font-weight: 400; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
    text-decoration: none; transition: background 200ms ease, color 200ms ease;
}
.sa-carreira-det-card-linkedin:hover { background: #0a66c2; color: #ffffff; }
.sa-carreira-det-card-linkedin svg { width: 15px; height: 15px; }

/* Apply form */
.sa-carreira-det-apply { background: #f8fafc; padding: 64px 0; }
.sa-carreira-det-apply-inner { max-width: 860px; margin: 0 auto; }
.sa-carreira-det-apply-title {
    font-weight: 500; font-size: 30px; color: #001524; text-transform: uppercase; margin: 0 0 6px;
}
.sa-carreira-det-apply-sub { color: var(--color-text-muted); font-weight: 300; font-size: 14px; margin: 0 0 36px; }
.sa-carreira-det-alert { padding: 14px 18px; margin-bottom: 24px; font-size: 14px; border: 1px solid transparent; }
.sa-carreira-det-alert--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sa-carreira-det-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sa-carreira-det-form { background: #fff; border: 1px solid #e5e7eb; padding: 40px; }
.sa-carreira-det-form-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
@media (min-width: 640px) { .sa-carreira-det-form-row { grid-template-columns: 1fr 1fr; } }
.sa-carreira-det-form-field { margin-bottom: 20px; }
.sa-carreira-det-form-row .sa-carreira-det-form-field { margin-bottom: 0; }
.sa-carreira-det-form-field label {
    display: block; margin-bottom: 8px; color: var(--color-text-muted);
    font-weight: 500; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
}
.sa-carreira-det-form-field input, .sa-carreira-det-form-field textarea {
    width: 100%; padding: 0 16px; height: 50px; background: #f0f4f8; border: 1px solid transparent;
    font-family: var(--font-family); font-size: 14px; color: #001524; outline: none; transition: border-color 200ms ease, background 200ms ease;
}
.sa-carreira-det-form-field textarea { height: auto; padding: 14px 16px; resize: vertical; }
.sa-carreira-det-form-field input:focus, .sa-carreira-det-form-field textarea:focus { border-color: var(--color-primary); background: #fff; }
.sa-carreira-det-file {
    display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px;
    background: #f0f4f8; border: 1px solid transparent; cursor: pointer;
    color: var(--color-text-muted); font-size: 13px; transition: border-color 200ms ease;
}
.sa-carreira-det-file:hover { border-color: rgba(0,71,108,0.3); }
.sa-carreira-det-file svg { width: 18px; height: 18px; flex-shrink: 0; }
/* O input ja vem com o atributo hidden no template, mas o bootstrap-3 (carregado
   antes deste ficheiro) traz input[type=file]{display:block}, que tem
   especificidade 0,1,1 contra os 0,1,0 do [hidden]{display:none} -- ganha, e o
   controlo nativo aparecia dentro da caixa ("Escolher ficheiro / Nenhum ficheiro
   selecionado", e ainda por cima na lingua do browser de quem visita, nao na do
   site). Este seletor e 0,2,1, portanto volta a esconde-lo. */
.sa-carreira-det-file input[type="file"] { display: none; }
/* Com o input escondido nao havia forma de saber se o CV ficou anexado: o JS do
   template escreve aqui o nome do ficheiro escolhido. */
.sa-carreira-det-file.has-file { border-color: var(--color-primary); color: #001524; }
.sa-carreira-det-file-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-carreira-det-submit {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px;
    margin-top: 8px; background: var(--color-orange); color: #fff; border: none;
    font-family: var(--font-family); font-weight: 400; font-size: 13px; letter-spacing: 1.6px;
    text-transform: uppercase; cursor: pointer; transition: filter 200ms ease;
}
.sa-carreira-det-submit:hover { filter: brightness(1.1); }
.sa-carreira-det-submit svg { width: 16px; height: 16px; }
.sa-carreira-det-disclaimer { text-align: center; color: var(--color-text-muted); font-weight: 300; font-size: 11px; margin: 16px 0 0; }

/* Success + gate */
.sa-carreira-det-sent { background: #fff; border: 1px solid #e5e7eb; padding: 64px 24px; text-align: center; }
.sa-carreira-det-sent-icon {
    width: 64px; height: 64px; margin: 0 auto 24px; background: var(--color-primary);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sa-carreira-det-sent-icon svg { width: 26px; height: 26px; color: #fff; }
.sa-carreira-det-sent h3 { font-weight: 500; font-size: 22px; color: #001524; text-transform: uppercase; margin: 0 0 12px; }
.sa-carreira-det-sent p { font-weight: 300; color: var(--color-text-light); font-size: 15px; margin: 0 auto 24px; max-width: 24rem; }
.sa-carreira-det-gate {
    background: #fff; border: 1px solid #e5e7eb; padding: 40px; display: flex;
    flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
@media (min-width: 768px) { .sa-carreira-det-gate { flex-direction: row; text-align: left; } }
.sa-carreira-det-gate-icon {
    width: 56px; height: 56px; flex-shrink: 0; background: rgba(0,71,108,0.1);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sa-carreira-det-gate-icon svg { width: 24px; height: 24px; color: var(--color-primary); }
.sa-carreira-det-gate-text { flex: 1; }
.sa-carreira-det-gate-text h3 { font-weight: 500; font-size: 18px; color: #001524; text-transform: uppercase; margin: 0 0 8px; }
.sa-carreira-det-gate-text p { font-weight: 300; font-size: 14px; color: var(--color-text-muted); margin: 0; }

/* Candidaturas com login (24 Set 2026): os dois botoes do aviso ("Entrar" e
   "Criar conta"), o segundo botao do sucesso ("Ver as minhas candidaturas") e
   os campos em falta a vermelho. */
.sa-carreira-det-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; flex-shrink: 0; }
.sa-carreira-det-btn--outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.sa-carreira-det-btn--outline:hover { background: rgba(0,71,108,0.06); }
.sa-carreira-det-sent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sa-carreira-det-alert-list { display: block; margin-top: 4px; }
.sa-carreira-det-form-field input.is-erro,
.sa-carreira-det-form-field textarea.is-erro,
.sa-carreira-det-file.is-erro { border-color: #dc2626; background: #fef2f2; }
/* A espontanea vive numa seccao escura: o aviso fica sempre em coluna (a
   coluna do formulario e' estreita para icone + texto + dois botoes lado a
   lado) e com as cores do fundo escuro. */
.sa-carreira-det-gate.sa-carreira-det-gate--escuro { flex-direction: column; text-align: center; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.sa-carreira-det-gate--escuro .sa-carreira-det-gate-icon { background: rgba(255,255,255,0.1); }
.sa-carreira-det-gate--escuro .sa-carreira-det-gate-icon svg { color: #fff; }
.sa-carreira-det-gate--escuro .sa-carreira-det-gate-text h3 { color: #fff; }
.sa-carreira-det-gate--escuro .sa-carreira-det-gate-text p { color: rgba(255,255,255,0.6); }
.sa-carreira-det-gate--escuro .sa-carreira-det-btn--outline { color: #fff; border-color: rgba(255,255,255,0.4); }
.sa-carreira-det-gate--escuro .sa-carreira-det-btn--outline:hover { background: rgba(255,255,255,0.08); }
.sa-carreira-spontaneous-field .is-erro,
.sa-carreira-file.is-erro { border-color: #f87171; background: rgba(248,113,113,0.12); }

@media (max-width: 767px) {
    .sa-carreira-det-hero { padding: 40px 0 32px; }
    .sa-carreira-det-title { font-size: 26px; }
    .sa-carreira-det-form { padding: 24px; }
}

/* Careers listing card — info + buttons are now links (designer: Apply + Details) */
a.sa-carreira-job-info { display: block; text-decoration: none; color: inherit; }
a.sa-carreira-job-info .sa-carreira-job-title { transition: color 200ms ease; }
a.sa-carreira-job-info:hover .sa-carreira-job-title { color: var(--color-primary); }
a.sa-carreira-job-apply { text-decoration: none; }
.sa-carreira-job-details {
    height: 42px; padding: 0 20px; border: 1px solid #e5e7eb; background: #fff;
    color: var(--color-text-muted); font-family: var(--font-family); font-weight: 300;
    font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; transition: border-color 200ms ease, color 200ms ease;
}
.sa-carreira-job-details:hover { border-color: var(--color-primary); color: var(--color-primary); }
.sa-carreira-job-details svg { width: 14px; height: 14px; }

/* Simulator — accent colour follows the Industrial/Medical toggle (JS sets
   --sim-accent inline on .sa-sim). These override the earlier fixed colours. */
.sa-sim { --sim-accent: var(--color-primary); }
.sa-sim-range-fill,
.sa-sim-range-thumb { background: var(--sim-accent); }
.sa-sim-result-name,
.sa-sim-result-label,
.sa-sim-slider-value { color: var(--sim-accent); }
.sa-sim-btn { background: var(--sim-accent); }
.sa-sim-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.sa-sim-tab {
    height: 28px; padding: 0 20px; background: #e5e7eb; color: #6b7280; border: none;
    font-family: var(--font-family); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; font-weight: 500; cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}
.sa-sim-tab--active { background: var(--sim-accent); color: #ffffff; }

/* ── Member area: login / register / recover (split-panel, prototype) ────── */
.sa-login-body { margin: 0; font-family: var(--font-family); background: #f8fafc; }
.sa-login-split { display: flex; min-height: 100vh; }

/*
 * Header de telemovel/tablet (1 Set 2026). Abaixo dos 1024 o painel escuro da
 * esquerda desaparece e com ele o logotipo — a pagina ficava sem marca e sem
 * caminho de volta ao site. Mesma altura e mesmo fundo da barra do portal.
 *
 * O `min-height` do split desconta a altura do header, senao a pagina ficava
 * com 100vh + 64px e uma barra de scroll a nascer sozinha.
 */
.sa-login-topbar { display: flex; align-items: center; height: 64px; padding: 0 20px; background: #001524; }
.sa-login-topbar-logo { display: block; -webkit-tap-highlight-color: transparent; }
.sa-login-topbar-logo img { height: 30px; width: auto; display: block; }

@media (max-width: 1023px) {
    .sa-login-split { min-height: calc(100vh - 64px); }
}

@media (min-width: 1024px) {
    .sa-login-topbar { display: none; }
}

/* Left brand panel */
.sa-login-brand {
    display: none; position: relative; width: 42%; flex-shrink: 0;
    background: #001524; overflow: hidden;
    flex-direction: column; justify-content: space-between;
}
@media (min-width: 1024px) { .sa-login-brand { display: flex; } }
.sa-login-brand::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, #001524 0%, rgba(0,21,36,0.9) 45%, rgba(0,71,108,0.4) 100%);
}
.sa-login-brand-logo { position: relative; z-index: 1; padding: 48px; -webkit-tap-highlight-color: transparent; }
.sa-login-brand-logo img { height: 48px; width: auto; display: block; }

/*
 * A mesma "caixa branca" do logotipo do cabecalho: vem do Bootstrap 3, que poe
 * `a:focus { outline: 5px auto -webkit-focus-ring-color }` em QUALQUER a:focus
 * — nao em :focus-visible. Como um clique de rato tambem da' foco ao link, o
 * anel do sistema ficava a` vista enquanto o botao estivesse premido.
 * Tira-se o anel do rato e devolve-se um proprio ao TECLADO.
 */
.sa-login-brand-logo:focus,
.sa-login-topbar-logo:focus { outline: 0; }
.sa-login-brand-logo:focus-visible,
.sa-login-topbar-logo:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 4px; }
.sa-login-brand-copy { position: relative; z-index: 1; padding: 48px; padding-bottom: 64px; }
.sa-login-brand-over {
    font-weight: 300; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--color-orange); margin: 0 0 20px;
}
.sa-login-brand-title {
    font-weight: 300; font-size: 44px; line-height: 1.1; color: #fff;
    text-transform: uppercase; margin: 0 0 24px;
}
.sa-login-brand-title strong { font-weight: 500; }
.sa-login-brand-desc {
    font-weight: 300; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.5);
    max-width: 340px; margin: 0;
}

/* Right form panel */
.sa-login-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.sa-login-panel-inner { width: 100%; max-width: 460px; }
.sa-login-form-wrap { width: 100%; }

/* Tabs */
.sa-login-tabs { display: inline-flex; border: 1px solid #e5e7eb; background: #fff; margin-bottom: 32px; }
.sa-login-tab {
    height: 44px; padding: 0 32px; display: inline-flex; align-items: center;
    font-weight: 300; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
    color: #4b5563; text-decoration: none; transition: background 200ms ease, color 200ms ease;
}
.sa-login-tab + .sa-login-tab { border-left: 1px solid #e5e7eb; }
.sa-login-tab--active { background: var(--color-primary); color: #fff; }
/* A cor repetida no :hover nao e' redundancia: sem ela entra a regra global
   `a:hover, a:focus { color: #f0f0f0 }` do topo deste ficheiro, e a aba
   ficava texto quase branco sobre fundo branco. */
.sa-login-tab:hover,
.sa-login-tab:focus { background: #f8fafc; color: var(--color-primary); }
.sa-login-tab--active:hover,
.sa-login-tab--active:focus { background: var(--color-primary); color: #fff; }

.sa-login-h1 { font-weight: 500; font-size: 26px; color: #001524; text-transform: uppercase; margin: 0 0 6px; }
.sa-login-lead { font-weight: 300; font-size: 14px; color: var(--color-text-muted); margin: 0 0 32px; line-height: 1.6; }

.sa-login-alert { padding: 12px 16px; margin-bottom: 20px; font-size: 13px; border: 1px solid transparent; }
.sa-login-alert--err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.sa-login-alert--ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

.sa-login-form { display: block; }
.sa-login-field { margin-bottom: 18px; }
.sa-login-field label {
    display: block; margin-bottom: 8px; font-weight: 300; font-size: 11px;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-muted);
}
.sa-login-field input,
.sa-login-field select {
    width: 100%; height: 48px; padding: 0 16px; background: #fff; border: 1px solid #e5e7eb;
    font-family: var(--font-family); font-size: 14px; color: #001524; outline: none;
    transition: border-color 200ms ease;
}
.sa-login-field input:focus { border-color: var(--color-primary); }
.sa-login-field-err { color: #991b1b; font-size: 12px; margin-bottom: 6px; }

/* the register captcha element renders an <img> + text input */
.sa-login-field--verificacao img { display: inline-block; vertical-align: middle; margin-bottom: 8px; }
#refresh_captcha { width: 22px; height: 22px; margin-left: 8px; vertical-align: middle; }

.sa-login-forgot { text-align: right; margin-bottom: 20px; }
.sa-login-forgot a { font-weight: 300; font-size: 12px; color: var(--color-primary); text-decoration: none; }
.sa-login-forgot a:hover { text-decoration: underline; }

.sa-login-submit {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; height: 52px; margin-top: 8px; background: var(--color-primary); color: #fff;
    border: none; font-family: var(--font-family); font-weight: 300; font-size: 13px;
    letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
    text-decoration: none; transition: background 200ms ease;
}
.sa-login-submit:hover { background: #003350; }
.sa-login-submit svg { width: 14px; height: 14px; }
.sa-login-submit--link { display: inline-flex; width: auto; padding: 0 32px; }

.sa-login-switch { font-weight: 300; font-size: 13px; color: var(--color-text-muted); text-align: center; margin: 24px 0 0; }
.sa-login-switch a { color: var(--color-primary); text-decoration: none; }
.sa-login-switch a:hover { text-decoration: underline; }
.sa-login-back { text-align: center; margin: 32px 0 0; }
.sa-login-back a { font-weight: 300; font-size: 11px; color: #d1d5db; text-decoration: none; }
.sa-login-back a:hover { color: var(--color-text-muted); }

/* Register success */
.sa-login-success { text-align: center; }
.sa-login-success-icon {
    width: 64px; height: 64px; margin: 0 auto 24px; background: var(--color-primary);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sa-login-success-icon svg { width: 26px; height: 26px; color: #fff; }
.sa-login-success .sa-login-lead { margin-bottom: 28px; }

/* Register: account-type toggle (Cliente / Estudante) */
.sa-login-toggle { display: flex; border: 1px solid #e5e7eb; }
.sa-login-toggle-btn {
    flex: 1; height: 44px; background: #fff; color: #6b7280; border: none;
    font-family: var(--font-family); font-size: 12px; letter-spacing: 1.2px;
    text-transform: uppercase; font-weight: 300; cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}
.sa-login-toggle-btn + .sa-login-toggle-btn { border-left: 1px solid #e5e7eb; }
.sa-login-toggle-btn--active { background: var(--color-primary); color: #fff; }

/* Tame the stock CMS / LiveValidation error styling to match the login look */
.sa-login-form-wrap .LV_validation_message {
    display: block; margin-top: 6px; padding: 0; position: static !important;
    background: none; border: none; color: #991b1b; font-size: 12px;
    font-weight: 300; line-height: 1.4;
}
.sa-login-form-wrap .LV_validation_message .invalid_txt { display: inline; }
/* The message embeds the field label inside <b><label>…</label></b>; keep it
   inline so the message stays on one line (overrides .sa-login-field label). */
.sa-login-form-wrap .LV_validation_message b,
.sa-login-form-wrap .LV_validation_message label {
    display: inline; margin: 0; padding: 0; color: inherit;
    font-size: inherit; letter-spacing: normal; text-transform: none;
}
.sa-login-form-wrap .LV_validation_message b { font-weight: 600; }
.sa-login-form-wrap .LV_valid { display: none !important; }
.sa-login-form-wrap .invalid_img,
.sa-login-form-wrap .valid_img { display: none !important; }
.sa-login-form-wrap input.LV_invalid_field,
.sa-login-form-wrap .LV_invalid_field { border-color: #fecaca !important; }

/* ── Member Portal — dashboard (Client / Employee / Student) ─────────────── */
.sa-portal-body { margin: 0; font-family: var(--font-family); background: #f8fafc; }
.sa-portal-inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding-mobile); }
@media (min-width: 1024px) { .sa-portal-inner { padding: 0 var(--container-padding); } }

/* Top bar */
.sa-portal-topbar { background: #001524; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 30; }
.sa-portal-topbar-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.sa-portal-logo img { height: 36px; width: auto; display: block; }
.sa-portal-user { display: flex; align-items: center; gap: 24px; }
.sa-portal-avatar { width: 32px; height: 32px; flex-shrink: 0; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: #fff; }
.sa-portal-avatar svg { width: 16px; height: 16px; }
.sa-portal-user-info { display: none; }
@media (min-width: 768px) { .sa-portal-user-info { display: block; } }
.sa-portal-user-name { margin: 0; font-weight: 500; font-size: 13px; color: #fff; }
.sa-portal-user-role { margin: 0; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.sa-portal-logout { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 20px; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.sa-portal-logout:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.sa-portal-logout svg { width: 12px; height: 12px; }
/* Seletor de lingua do portal (22 Set 2026): o do site (.sa-header-lang) em
   ponto pequeno -- mesma altura e borda do "Terminar sessao" ao lado. */
.sa-portal-lang { position: relative; }
.sa-portal-lang-selected { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 60px; padding: 0 12px; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); font: inherit; font-size: 11px; letter-spacing: 1.2px; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.sa-portal-lang-selected:hover, .sa-portal-lang-selected:focus-visible, .sa-portal-lang-selected[aria-expanded="true"] { border-color: rgba(255,255,255,0.4); color: #fff; outline: none; }
.sa-portal-lang-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #001524; border: 1px solid rgba(255,255,255,0.15); border-top: none; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 5; }
.sa-portal-lang-dropdown.open { opacity: 1; pointer-events: auto; }
a.sa-portal-lang-option, a.sa-portal-lang-option:focus { display: block; padding: 9px 0; text-align: center; font-size: 11px; letter-spacing: 1.2px; color: rgba(255,255,255,0.6); text-decoration: none; }
a.sa-portal-lang-option:hover, a.sa-portal-lang-option:focus-visible { color: #fff; background: rgba(255,255,255,0.05); }
/* Telemovel: o "Terminar sessao" ja' partia em duas linhas; com o seletor ao
   lado nao cabia. Fica so' o icone (o nome vai no aria-label/title). */
@media (max-width: 767px) {
    .sa-portal-user { gap: 10px; }
    .sa-portal-logout { width: 36px; padding: 0; justify-content: center; }
    .sa-portal-logout span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Hero */
.sa-portal-hero { background: var(--color-primary); padding: 48px 0; }
.sa-portal-hero-eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.sa-portal-hero-title { margin: 0 0 14px; font-size: 32px; line-height: 1.05; color: #fff; text-transform: uppercase; }
@media (min-width: 768px) { .sa-portal-hero-title { font-size: 44px; } }
.sa-portal-hero-light { font-weight: 300; }
.sa-portal-hero-name { font-weight: 500; }
.sa-portal-hero-desc { margin: 0; font-weight: 300; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.5); max-width: 400px; }

/* Main + resources header */
.sa-portal-main { padding: 40px 0 0; }
/* ==============================
   Portal — ultimos videos + ultimas noticias   (1 Set 2026)

   Os dois blocos que o cliente pediu por baixo do parque. Lado a lado a
   partir dos 1024, empilhados abaixo disso. Sao para todos os perfis, e para
   quem nao e' colaborador sao o primeiro conteudo do painel.

   Usam a mesma linguagem do resto do portal (caixa branca, risco de 1px,
   etiqueta em maiusculas pequenas) para nao parecerem coisa colada.
   ============================== */
.sa-portal-feeds {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}
@media (min-width: 1024px) {
    .sa-portal-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sozinho, um bloco nao deve esticar-se por toda a largura: fica mais largo
   do que precisa e as linhas ficam gigantes. */
@media (min-width: 1024px) {
    .sa-portal-feed:only-child { max-width: 640px; }
}

.sa-portal-feed {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}
.sa-portal-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.sa-portal-feed-label {
    margin: 0;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #001524;
}
.sa-portal-feed-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #9ca3af;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease;
}
.sa-portal-feed-all:hover { color: var(--color-orange); }
.sa-portal-feed-all svg { width: 13px; height: 13px; flex-shrink: 0; }

.sa-portal-feed-list { display: flex; flex-direction: column; }

/* Uma linha de video / de noticia — o mesmo esqueleto para os dois. */
.sa-portal-vid,
.sa-portal-new {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid #f9fafb;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.sa-portal-feed-list > :first-child { border-top: none; }
.sa-portal-vid:hover,
.sa-portal-new:hover { background: #f8fafc; }

.sa-portal-vid-thumb,
.sa-portal-new-thumb {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 62px;
    overflow: hidden;
    background: #eef2f6;
}
.sa-portal-vid-thumb img,
.sa-portal-new-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* O triangulo do YouTube, para o bloco se ler de relance como sendo video. */
.sa-portal-vid-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 21, 36, 0.35);
    color: #ffffff;
    transition: background-color 150ms ease;
}
.sa-portal-vid-play svg { width: 26px; height: 26px; }
.sa-portal-vid:hover .sa-portal-vid-play { background: rgba(237, 110, 0, 0.75); }

.sa-portal-vid-text,
.sa-portal-new-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sa-portal-vid-title,
.sa-portal-new-title {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: #001524;
    /* Duas linhas e corta — os titulos do YouTube sao compridos e sem isto
       uma linha empurra o cartao todo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sa-portal-vid-date,
.sa-portal-new-date {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #9ca3af;
}
.sa-portal-vid:hover .sa-portal-vid-title,
.sa-portal-new:hover .sa-portal-new-title { color: var(--color-orange); }

@media (max-width: 479px) {
    .sa-portal-vid-thumb,
    .sa-portal-new-thumb { width: 84px; height: 50px; }
    .sa-portal-vid,
    .sa-portal-new { padding: 12px 14px; gap: 12px; }
    .sa-portal-feed-head { padding: 15px 14px; }
}

/* ==============================
   Portal — as minhas candidaturas   (24 Set 2026)

   Mesma caixa dos videos/noticias (.sa-portal-feed). Cada linha: icone
   (pasta = vaga, aviao = espontanea), vaga + area, e a data a` direita. So' e'
   link enquanto a vaga estiver aberta; senao e' um <div> sem hover.
   ============================== */
.sa-portal-apps { margin-bottom: 32px; }
.sa-portal-apps-count {
    display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px;
    background: var(--color-orange); color: #fff; font-size: 10px; letter-spacing: 0;
    text-align: center; border-radius: 10px; vertical-align: 1px;
}
.sa-portal-app {
    display: flex; align-items: center; gap: 14px; padding: 14px 20px;
    border-top: 1px solid #f9fafb; text-decoration: none;
    transition: background-color 150ms ease;
}
.sa-portal-app.is-link:hover { background: #f8fafc; }
.sa-portal-app-icon {
    flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,71,108,0.08); color: var(--color-primary);
}
.sa-portal-app-icon svg { width: 18px; height: 18px; }
.sa-portal-app-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-portal-app-title { font-weight: 400; font-size: 14px; line-height: 1.4; color: #001524; }
.sa-portal-app.is-link:hover .sa-portal-app-title { color: var(--color-orange); }
.sa-portal-app-sub { font-weight: 300; font-size: 12px; color: #6b7280; }
.sa-portal-app-date { flex-shrink: 0; font-weight: 300; font-size: 11px; letter-spacing: 0.4px; color: #9ca3af; white-space: nowrap; }
@media (max-width: 479px) {
    .sa-portal-app { flex-wrap: wrap; padding: 12px 14px; gap: 6px 12px; }
    .sa-portal-app-date { width: 100%; padding-left: 52px; }
}

.sa-portal-resources-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sa-portal-resources-title { margin: 0; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: #001524; font-weight: 500; }
.sa-portal-resources-count { font-size: 12px; color: #9ca3af; text-transform: uppercase; letter-spacing: .5px; }

/* Card grid */
.sa-portal-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .sa-portal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sa-portal-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
.sa-portal-card { background: #fff; border: 1px solid #e5e7eb; display: flex; flex-direction: column; transition: border-color .2s ease, box-shadow .2s ease; }
.sa-portal-card:hover { border-color: color-mix(in srgb, var(--sa-portal-accent) 40%, #e5e7eb); box-shadow: 0 1px 8px rgba(0,21,36,0.06); }
.sa-portal-card-rule { height: 3px; background: var(--sa-portal-accent); }
.sa-portal-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid #f3f4f6; }
.sa-portal-card-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sa-portal-accent); }
.sa-portal-card-icon svg { width: 18px; height: 18px; }
.sa-portal-card-head-text { flex: 1; min-width: 0; }
.sa-portal-card-title { margin: 0 0 2px; font-weight: 500; font-size: 14px; color: #001524; text-transform: uppercase; }
.sa-portal-card-date { margin: 0; font-weight: 300; font-size: 11px; color: #9ca3af; }
.sa-portal-card-tag { flex-shrink: 0; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; background: #f8fafc; border: 1px solid #e5e7eb; color: #9ca3af; white-space: nowrap; }
.sa-portal-card-desc { margin: 0; padding: 16px 24px 12px; font-weight: 300; font-size: 13px; line-height: 1.6; color: #6b7280; }
.sa-portal-card-list { list-style: none; margin: 0; padding: 0 24px; }
.sa-portal-card-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.sa-portal-card-item:last-child { border-bottom: 0; }
.sa-portal-card-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sa-portal-card-item-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sa-portal-accent); flex-shrink: 0; }
.sa-portal-card-item-label { font-weight: 300; font-size: 13px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-portal-card-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sa-portal-card-item-date { font-size: 11px; color: #9ca3af; }
.sa-portal-card-item-right svg { width: 11px; height: 11px; color: #9ca3af; }
.sa-portal-card-foot { padding: 16px 24px; margin-top: auto; border-top: 1px solid #f3f4f6; }
.sa-portal-card-download { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px; color: #fff; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; transition: filter .2s ease; }
.sa-portal-card-download:hover { filter: brightness(1.1); }
.sa-portal-card-download svg { width: 12px; height: 12px; }
.sa-portal-card-viewall { display: inline-flex; align-items: center; gap: 6px; color: var(--sa-portal-accent); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.sa-portal-card-viewall svg { width: 13px; height: 13px; transition: transform .2s ease; }
.sa-portal-card-viewall:hover { color: var(--sa-portal-accent); }
.sa-portal-card-viewall:hover svg { transform: translateX(3px); }

/* Birthday highlights (employee) — 3-up strip, sits above the parking widget.
   Slot colours are POSITIONAL, matching the prototype: today = orange,
   index 1 = blue, everything else neutral. */
.sa-portal-bdh { margin-bottom: 16px; }
.sa-portal-bdh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sa-portal-bdh-label { margin: 0; font-weight: 500; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #001524; }
.sa-portal-bdh-all { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-orange); text-decoration: none; transition: gap .2s ease; }
/* O `color` tem de ser repetido aqui: sem ele, a regra global
   `a:hover { color: #f0f0f0 }` (topo do ficheiro) ganha e o link passava a
   quase-branco sobre fundo claro, ficando ilegivel. */
.sa-portal-bdh-all:hover,
.sa-portal-bdh-all:focus { gap: 8px; color: var(--color-orange); }
.sa-portal-bdh-all svg { width: 11px; height: 11px; }
.sa-portal-bdh-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .sa-portal-bdh-grid { grid-template-columns: repeat(3, 1fr); } }
.sa-portal-bdh-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; }
.sa-portal-bdh-rule { height: 3px; background: #e5e7eb; }
.sa-portal-bdh-card--today { background: #FFF7F0; border: 1.5px solid var(--color-orange); }
.sa-portal-bdh-card--today .sa-portal-bdh-rule { background: var(--color-orange); }
.sa-portal-bdh-card--next { background: #f0f7ff; border-color: rgba(0,71,108,0.25); }
.sa-portal-bdh-card--next .sa-portal-bdh-rule { background: var(--color-primary); }
/* Desenho de 1 Set 2026 (prototipo): foto a` esquerda e maior, texto a`
   direita alinhado a` esquerda. Antes era tudo empilhado ao centro com o
   avatar a 64px. */
.sa-portal-bdh-body { padding: 16px; display: flex; flex-direction: row; align-items: center; text-align: left; gap: 16px; }
.sa-portal-bdh-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #e5e7eb; display: block; flex-shrink: 0; background: #f0f4f8; }
.sa-portal-bdh-card--today .sa-portal-bdh-avatar { border-color: var(--color-orange); }
.sa-portal-bdh-card--next .sa-portal-bdh-avatar { border-color: var(--color-primary); }
.sa-portal-bdh-who { flex: 1; min-width: 0; }
.sa-portal-bdh-name { margin: 0; font-weight: 500; font-size: 15px; line-height: 1.35; color: #001524; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-portal-bdh-dept { margin: 2px 0 0; font-weight: 300; font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Area geografica, por baixo do departamento (pedido do cliente, 1 Set 2026).
   Mesmo corpo e mesma cor do departamento: a hierarquia ja' vem da ordem, e
   dois cinzentos diferentes a 11px leem-se como engano e nao como decisao. */
.sa-portal-bdh-area { margin: 1px 0 0; font-weight: 300; font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-portal-bdh-today { margin-top: 8px; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--color-orange); color: #fff; font-weight: 500; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.sa-portal-bdh-when { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sa-portal-bdh-date { font-weight: 300; font-size: 11px; color: #9ca3af; }
.sa-portal-bdh-days { font-weight: 300; font-size: 11px; color: #9ca3af; }
.sa-portal-bdh-card--next .sa-portal-bdh-days { color: var(--color-primary); }

/* Parking widget (employee) */
/* 1 Set 2026: o padding e o alinhamento passaram para o .sa-portal-parking-info
   para a fotografia da zona poder sangrar ate' aos bordos do cartao. */
.sa-portal-parking { background: #fff; border: 1px solid #e5e7eb; display: flex; align-items: stretch; gap: 0; padding: 0; margin-bottom: 32px; overflow: hidden; }
.sa-portal-parking-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; padding: 20px 24px; }

/*
 * Fotografia da zona em vigor (Utilizadores > Parques no backoffice).
 * So' a partir dos 1024: abaixo disso o cartao ja' esta' cheio com o texto e a
 * foto ficaria uma tira sem leitura.
 * O veu e' um degrade de branco a` esquerda para transparente a` direita — a
 * foto entra na caixa branca sem costura, como no prototipo.
 */
.sa-portal-parking-photo { display: none; }

@media (min-width: 1024px) {
    .sa-portal-parking-photo { position: relative; display: block; flex-shrink: 0; width: 320px; min-height: 120px; align-self: stretch; }
}

@media (min-width: 1280px) {
    .sa-portal-parking-photo { width: 420px; }
}

.sa-portal-parking-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-portal-parking-veil { position: absolute; inset: 0; background: linear-gradient(to right, #ffffff 0%, #ffffff 8%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 60%); }
/* fundo bem carregado: a legenda cai muitas vezes sobre ceu ou fachada clara,
   e a 28% do prototipo nao se lia */
.sa-portal-parking-caption { position: absolute; right: 10px; bottom: 8px; padding: 3px 8px; background: rgba(0, 21, 36, 0.62); color: rgba(255, 255, 255, 0.92); font-weight: 300; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.sa-portal-parking-badge { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.sa-portal-parking-badge svg { width: 26px; height: 26px; }
.sa-portal-parking-text { flex: 1; }
.sa-portal-parking-month { margin: 0; font-weight: 500; font-size: 16px; color: #001524; }
.sa-portal-parking-label { margin: 2px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.sa-portal-parking-parque { margin: 2px 0 0; font-size: 13px; color: #9ca3af; }
.sa-portal-parking-note { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid; font-size: 12px; color: #374151; white-space: nowrap; }
.sa-portal-parking-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Footer */
.sa-portal-footer { margin-top: 64px; padding: 32px 0; border-top: 1px solid #e5e7eb; }
.sa-portal-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sa-portal-footer-link { font-weight: 300; font-size: 13px; color: #9ca3af; text-decoration: none; }
.sa-portal-footer-link:hover { color: #6b7280; }
.sa-portal-footer-link--accent { color: var(--color-primary); }

@media (max-width: 767px) {
    .sa-portal-hero-title { font-size: 26px; }
    /* quem empilha e' a coluna de informacao; o cartao ja' e' uma linha so' */
    .sa-portal-parking-info { flex-direction: column; align-items: flex-start; }
}

/* ── Portal Phase 1b: live-document links, empty state, section drill-down ── */

/* Card head + items are now links into the section view */
a.sa-portal-card-head { text-decoration: none; color: inherit; }
a.sa-portal-card-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; text-decoration: none; }
.sa-portal-card-list li:last-child a.sa-portal-card-item { border-bottom: 0; }
a.sa-portal-card-item:hover .sa-portal-card-item-label { color: var(--sa-portal-accent); }
a.sa-portal-card-item:hover .sa-portal-card-item-right svg { color: var(--sa-portal-accent); }
/* 24px horizontais como .sa-portal-card-desc e .sa-portal-card-list — sem isto
   o texto ficava encostado ao bordo do cartao. */
.sa-portal-card-none { margin: 0; padding: 4px 24px 16px; font-size: 12px; font-weight: 300; color: #9ca3af; }

/* Empty state */
.sa-portal-empty { text-align: center; padding: 56px 24px; border: 1px dashed #e5e7eb; background: #fff; }
.sa-portal-empty svg { width: 40px; height: 40px; color: #cbd5e1; }
.sa-portal-empty-title { margin: 14px 0 4px; font-size: 15px; font-weight: 500; color: #374151; }
.sa-portal-empty-desc { margin: 0; font-size: 13px; font-weight: 300; color: #9ca3af; }

/* Section drill-down header */
.sa-portal-sec-hero { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 28px 0 32px; }
.sa-portal-sec-back { display: inline-flex; align-items: center; gap: 7px; color: #6b7280; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; margin-bottom: 22px; }
.sa-portal-sec-back svg { width: 14px; height: 14px; transition: transform .2s ease; }
.sa-portal-sec-back:hover { color: var(--sa-portal-accent); }
.sa-portal-sec-back:hover svg { transform: translateX(-3px); }
.sa-portal-sec-head { display: flex; align-items: center; gap: 16px; }
.sa-portal-sec-icon { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sa-portal-accent); }
.sa-portal-sec-icon svg { width: 24px; height: 24px; }
.sa-portal-sec-title { margin: 0; font-size: 24px; font-weight: 300; color: #001524; }
.sa-portal-sec-desc { margin: 4px 0 0; font-size: 14px; font-weight: 300; color: #6b7280; max-width: 640px; }

/* Section document list */
.sa-portal-doclist { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e7eb; background: #fff; }
.sa-portal-doc { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #f3f4f6; }
.sa-portal-doc:last-child { border-bottom: 0; }
.sa-portal-doc-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sa-portal-accent); background: color-mix(in srgb, var(--sa-portal-accent) 10%, #fff); }
.sa-portal-doc-icon svg { width: 20px; height: 20px; }
.sa-portal-doc-body { flex: 1; min-width: 0; }
.sa-portal-doc-title { margin: 0; font-size: 14px; font-weight: 400; color: #1f2937; }
.sa-portal-doc-meta { margin: 4px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #9ca3af; }
.sa-portal-doc-ext { display: inline-block; padding: 1px 7px; border: 1px solid #e5e7eb; letter-spacing: .5px; color: #6b7280; }
.sa-portal-doc-sub { font-weight: 300; }
.sa-portal-doc-download { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 9px 16px; background: var(--sa-portal-accent); color: #fff; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: opacity .2s ease; }
.sa-portal-doc-download svg { width: 14px; height: 14px; }
/* Mesma razao: sem o `color`, a global levava o rotulo de #fff para #f0f0f0.
   Aqui o botao tem fundo de cor, por isso mal se notava -- mas fica correcto. */
.sa-portal-doc-download:hover,
.sa-portal-doc-download:focus { opacity: .88; color: #fff; }
.sa-portal-doc-nofile { flex-shrink: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9ca3af; }

/* ── Catalogos do portal: grelha com capas, agrupada pelas tres areas ──
   Pedido do cliente (1 Set 2026): "todos os catalogos disponiveis, separados
   pelas 3 areas ... com thumbnails dos catalogos". Substitui a lista corrida
   de documentos SO' nesta seccao — as outras (Documentos) ficam na lista. */

.sa-pcat { display: flex; flex-direction: column; gap: 24px; }

/* Filtros por area. Mesmo desenho das pilulas das FAQs na pagina Resources
   (.sa-res-faq-pill), para o visitante reconhecer o gesto. */
.sa-pcat-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-pcat-pill { height: 32px; padding: 0 16px; font-family: 'Kanit', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500; background: #fff; border: 1px solid #e5e7eb; color: #4b5563; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.sa-pcat-pill:hover { border-color: color-mix(in srgb, var(--sa-portal-accent) 30%, #e5e7eb); }
.sa-pcat-pill.is-on { background: var(--sa-portal-accent); border-color: var(--sa-portal-accent); color: #fff; }

.sa-pcat-vazio { margin: 8px 0 0; font-size: 13px; color: #9ca3af; }

/* Pistas de largura FIXA e nao `1fr`: com uma area a ter um catalogo so', as
   colunas iguais faziam a capa crescer ate' um terco do ecra — deixava de ser
   uma miniatura. Assim o cartao tem sempre o mesmo tamanho, haja um catalogo
   ou seis, e a linha enche-se da esquerda para a direita. */
.sa-pcat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (min-width: 640px) { .sa-pcat-grid { grid-template-columns: repeat(auto-fill, 220px); } }

.sa-pcat-card { background: #fff; border: 1px solid #e5e7eb; display: flex; flex-direction: column; transition: border-color .2s ease, box-shadow .2s ease; }
/* o filtro esconde por atributo; sem isto o `display: flex` de cima ganhava */
.sa-pcat-card[hidden] { display: none; }
.sa-pcat-card:hover { border-color: color-mix(in srgb, var(--sa-portal-accent) 40%, #e5e7eb); box-shadow: 0 1px 8px rgba(0, 21, 36, 0.06); }

/* A capa. Racio de folha A4 (1:1.414) para a caixa nao mudar de altura entre
   um catalogo com capa e outro sem — e' o mesmo racio das capas geradas da
   primeira pagina do PDF, por isso a imagem entra inteira, sem corte. */
.sa-pcat-capa { display: block; position: relative; aspect-ratio: 1 / 1.414; background: #f8fafc; border-bottom: 1px solid #f3f4f6; overflow: hidden; }
.sa-pcat-capa img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.sa-pcat-card:hover .sa-pcat-capa img { transform: scale(1.02); }

/* Sem capa carregada: o simbolo generico, centrado, na mesma caixa. */
.sa-pcat-capa.is-sem-capa { display: flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--sa-portal-accent) 35%, #cbd5e1); }
.sa-pcat-capa.is-sem-capa svg { width: 46px; height: 46px; }

.sa-pcat-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
/* A area passou a ser etiqueta do cartao, agora que nao ha' titulos de seccao. */
.sa-pcat-area { margin: 0; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; color: var(--sa-portal-accent); }
.sa-pcat-title { margin: 0; font-size: 15px; font-weight: 500; color: #1f2937; line-height: 1.3; }
.sa-pcat-meta { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: #9ca3af; }
.sa-pcat-ext { display: inline-block; padding: 1px 7px; border: 1px solid #e5e7eb; letter-spacing: .5px; color: #6b7280; }

.sa-pcat-btn { margin-top: 4px; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--sa-portal-accent); color: #fff; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: opacity .2s ease; }
.sa-pcat-btn svg { width: 14px; height: 14px; }
/* como no .sa-portal-doc-download: sem o `color` a regra global puxava o
   rotulo de #fff para #f0f0f0 no hover */
.sa-pcat-btn:hover,
.sa-pcat-btn:focus { opacity: .88; color: #fff; }

/* --------------------------------------------------------------------------
   Grelha com capas AO BAIXO (.sa-pcat--paisagem)
   --------------------------------------------------------------------------
   A grelha de cima foi desenhada para os Catalogos Tecnicos, cuja capa e' a
   primeira pagina do PDF: caixa A4 ao alto (1/1.414) e `object-fit: contain`,
   para nao cortar nada da capa.

   Os Casos de Estudo entraram na mesma grelha (2 Set 2026) e trazem outra
   coisa: FOTOGRAFIAS das instalacoes, ao baixo. Numa caixa A4 ficavam com
   faixas brancas em cima e em baixo maiores do que a propria fotografia, e as
   colunas de 140px partiam titulos como "ShowCase Report 2025 - North America"
   em duas linhas, deixando os botoes de cada cartao a alturas diferentes.

   Quem monta a seccao declara o formato das suas capas (`capaFormato` no
   _portalCasosSeccao) e so' essa grelha muda. Os catalogos ficam como estao.
   -------------------------------------------------------------------------- */

/* Colunas mais largas: o titulo cabe numa linha e a fotografia tem tamanho
   para se ver o que la' esta'. */
.sa-pcat--paisagem .sa-pcat-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 3:2, o formato das fotografias. `cover` em vez de `contain`: aqui preencher
   e cortar um pouco e' melhor do que deixar a caixa meia vazia -- ao contrario
   da capa de um catalogo, onde cortar comia o titulo impresso. */
.sa-pcat--paisagem .sa-pcat-capa { aspect-ratio: 3 / 2; }
.sa-pcat--paisagem .sa-pcat-capa img { object-fit: cover; }

/* Botoes todos a` mesma altura, mesmo com titulos de duas linhas: o corpo
   estica e o botao encosta-se ao fundo. */
.sa-pcat--paisagem .sa-pcat-body { flex: 1 1 auto; }
.sa-pcat--paisagem .sa-pcat-btn { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
    .sa-pcat-capa img,
    .sa-pcat-card:hover .sa-pcat-capa img { transition: none; transform: none; }
}

@media (max-width: 767px) {
    .sa-portal-sec-title { font-size: 20px; }
    .sa-portal-doc { flex-wrap: wrap; gap: 12px; }
    .sa-portal-doc-download, .sa-portal-doc-nofile { margin-left: 52px; }
}

/* ── Account page (personal data + password) ── */

/* Top-bar user block is now a link to the account page */
.sa-portal-user-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.sa-portal-user-link:hover .sa-portal-user-name { text-decoration: underline; }

.sa-account-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .sa-account-grid { grid-template-columns: 1.4fr 1fr; } }

.sa-account-card { background: #fff; border: 1px solid #e5e7eb; padding: 24px 24px 8px; }
.sa-account-card-title { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #001524; }
.sa-account-hint { margin: 0 0 16px; font-size: 12px; font-weight: 300; color: #9ca3af; }

.sa-account-field { margin-bottom: 16px; }
.sa-account-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 400; letter-spacing: .3px; color: #374151; }
.sa-account-field input,
.sa-account-field select,
.sa-account-field textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #e5e7eb; background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 300; color: #1f2937; border-radius: 0;
    transition: border-color .15s ease;
}
.sa-account-field input:focus,
.sa-account-field select:focus,
.sa-account-field textarea:focus { outline: none; border-color: #00476c; }
.sa-account-err { display: block; margin-bottom: 6px; font-size: 12px; color: #dc2626; }

.sa-account-actions { margin-top: 24px; }
.sa-account-save { border: 0; cursor: pointer; background: #00476c; }
.sa-account-save:hover { opacity: .9; }

@media (max-width: 899px) { .sa-account-card { padding: 20px 20px 6px; } }

/* ── Simulator wizard (multi-step product selector) ── */
.sa-sim-card-inner { display: flex; flex-direction: column; }
.sa-sim-dots { display: flex; gap: 8px; margin-bottom: 28px; }
.sa-sim-dot { width: 28px; height: 4px; background: #e5e7eb; transition: background .2s ease; }
.sa-sim-dot--active { background: var(--sim-accent, #00476c); }
.sa-sim-dot--done { background: color-mix(in srgb, var(--sim-accent, #00476c) 45%, #e5e7eb); }

.sa-sim-wiz { flex: 1; min-height: 250px; display: flex; }
.sa-sim-panel { display: none; width: 100%; animation: saSimFade .25s ease; }
.sa-sim-panel--active { display: block; }
@keyframes saSimFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sa-sim-q { margin: 0 0 6px; font-size: 20px; font-weight: 400; color: #001524; display: flex; align-items: center; gap: 10px; }
.sa-sim-q-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sim-accent, #00476c); color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.sa-sim-sub { margin: 0 0 18px; font-size: 13px; font-weight: 300; color: #6b7280; }
.sa-sim-hint { margin: 14px 0 0; font-size: 13px; color: var(--sim-accent, #00476c); font-weight: 500; }
.sa-sim-warn { margin: 16px 0 0; padding: 12px 14px; background: #FFF7ED; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; }

.sa-sim-choices { display: grid; gap: 12px; margin-top: 22px; }
.sa-sim-choices--row { grid-template-columns: repeat(3, 1fr); }
.sa-sim-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid #e5e7eb; cursor: pointer; font-family: inherit; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.sa-sim-choice span { font-size: 15px; font-weight: 500; color: #1f2937; }
.sa-sim-choice small { font-size: 12px; color: #9ca3af; }
.sa-sim-choices--row .sa-sim-choice { align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: #1f2937; }
.sa-sim-choice:hover { border-color: var(--sim-accent, #00476c); }
.sa-sim-choice--active { border-color: var(--sim-accent, #00476c); box-shadow: inset 0 0 0 1px var(--sim-accent, #00476c); }

.sa-sim-select, .sa-sim-num { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #e5e7eb; background: #fff; font-family: inherit; font-size: 15px; color: #1f2937; border-radius: 0; margin-top: 22px; }
.sa-sim-select:focus, .sa-sim-num:focus { outline: none; border-color: var(--sim-accent, #00476c); }
.sa-sim-inline { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.sa-sim-inline .sa-sim-num { margin-top: 0; max-width: 170px; }
.sa-sim-unit-static { font-size: 14px; color: #6b7280; }
.sa-sim-unit-toggle { display: flex; border: 1px solid #e5e7eb; }
.sa-sim-unit { padding: 10px 14px; background: #fff; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; color: #6b7280; }
.sa-sim-unit--active { background: var(--sim-accent, #00476c); color: #fff; }

.sa-sim-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid #eef0f2; }
.sa-sim-back { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: #9ca3af; }
.sa-sim-back:hover { color: #6b7280; }
.sa-sim-next { padding: 12px 28px; background: var(--sim-accent, #00476c); color: #fff; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; transition: opacity .2s ease; }
.sa-sim-next:hover { opacity: .9; }
.sa-sim-next:disabled { opacity: .4; cursor: not-allowed; }

#saSimResult .sa-sim-result-name { margin-top: 4px; }
#saSimResult .sa-sim-btn { margin-top: 24px; }

@media (max-width: 767px) { .sa-sim-choices--row { grid-template-columns: 1fr; } }

/* ==============================
   Portal — birthday popup (BirthdayPopup, 1:1 with the prototype)
   ============================== */
.sa-bpop-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 21, 36, 0.7);
}
.sa-bpop-overlay.open { display: flex; }

/* 23 Set 2026: 480 -> 560, a pedido do cliente (ver .sa-bpop-avatar). Com
   varios aniversarios no mesmo dia o popup nao passa do ecra: o corpo faz
   scroll e o cabecalho, com o X, fica sempre a vista. */
.sa-bpop {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family);
    animation: saBpopIn 200ms ease-out;
}
@keyframes saBpopIn { from { opacity: 0; } to { opacity: 1; } }

/* Header (orange band) */
.sa-bpop-head { background: #ED6E00; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; }
.sa-bpop-head-left { display: flex; align-items: center; gap: 12px; }
.sa-bpop-head-title { margin: 0; font-weight: 500; font-size: 15px; color: #ffffff; text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.1; }
.sa-bpop-head-sub { margin: 0; font-weight: 300; font-size: 11px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; }
.sa-bpop-x { width: 32px; height: 32px; background: rgba(255, 255, 255, 0.15); border: none; display: flex; align-items: center; justify-content: center; color: #ffffff; cursor: pointer; transition: background-color 150ms ease; }
.sa-bpop-x:hover { background: rgba(255, 255, 255, 0.25); }

/* Body */
.sa-bpop-head { flex-shrink: 0; }
.sa-bpop-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; }

/* Own-birthday personal banner (our addition) */
.sa-bpop-self { display: flex; align-items: center; gap: 14px; padding: 16px; background: #FFF7F0; border: 1px solid rgba(237, 110, 0, 0.35); }
.sa-bpop-self-emoji { font-size: 30px; line-height: 1; flex-shrink: 0; }
.sa-bpop-self-title { margin: 0; font-weight: 500; font-size: 16px; color: #001524; text-transform: uppercase; letter-spacing: 0.2px; }
.sa-bpop-self-msg { margin: 3px 0 0; font-weight: 300; font-size: 13px; line-height: 1.5; color: #6b7280; }

/* Section labels */
.sa-bpop-label { margin: 0 0 12px; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; }
.sa-bpop-label--today { color: #ED6E00; }
.sa-bpop-label--next  { color: #00476c; }

/* Rows */
.sa-bpop-rows { display: flex; flex-direction: column; gap: 8px; }
.sa-bpop-row { display: flex; align-items: center; gap: 20px; padding: 16px 20px; border: 1px solid; }
.sa-bpop-row--today { background: #FFF7F0; border-color: rgba(237, 110, 0, 0.2); }
.sa-bpop-row--next  { background: #f8fafc; border-color: #e5e7eb; }
/* Fotografia da pessoa (1 Set 2026). Antes era um quadrado com um emoji; o
   prototipo poe a foto redonda com um anel — laranja para quem faz anos hoje,
   azul esbatido para o proximo. Sem foto entra a silhueta neutra da casa, que
   e' quem o sa_portal_avatar() escolhe, o mesmo da faixa do painel. */
/* 23 Set 2026: 40 -> 96px, a pedido do cliente -- a maior parte dos colegas
   nao sabe o nome dos outros, mas reconhece a cara. Foge ao prototipo (40px)
   de proposito. Acima dos 1920 cresce com o --esc ate 144px (ver o bloco de
   1920 no fim do ficheiro); as fotos estao a 256px, por isso nao desfocam. */
.sa-bpop-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f8fafc; }
.sa-bpop-avatar--today { border: 3px solid #ED6E00; }
.sa-bpop-avatar--next  { border: 3px solid rgba(0, 71, 108, 0.3); }
@media (max-width: 480px) {
    .sa-bpop-avatar { width: 72px; height: 72px; }
    .sa-bpop-row { gap: 14px; padding: 14px 16px; }
}
.sa-bpop-name { margin: 0; font-weight: 500; font-size: 15px; color: #001524; }
.sa-bpop-meta { margin: 0; font-weight: 300; font-size: 12px; color: #9ca3af; }

/* Footer button */
.sa-bpop-close { margin-top: 4px; width: 100%; height: 44px; background: #001524; border: none; color: #ffffff; font-family: var(--font-family); font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background-color 150ms ease; }
.sa-bpop-close:hover { background: #00243d; }

/* ==============================
   Portal — parabens ao proprio (23 Set 2026, pedido do cliente)
   Opcao "C" das tres maquetes: azul-noite da marca, confetes a cores, o nome
   grande a laranja, sem foto. O primeiro paragrafo da mensagem do backoffice
   e' a manchete; o resto e' corpo. Abre dentro do mesmo .sa-bpop-overlay do
   popup dos colegas (fundo escuro, centrado, .open).
   ============================== */
.sa-bgreet {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #001524;
    color: #ffffff;
    text-align: center;
    font-family: var(--font-family);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: saBpopIn 200ms ease-out;
}
.sa-bgreet-confetes,
.sa-bgreet-chuva { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sa-bgreet-body {
    position: relative;
    z-index: 2;
    padding: 46px 40px 32px;
    min-height: 0;
    overflow-y: auto;
}
.sa-bgreet-x {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1); border: none; color: #ffffff; cursor: pointer;
    transition: background-color 150ms ease;
}
.sa-bgreet-x:hover { background: rgba(255, 255, 255, 0.2); }
.sa-bgreet-kicker { margin: 0; font-weight: 500; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #ED6E00; }
.sa-bgreet-title { margin: 10px 0 0; font-weight: 600; font-size: 40px; line-height: 1.05; color: #ffffff; }
.sa-bgreet-title span { display: block; color: #ED6E00; }
.sa-bgreet-text { margin-top: 22px; }
.sa-bgreet-text p { margin: 0 0 10px; font-weight: 300; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.sa-bgreet-text p:last-child { margin-bottom: 0; }
.sa-bgreet-text p:first-child { font-weight: 500; font-size: 17px; color: #ffffff; }
.sa-bgreet-btn {
    margin-top: 26px; width: 100%; height: 48px;
    background: #ED6E00; border: none; color: #ffffff; cursor: pointer;
    font-family: var(--font-family); font-weight: 500; font-size: 13px;
    text-transform: uppercase; letter-spacing: 1.6px;
    transition: background-color 150ms ease;
}
.sa-bgreet-btn:hover { background: #d46200; }
.sa-bgreet-x:focus-visible,
.sa-bgreet-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* confetes: tira, ponto, quadrado */
.sa-bgreet-cf { position: absolute; display: block; }
.sa-bgreet-cf--r { width: 10px; height: 4px; }
.sa-bgreet-cf--d { width: 7px; height: 7px; border-radius: 50%; }
.sa-bgreet-cf--s { width: 7px; height: 7px; }
/* a chuva de quando abre (as pecas sao criadas pelo JS do portal.tpl) */
.sa-bgreet-cai { top: -12px; opacity: 0; animation-name: saBgreetCai; animation-timing-function: cubic-bezier(.3, .6, .6, 1); animation-fill-mode: forwards; }
@keyframes saBgreetCai {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(900px) rotate(var(--rot, 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .sa-bgreet-cai { display: none; }
}
@media (max-width: 480px) {
    .sa-bgreet-body { padding: 44px 22px 24px; }
    .sa-bgreet-title { font-size: 32px; }
}

/* ==============================
   Portal — cartao de colega ampliado (23 Set 2026, pedido da Sofia)
   Clicar num cartao de aniversario (faixa do painel ou grelha do "Ver todos")
   abre-o em ponto grande: foto quadrada, nome, departamento e o dia de anos.
   E' o cartao do "Ver todos" em grande -- mesmo risco de cor, mesma faixa
   por cima da foto, mesmo tingido de hoje/proximo.
   Markup e script em views/Utilizadores/include-foto-zoom.tpl; so' os cartoes
   de quem tem foto levam .sa-fzoom-trigger (a silhueta nao abre nada).
   A foto e' a medium_ quando existe; senao a small_ (256px) -- ver o include.
   ============================== */
.sa-fzoom-trigger { cursor: pointer; transition: box-shadow 150ms ease, transform 150ms ease; }
.sa-fzoom-trigger:hover { box-shadow: 0 10px 24px -8px rgba(0, 21, 36, 0.25); transform: translateY(-2px); }
.sa-fzoom-trigger:focus-visible { outline: 2px solid var(--color-orange, #ED6E00); outline-offset: 3px; }

.sa-fzoom-overlay {
    position: fixed; inset: 0; z-index: 250;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 21, 36, 0.8);
    animation: saBpopIn 160ms ease-out;
}
.sa-fzoom-overlay[hidden] { display: none; }
.sa-fzoom-card {
    position: relative;
    width: min(420px, 92vw);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #ffffff;
    font-family: var(--font-family);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.sa-fzoom-rule { height: 4px; background: #e5e7eb; }
.sa-fzoom-card--today .sa-fzoom-rule { background: var(--color-orange, #ED6E00); }
.sa-fzoom-card--next  .sa-fzoom-rule { background: var(--color-primary, #00476c); }
.sa-fzoom-photo { position: relative; aspect-ratio: 1 / 1; background: #f0f4f8; }
.sa-fzoom-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-fzoom-flag {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px; text-align: center;
    font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #ffffff;
}
.sa-fzoom-card--today .sa-fzoom-flag { background: var(--color-orange, #ED6E00); font-weight: 500; }
.sa-fzoom-card--next  .sa-fzoom-flag { background: var(--color-primary, #00476c); font-weight: 300; }
.sa-fzoom-x {
    position: absolute; top: 16px; right: 12px; z-index: 2;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 21, 36, 0.6); color: #ffffff; border: none;
    cursor: pointer; transition: background-color 150ms ease;
}
.sa-fzoom-x:hover { background: rgba(0, 21, 36, 0.85); }
.sa-fzoom-x:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.sa-fzoom-info { padding: 18px 22px 22px; background: #ffffff; }
.sa-fzoom-card--today .sa-fzoom-info { background: #FFF7F0; }
.sa-fzoom-card--next  .sa-fzoom-info { background: #f0f7ff; }
.sa-fzoom-name { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.25; color: #001524; }
.sa-fzoom-meta { margin: 4px 0 0; font-weight: 300; font-size: 13px; color: #6b7280; }
.sa-fzoom-date { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #6b7280; }
.sa-fzoom-card--today .sa-fzoom-date { color: var(--color-orange, #ED6E00); }
.sa-fzoom-card--next  .sa-fzoom-date { color: var(--color-primary, #00476c); }

/* Today's birthday row highlight in the drill-down list */
.sa-portal-doc.is-today {
    background: #FFF0E5;
    box-shadow: inset 3px 0 0 #ED6E00;
}

/* ==============================
   Portal — birthdays / events listing (ListView, 1:1 with the prototype)
   ============================== */
/* Month filter pills */
.sa-psec-months { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.sa-psec-month { height: 34px; padding: 0 16px; font-family: var(--font-family); font-weight: 300; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; border: 1px solid #e5e7eb; background: #ffffff; color: #6b7280; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.sa-psec-month.is-active { background: var(--acc); border-color: var(--acc); color: #ffffff; }

.sa-psec-list { display: flex; flex-direction: column; gap: 8px; }
.sa-psec-empty { text-align: center; padding: 48px 24px; font-family: var(--font-family); font-weight: 300; font-size: 14px; color: #9ca3af; }

/* Birthday rows (display only) */
/* ---------------------------------------------------------------------------
   Aniversarios, pagina "ver todos" — grelha de cartoes com fotografia
   (desenho de 1 Set 2026, do prototipo; antes era uma lista de linhas com um
   avatar de 40px).

   As fotos de colaborador estao guardadas a 256x256, o que chega para um
   cartao desta largura. Sem foto entra a silhueta neutra da casa, tratada
   pelo sa_psec_avatar() no template.

   O `data-month` de cada cartao e' o mesmo de antes: o filtro de meses poe
   `display:none` nos cartoes que nao interessam, e como o pai e' uma grelha o
   `display:''` de volta devolve o cartao ao sitio.
   --------------------------------------------------------------------------- */
.sa-psec-bgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 640px)  { .sa-psec-bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sa-psec-bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sa-psec-bgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sa-psec-bcard {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.sa-psec-bcard.is-today {
    border-color: rgba(237, 110, 0, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sa-psec-bcard.is-next {
    border-color: rgba(0, 71, 108, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* risco de cor no topo — e' o que distingue os tres estados de relance */
.sa-psec-bcard-rule { height: 3px; background: #e5e7eb; }
.sa-psec-bcard.is-today .sa-psec-bcard-rule { background: var(--color-orange); }
.sa-psec-bcard.is-next  .sa-psec-bcard-rule { background: var(--color-primary); }

/* A foto e' quadrada e enche a largura do cartao. O fundo azulado por baixo
   evita o salto branco enquanto a imagem nao carrega. */
.sa-psec-bcard-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f0f4f8;
}

.sa-psec-bcard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* faixa por cima da foto, so' no aniversario de hoje e no proximo */
.sa-psec-bcard-flag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 6px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
}

.sa-psec-bcard-flag--today { background: var(--color-orange); font-weight: 500; }
.sa-psec-bcard-flag--next  { background: var(--color-primary); font-weight: 300; }

.sa-psec-bcard-info { padding: 12px; background: #ffffff; }
.sa-psec-bcard.is-today .sa-psec-bcard-info { background: #FFF7F0; }
.sa-psec-bcard.is-next  .sa-psec-bcard-info { background: #f0f7ff; }

.sa-psec-bcard-name {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35;
    color: #001524;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-psec-bcard-sub {
    margin: 2px 0 0;
    font-weight: 300;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Area geografica na grelha do "ver todos" — igual a` do painel. */
.sa-psec-bcard-area {
    margin: 1px 0 0;
    font-weight: 300;
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-psec-bcard-date {
    margin: 6px 0 0;
    font-weight: 300;
    font-size: 12px;
    color: #9ca3af;
}

.sa-psec-bcard.is-today .sa-psec-bcard-date { color: var(--color-orange); }
.sa-psec-bcard.is-next  .sa-psec-bcard-date { color: var(--color-primary); }

/* Event rows (clickable → detail) */
.sa-psec-erow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid #e5e7eb; background: #ffffff; text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease; }
.sa-psec-erow:hover { border-color: rgba(0, 71, 108, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.sa-psec-erow-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sa-psec-erow-tile { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--acc) 12%, #ffffff); color: var(--acc); }
.sa-psec-erow-tile svg { width: 18px; height: 18px; }
.sa-psec-erow-text { min-width: 0; display: flex; flex-direction: column; }
.sa-psec-erow-name { font-weight: 500; font-size: 15px; color: #001524; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-psec-erow-sub { font-weight: 300; font-size: 12px; color: #9ca3af; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-psec-erow-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sa-psec-erow-date { font-weight: 300; font-size: 13px; color: #9ca3af; }
.sa-psec-erow-ver { height: 32px; padding: 0 16px; display: flex; align-items: center; gap: 6px; font-weight: 300; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; border: 1px solid var(--acc); color: var(--acc); transition: background-color 150ms ease, color 150ms ease; }
.sa-psec-erow-ver svg { width: 11px; height: 11px; }
.sa-psec-erow:hover .sa-psec-erow-ver { background: var(--acc); color: #ffffff; }

@media (max-width: 767px) {
    .sa-psec-erow-date { display: none; }
}

/* ==============================
   Portal — event detail
   ============================== */
.sa-pevt { font-family: var(--font-family); display: flex; flex-direction: column; gap: 24px; }
.sa-pevt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sa-pevt-info { display: flex; align-items: center; gap: 12px; padding: 16px; background: #f8fafc; border: 1px solid #e5e7eb; }
.sa-pevt-info-tile { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(0, 71, 108, 0.1); color: #00476c; }
.sa-pevt-info-tile svg { width: 16px; height: 16px; }
.sa-pevt-info-label { margin: 0; font-weight: 300; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; }
.sa-pevt-info-value { margin: 1px 0 0; font-weight: 500; font-size: 14px; color: #001524; }
.sa-pevt-about { background: #f8fafc; border: 1px solid #e5e7eb; padding: 24px; }
.sa-pevt-about-label { margin: 0 0 12px; font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: #001524; }
.sa-pevt-about-text { font-weight: 300; font-size: 15px; line-height: 1.7; color: #374151; }
.sa-pevt-about-text p { margin: 0 0 12px; }
.sa-pevt-about-text p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .sa-pevt-grid { grid-template-columns: 1fr; }
}

/* Event detail — prototype title treatment (breadcrumb + accent rule + badge + title) */
.sa-portal-main--detail { padding-bottom: 64px; }
.sa-pdet-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; font-family: var(--font-family); }
.sa-pdet-crumb a { display: inline-flex; align-items: center; gap: 8px; font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: #9ca3af; text-decoration: none; transition: color 150ms ease; }
.sa-pdet-crumb a:hover { color: #00476c; }
.sa-pdet-crumb a svg { width: 13px; height: 13px; }
.sa-pdet-crumb > svg { width: 12px; height: 12px; color: #d1d5dc; flex-shrink: 0; }
.sa-pdet-crumb span { font-weight: 300; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: #001524; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sa-pdet { font-family: var(--font-family); max-width: 860px; }
.sa-pdet-rule { height: 3px; margin-bottom: 24px; }
.sa-pdet-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sa-pdet-badge { font-weight: 300; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: #ffffff; padding: 4px 12px; }
.sa-pdet-date { font-weight: 300; font-size: 12px; color: #9ca3af; }
.sa-pdet-title { margin: 0 0 24px; font-weight: 500; font-size: 28px; line-height: 1.1; text-transform: uppercase; color: #001524; }
@media (min-width: 768px) { .sa-pdet-title { font-size: 36px; } }

/* ============================================================================
   Dynamic technical spec tables (Catalogo SpecTabela -> section-spec-table.tpl)
   One skin renders every family. Value-header colour uses --color-orange, which
   the sector system re-themes (Industrial orange / Medical blue / Energy green).
   ========================================================================== */
/* #spec-table e' alvo de ancora: e' aqui que aterra o "See the ... range" do
   simulador. Os 80px sao os mesmos que o .sa-mc e os outros alvos do site ja'
   usam, para o cabecalho da tabela nao ficar colado ao topo da janela. */
.sa-spec { width: 100%; max-width: var(--container-max); margin: 80px auto 48px; padding: 0 var(--container-padding-mobile); box-sizing: border-box; font-family: 'Kanit', sans-serif; scroll-margin-top: 80px; }
@media (min-width: 1024px) { .sa-spec { padding: 0 var(--container-padding); } }
.sa-spec-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-spec-table { width: 100%; border-collapse: collapse; min-width: 640px; }

/* Header cells */
.sa-spec-table th { padding: 12px 16px; text-align: center; vertical-align: middle; color: #ffffff; font-weight: 500; line-height: 1.15; }
.sa-spec-h-label { background: #00476c; text-align: left; text-transform: uppercase; letter-spacing: 0.5px; font-style: italic; font-weight: 600; }
.sa-spec-h-val   { background: var(--color-orange, #ED6E00); }
.sa-spec-h-group { background: var(--color-orange, #ED6E00); border-left: 1px solid rgba(255,255,255,0.25); }
.sa-spec-h-sub   { background: #00476c; font-weight: 500; font-size: 13px; }
.sa-spec-h-lbl   { display: block; font-size: 15px; }
.sa-spec-h-unit  { display: block; font-size: 11px; font-weight: 300; opacity: 0.92; margin-top: 2px; }

/* Body cells */
.sa-spec-table td { padding: 12px 16px; border-bottom: 1px solid #d7e3ec; font-size: 14px; color: #1f2937; }
.sa-spec-c-label { text-align: left; color: #00476c; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.sa-spec-c-val   { color: #00476c; font-weight: 500; }
.sa-spec-a-left   { text-align: left; }
.sa-spec-a-center { text-align: center; }
.sa-spec-a-right  { text-align: right; }
.sa-spec-table tbody tr:hover td { background: #f2f7fa; }

/* Availability dot (bool columns, e.g. Screw / Scroll) */
.sa-spec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-orange, #ED6E00); }

/* Section divider row (e.g. the "Dry" split) */
.sa-spec-section td { background: #eaf1f6; padding: 8px 16px; }
.sa-spec-section span { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #00476c; }

/* Footnote */
.sa-spec-note { margin: 10px 2px 0; font-size: 12px; color: #6b7280; text-align: right; }

/* --- Cabecalho da tabela (usa o specTitle que o controlador ja enviava) --- */
.sa-spec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sa-spec-eyebrow { display: block; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-orange, #ED6E00); }
.sa-spec-title { margin: 8px 0 0; font-weight: 500; font-size: 32px; line-height: 1.15; text-transform: uppercase; color: var(--color-primary, #00476c); }
.sa-spec-count { font-size: 12px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.12em; color: #94a3b8; padding-bottom: 3px; }
.sa-spec-divider { width: 48px; height: 4px; background: var(--color-orange, #ED6E00); margin: 18px 0 30px; }

/* --- Leitura: zebra + primeira coluna fixa ao scrollar na horizontal --- */
.sa-spec-table tbody tr:nth-child(even) td { background: #f8fafc; }
.sa-spec-table tbody tr:hover td { background: #f2f7fa; }
.sa-spec-table th:first-child,
.sa-spec-table td:first-child { position: sticky; left: 0; z-index: 2; }
.sa-spec-table tbody tr:nth-child(odd) .sa-spec-c-label { background: #ffffff; }
.sa-spec-table tbody tr:nth-child(even) .sa-spec-c-label { background: #f8fafc; }
.sa-spec-table tbody tr:hover .sa-spec-c-label { background: #f2f7fa; }
.sa-spec-section td { position: relative; z-index: 1; }

/* sombra a dizer que ha mais colunas para o lado */
.sa-spec-scroll { position: relative; }
.sa-spec.has-scroll-r .sa-spec-scroll::after,
.sa-spec.has-scroll-l .sa-spec-scroll::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 3;
}
.sa-spec.has-scroll-r .sa-spec-scroll::after { right: 0; background: linear-gradient(to left, rgba(0,71,108,0.13), transparent); }
.sa-spec.has-scroll-l .sa-spec-scroll::before { left: 0; background: linear-gradient(to right, rgba(0,71,108,0.13), transparent); }

/* --- Colapsar as linhas extra (o Azoto tem 28) ---
   As linhas escondidas NAO levam display:none: com a tabela em table-layout
   automatico, tirar linhas do layout faz o browser recalcular a largura das
   colunas so com as visiveis — e o cabecalho saltava de tamanho ao expandir.
   Em vez disso corta-se pela altura (max-height, definido em JS), o que de
   caminho da a animacao de abrir/fechar. */
.sa-spec-scroll { overflow-y: hidden; transition: max-height 320ms ease-out; }
.sa-spec-fade { display: none; }
.sa-spec.is-collapsed .sa-spec-fade {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
    background: linear-gradient(to top, #ffffff 22%, rgba(255, 255, 255, 0)); pointer-events: none; z-index: 3;
}
/* as linhas extra entram a aparecer, nao de repente */
.sa-spec-r-more { opacity: 1; transition: opacity 220ms ease 80ms; }
.sa-spec.is-collapsed .sa-spec-r-more { opacity: 0; transition: opacity 120ms ease; }

/* --- Botao abrir/fechar --- */
.sa-spec-more { display: flex; justify-content: center; margin-top: 18px; }
.sa-spec-more-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    /* min-width fixo: sem isto o botao encolhia de "Ver todos os 28 modelos"
       para "Ver menos" e saltava no ecra */
    min-width: 260px; padding: 13px 26px; cursor: pointer;
    font-family: 'Kanit', sans-serif; font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.14em; line-height: 1;
    color: #ffffff; background: var(--color-primary, #00476c);
    border: 0; border-radius: 2px;
    transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.sa-spec-more-btn:hover {
    background: var(--color-orange, #ED6E00);
    box-shadow: 0 10px 20px -8px rgba(0, 71, 108, 0.45);
    transform: translateY(-2px);
}
.sa-spec-more-btn:active { transform: translateY(0); box-shadow: none; }
.sa-spec-more-btn:focus-visible { outline: 2px solid var(--color-orange, #ED6E00); outline-offset: 3px; }

/* estado fechado: botao mais discreto, so contorno */
.sa-spec.is-expanded .sa-spec-more-btn {
    color: var(--color-primary, #00476c); background: transparent;
    box-shadow: inset 0 0 0 1px #cbd9e4;
}
.sa-spec.is-expanded .sa-spec-more-btn:hover {
    color: #ffffff; background: var(--color-primary, #00476c);
    box-shadow: 0 10px 20px -8px rgba(0, 71, 108, 0.45);
}

.sa-spec-more-icon { flex-shrink: 0; transition: transform 280ms ease-out; }
.sa-spec.is-expanded .sa-spec-more-icon { transform: rotate(180deg); }
.sa-spec .sa-spec-more-close { display: none; }
.sa-spec.is-expanded .sa-spec-more-open { display: none; }
.sa-spec.is-expanded .sa-spec-more-close { display: inline; }

@media (max-width: 640px) {
    .sa-spec-more-btn { min-width: 0; width: 100%; padding: 14px 18px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
    .sa-spec-scroll, .sa-spec-more-btn, .sa-spec-more-icon, .sa-spec-r-more { transition: none; }
    .sa-spec-more-btn:hover { transform: none; }
}

@media (max-width: 640px) {
    .sa-spec-table th, .sa-spec-table td { padding: 9px 10px; font-size: 13px; }
    .sa-spec-h-lbl { font-size: 13px; }
    .sa-spec { margin: 56px auto 36px; }
    .sa-spec-title { font-size: 24px; }
    .sa-spec-divider { margin: 14px 0 22px; }
}

/* ============================================================================
   Global-presence globe — sector filter pills + panel sector badges
   (replaces the old country search box). Colours = sector accents.
   ========================================================================== */
.sa-globe-filter { position: relative; margin-bottom: 10px; }
.sa-globe-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-family: 'Kanit', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding: 9px 12px; cursor: pointer; transition: background 0.15s; }
.sa-globe-dd-btn:hover { background: rgba(255,255,255,0.13); }
.sa-globe-dd-caret { font-size: 10px; opacity: 0.7; transition: transform 0.15s; }
.sa-globe-filter.is-open .sa-globe-dd-caret { transform: rotate(180deg); }
.sa-globe-dd-menu { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: rgba(0,12,24,0.97); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: none; }
.sa-globe-filter.is-open .sa-globe-dd-menu { display: block; }
.sa-globe-dd-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-family: 'Kanit', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.8); cursor: pointer; }
.sa-globe-dd-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sa-globe-dd-opt.is-active { color: #fff; background: rgba(0,168,232,0.18); }
.sa-globe-dd-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.sa-globe-panel-sectors { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.sa-globe-panel-sector { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: #fff; padding: 3px 9px; }

/* ==============================
   Content Rows  (component:/cms/contentRows/categoria_id/NN)
   Alternating image/text rows used by Custom Engineering, Integrated Solutions
   and Energy References. Accent is var(--color-orange), which the sector-*
   body class remaps, so this block is sector-agnostic.
   ============================== */

.sa-cr-row {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 56px 0;
    font-family: var(--font-family);
}

.sa-cr-row-flip {
    background: var(--color-bg-light);
}

@media (min-width: 768px)  { .sa-cr-row { padding: 80px 0; } }
@media (min-width: 1024px) { .sa-cr-row { padding: 96px 0; } }

/* Dotted texture, always behind the TEXT column */
.sa-cr-dots {
    position: absolute;
    top: 0;
    right: 0;
    width: 28%;
    height: 100%;
    pointer-events: none;
    opacity: 0.25;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
    background-size: 18px 18px;
}

.sa-cr-row-flip .sa-cr-dots {
    right: auto;
    left: 0;
}

.sa-cr-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 1024px) {
    .sa-cr-inner {
        padding: 0 var(--container-padding);
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }
    /* Flip by reordering, not by swapping the DOM: the text stays first in
       source order, so it is also first for a screen reader on every row. */
    .sa-cr-row-flip .sa-cr-media { order: 2; }
    .sa-cr-row-flip .sa-cr-body  { order: 1; }
}

/* A row with no image is full width rather than half-empty */
.sa-cr-row-noimg .sa-cr-inner { grid-template-columns: 1fr; }

.sa-cr-media {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

@media (min-width: 640px)  { .sa-cr-media { height: 320px; } }
@media (min-width: 768px)  { .sa-cr-media { height: 400px; } }

.sa-cr-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sa-cr-eyebrow {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-orange);
}

.sa-cr-title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-dark);
}

@media (min-width: 640px)  { .sa-cr-title { font-size: 30px; } }
@media (min-width: 768px)  { .sa-cr-title { font-size: 36px; } }

.sa-cr-subtitle {
    margin: 0 0 20px;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

/* Title sits directly on the body when there is no subtitle */
.sa-cr-title + .sa-cr-text { margin-top: 24px; }

.sa-cr-text {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text);
}

@media (min-width: 640px) { .sa-cr-text { font-size: 15px; } }

.sa-cr-text p { margin: 0 0 12px; }
.sa-cr-text p:last-child { margin-bottom: 0; }
.sa-cr-text strong { font-weight: 500; color: var(--color-dark); }

/* Bullets: the marker is drawn with a pseudo-element so the accent colour
   follows the sector without needing a class on every <li>. */
.sa-cr-text ul {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.sa-cr-text ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-primary);
}

.sa-cr-text ul li:last-child { margin-bottom: 0; }

/* The real Oil & Gas copy interleaves prose and lists (lead-in, bullets, more
   prose, another lead-in, more bullets), so a <p> can follow a </ul>. Without
   this they touch - `ul` has no bottom margin and `p` has no top margin. */
.sa-cr-text ul + p { margin-top: 16px; }
.sa-cr-text ul:last-child { margin-bottom: 0; }

.sa-cr-text ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-orange);
}

/* Energy References writes bullets as "Label: value" - the label is wrapped in
   <strong> by the seed so the two halves read apart. */
.sa-cr-text ul li strong {
    font-weight: 400;
    color: var(--color-dark);
}

.sa-cr-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    margin-top: 24px;
    padding: 0 32px;
    background: var(--color-orange);
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sa-cr-cta:hover { opacity: 0.85; color: #ffffff; }

/* ==============================
   Card Grid  (component:/cms/cardGrid/categoria_id/NN)
   Centred heading + card grid. Used by Standards & Certifications on
   Integrated Solutions. Accent follows the sector body class.
   ============================== */

.sa-cg {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 56px 0;
    font-family: var(--font-family);
}

@media (min-width: 768px)  { .sa-cg { padding: 80px 0; } }
@media (min-width: 1024px) { .sa-cg { padding: 96px 0; } }

.sa-cg-dots {
    position: absolute;
    top: 0;
    right: 0;
    width: 28%;
    height: 100%;
    pointer-events: none;
    opacity: 0.25;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
    background-size: 18px 18px;
}

.sa-cg-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) { .sa-cg-inner { padding: 0 var(--container-padding); } }

.sa-cg-head {
    text-align: center;
    margin-bottom: 48px;
}

@media (min-width: 768px) { .sa-cg-head { margin-bottom: 64px; } }

.sa-cg-eyebrow {
    margin: 0 0 12px;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-orange);
}

.sa-cg-title {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-dark);
}

@media (min-width: 640px) { .sa-cg-title { font-size: 34px; } }
@media (min-width: 768px) { .sa-cg-title { font-size: 42px; } }

.sa-cg-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin: 20px auto 0;
    background: var(--color-orange);
}

/* 1px gap on a grey ground draws the hairlines between cards without borders,
   which would double up where two cards meet. */
.sa-cg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: #f1f5f9;
}

@media (min-width: 640px)  { .sa-cg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sa-cg-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-cg-card {
    background: #ffffff;
    padding: 24px;
    transition: background 0.2s ease;
}

@media (min-width: 768px) { .sa-cg-card { padding: 32px; } }

.sa-cg-card:hover { background: var(--color-bg-light); }

.sa-cg-card-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-primary);
    transition: color 0.2s ease;
}

@media (min-width: 768px) { .sa-cg-card-title { font-size: 20px; } }

.sa-cg-card:hover .sa-cg-card-title { color: var(--color-orange); }

.sa-cg-card-desc {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-text-light);
}

@media (min-width: 768px) { .sa-cg-card-desc { font-size: 14px; } }

/* ==========================================================================
   NEWS / CASE-STUDY DETAIL  (.sa-nd-*)
   views/Noticias/templates/new-detail-template-2.tpl
   Ported from the prototype's NewsDetailPage.tsx. Tailwind breakpoints map
   1:1 onto the scale already used here: sm 640 / md 768 / lg 1024 / xl 1280.
   ========================================================================== */

.sa-nd-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
    box-sizing: border-box;
}
/* 16px -> 50px at 1024, matching .sa-cr-inner / .sa-cg-inner / .sa-header-inner
   so this page's gutters line up with the header and every other section. The
   prototype's SectionContainer uses px-4 sm:px-8 md:px-16; its own header sits
   at a fixed left-[20px] sm:left-[50px], so the two never aligned there either
   — site consistency wins. */
@media (min-width: 1024px) { .sa-nd-inner { padding: 0 var(--container-padding); } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.sa-nd-hero {
    position: relative;
    width: 100%;
    min-height: 400px;
    height: 480px;
    background: var(--color-dark);
    overflow: hidden;
    font-family: var(--font-family);
}
.sa-nd-hero-bg { position: absolute; inset: 0; }
.sa-nd-hero-bg img,
.sa-nd-hero-bg picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-nd-hero-bg img { opacity: 0.30; }
.sa-nd-hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
                rgba(0, 21, 36, 0.95) 0%,
                rgba(0, 21, 36, 0.80) 50%,
                rgba(0, 21, 36, 0.60) 100%);
}
.sa-nd-hero-inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.sa-nd-hero-content {
    max-width: 760px;
    padding-top: 80px;   /* clears the fixed TopHeader */
}

.sa-nd-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.sa-nd-crumb a,
.sa-nd-crumb span {
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.sa-nd-crumb a { color: var(--color-primary); text-decoration: none; transition: color 150ms ease; }
.sa-nd-crumb a:hover { color: #ffffff; }
.sa-nd-crumb span {
    color: rgba(255, 255, 255, 0.6);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sa-nd-crumb svg { width: 12px; height: 12px; color: var(--color-primary); flex-shrink: 0; }

.sa-nd-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sa-nd-chip {
    background: var(--color-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 4px 12px;
}
.sa-nd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 300;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.sa-nd-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }

.sa-nd-title {
    margin: 0;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
    overflow-wrap: break-word;
}
@media (min-width: 640px) { .sa-nd-title { font-size: 36px; } }
@media (min-width: 768px) { .sa-nd-title { font-size: 52px; } }

/* ── Body ───────────────────────────────────────────────────────────────── */
.sa-nd-body {
    background: #ffffff;
    padding: 56px 0;
    font-family: var(--font-family);
}
@media (min-width: 768px) { .sa-nd-body { padding: 80px 0; } }

.sa-nd-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1280px) {
    .sa-nd-grid { grid-template-columns: 1fr 340px; gap: 64px; }
}
.sa-nd-main { min-width: 0; }   /* lets long words/tables shrink instead of overflowing */

.sa-nd-lead {
    margin: 0 0 40px;
    padding-left: 24px;
    border-left: 4px solid var(--color-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    color: #374151;
}
@media (min-width: 768px) { .sa-nd-lead { font-size: 20px; } }

.sa-nd-figure {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
    overflow: hidden;
    aspect-ratio: 767 / 420;
}
.sa-nd-figure img,
.sa-nd-figure picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-nd-figure-grad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.40), transparent);
    pointer-events: none;
}

/* RTE body — texto_formatado */
.sa-nd-text { font-weight: 300; font-size: 16px; line-height: 1.85; color: #4b5563; }
.sa-nd-text > *:first-child { margin-top: 0; }
.sa-nd-text > *:last-child  { margin-bottom: 0; }
.sa-nd-text p { margin: 0 0 28px; }
.sa-nd-text h2,
.sa-nd-text h3,
.sa-nd-text h4 {
    margin: 44px 0 16px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-dark);
}
.sa-nd-text h2 { font-size: 26px; }
.sa-nd-text h3 { font-size: 21px; }
.sa-nd-text h4 { font-size: 17px; }
.sa-nd-text ul,
.sa-nd-text ol { margin: 0 0 28px; padding-left: 22px; }
.sa-nd-text li { margin-bottom: 10px; }
.sa-nd-text a { color: var(--color-primary); text-decoration: underline; }
.sa-nd-text a:hover { color: var(--color-dark); }
.sa-nd-text strong { font-weight: 500; color: var(--color-dark); }
.sa-nd-text img { max-width: 100%; height: auto; display: block; margin: 32px auto; }
.sa-nd-text blockquote {
    margin: 40px 0;
    padding: 16px 24px 16px 32px;
    border-left: 4px solid var(--color-orange);
    background: #f8fafc;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
    font-style: italic;
    color: var(--color-dark);
}
@media (min-width: 768px) { .sa-nd-text blockquote { font-size: 20px; } }
.sa-nd-text blockquote p:last-child { margin-bottom: 0; }
.sa-nd-text blockquote cite {
    display: block;
    margin-top: 16px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-primary);
}
/* Wide content must scroll inside the article, never widen the page */
.sa-nd-text table { width: 100%; border-collapse: collapse; margin: 0 0 28px; }
.sa-nd-text .sa-nd-scroll,
.sa-nd-text pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Share */
.sa-nd-share {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}
.sa-nd-share-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-text-muted);
}
.sa-nd-share-label svg { width: 13px; height: 13px; }
.sa-nd-share-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    transition: color 150ms ease, border-color 150ms ease;
}
.sa-nd-share-btn svg { width: 15px; height: 15px; }
.sa-nd-share-btn--li:hover { color: #0077b5; border-color: #0077b5; }
.sa-nd-share-btn--tw:hover { color: #1da1f2; border-color: #1da1f2; }
.sa-nd-share-btn--fb:hover { color: #1877f2; border-color: #1877f2; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sa-nd-side { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
@media (min-width: 1280px) {
    .sa-nd-side { position: sticky; top: 110px; align-self: start; }
}

.sa-nd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap 150ms ease;
}
.sa-nd-back:hover { gap: 12px; color: var(--color-dark); }
.sa-nd-back svg { width: 13px; height: 13px; flex-shrink: 0; }

.sa-nd-card { background: #f8fafc; padding: 28px; }
.sa-nd-card-title {
    margin: 0 0 20px;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--color-dark);
}
.sa-nd-card-rows { display: flex; flex-direction: column; gap: 14px; }
.sa-nd-card-row { display: flex; align-items: flex-start; gap: 12px; }
.sa-nd-card-row svg { width: 13px; height: 13px; margin-top: 3px; color: var(--color-primary); flex-shrink: 0; }
.sa-nd-card-k {
    margin: 0 0 2px;
    font-weight: 300;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}
.sa-nd-card-v { margin: 0; font-weight: 500; font-size: 13px; color: var(--color-dark); }
/* Linha do cartao que e' um link -- hoje so' o "Ver no LinkedIn" (4 Set 2026).
   Herda o desenho das outras linhas; so' acrescenta o que uma linha estatica
   nao precisa: cor de link ao passar, e a setinha de "abre noutro lado". */
.sa-nd-card-row--link { text-decoration: none; color: inherit; transition: opacity .15s ease; }
.sa-nd-card-row--link:hover .sa-nd-card-v,
.sa-nd-card-row--link:focus-visible .sa-nd-card-v { color: var(--color-primary); }
.sa-nd-card-row--link:hover svg { opacity: .75; }
.sa-nd-card-ext { margin-left: 5px; font-size: 11px; opacity: .6; }

.sa-nd-cta { background: var(--color-primary); padding: 28px; }
.sa-nd-cta-title {
    margin: 0 0 12px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #ffffff;
}
.sa-nd-cta-text {
    margin: 0 0 24px;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}
.sa-nd-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 24px;
    background: #ffffff;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    transition: background 150ms ease;
}
.sa-nd-cta-btn:hover { background: #f0f4f8; color: var(--color-primary); }
.sa-nd-cta-btn svg { width: 12px; height: 12px; }

/* ── Related ────────────────────────────────────────────────────────────── */
.sa-nd-related {
    background: #f8fafc;
    padding: 56px 0;
    font-family: var(--font-family);
}
@media (min-width: 768px) { .sa-nd-related { padding: 80px 0; } }

.sa-nd-related-title {
    margin: 0 0 40px;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
}
@media (min-width: 768px) { .sa-nd-related-title { font-size: 28px; margin-bottom: 48px; } }
.sa-nd-related-title span { font-weight: 300; }

.sa-nd-related-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .sa-nd-related-grid { grid-template-columns: repeat(3, 1fr); } }

.sa-nd-rel { display: block; background: #ffffff; text-decoration: none; }
.sa-nd-rel-img { position: relative; width: 100%; overflow: hidden; aspect-ratio: 336 / 226; }
.sa-nd-rel-img img,
.sa-nd-rel-img picture {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 700ms ease;
}
.sa-nd-rel:hover .sa-nd-rel-img img { transform: scale(1.05); }
.sa-nd-rel-grad {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 21, 36, 0.20), transparent);
    pointer-events: none;
}
.sa-nd-rel-body { padding: 28px; }
.sa-nd-rel-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sa-nd-rel-cat {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 500; font-size: 10px; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--color-primary);
}
.sa-nd-rel-cat svg { width: 10px; height: 10px; }
.sa-nd-rel-date {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 300; font-size: 11px; color: var(--color-text-muted);
}
.sa-nd-rel-date svg { width: 11px; height: 11px; }
.sa-nd-rel-title {
    margin: 0 0 12px;
    font-weight: 500; font-size: 18px; line-height: 1.2;
    text-transform: uppercase; color: var(--color-dark);
}
.sa-nd-rel-desc {
    margin: 0 0 20px;
    font-weight: 300; font-size: 14px; line-height: 1.6; color: #6b7280;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sa-nd-rel-more {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 300; font-size: 12px; text-transform: uppercase;
    letter-spacing: 1px; color: var(--color-primary);
    transition: gap 150ms ease;
}
.sa-nd-rel:hover .sa-nd-rel-more { gap: 12px; }
.sa-nd-rel-more svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
    .sa-nd-rel-img img { transition: none; }
    .sa-nd-rel:hover .sa-nd-rel-img img { transform: none; }
}

/* ==========================================================================
   FOOTER REDIRECT ANCHOR TARGETS
   The empty footer pages now redirect into these sections via
   cms_pagina.redireccionar (sql/footer_redirects.sql). Same 80px offset the
   existing targets use (.sa-svc-maintenance / -rental / -rnd), so a heading
   never lands flush against the top of the viewport.
   ========================================================================== */
.sa-co,                     /* #company        <- footer "Company"            */
.sa-gs,                     /* #global-presence<- footer "Global Presence"    */
.sa-cert,                   /* #certifications <- footer "Certifications"     */
#catalogues,                /* <- footer "Catalogos de Produtos"              */
#white-papers {             /* <- footer "White Papers"                       */
    scroll-margin-top: 80px;
}

/* Formulario de contacto: alvo do #saContactsForm, que passou do <form> para
   o embrulho em section-contacts-form.tpl (ver o comentario la).

   Aqui o valor nao e fixo, ao contrario dos de cima, porque este alvo tem
   sobretitulo + um titulo de 52px por cima do primeiro campo. Num portatil
   baixo ou num telemovel deitado, uma margem fixa empurrava o formulario todo
   para fora do ecra.

       clamp(32px, 11.85vh, calc(8 * var(--esc, 16px)))

   11.85vh da 128px numa janela de 1080 de altura (128/1080). Comecou nos 80,
   que e' a convencao dos outros alvos, mas ali o "Direct Contact" ficava
   encostado ao topo -- a seccao arranca mesmo na aresta e le-se mal. Os 128
   deixam respirar sem empurrar o formulario para baixo de mais.

   Abaixo disso encolhe com a janela, e o minimo de 32px evita que desapareca
   num telemovel deitado. O tecto vai em --esc para acompanhar os ecras
   grandes (16px -> 128 ate aos 1920, 20px -> 160 dos 2560 para cima). O
   fallback de 16px no var() e' preciso porque o --esc so existe a partir dos
   1920 -- sem ele a declaracao ficava invalida no desktop e o scroll-margin
   caia a zero. */
.sa-contacts-form-anchor {
    scroll-margin-top: clamp(32px, 11.85vh, calc(8 * var(--esc, 16px)));
}
/* ==========================================================================
   LEGAL PAGES  (Privacy Policy / Cookies Policy / Fundings)
   Paginas #206-208, criadas por sql/footer_legal_paginas.sql e ligadas na
   linha do copyright do rodape.

   Porque tem faixa azul em cima: o logotipo do cabecalho e sempre o PNG
   branco (logo-sysadvance-white.png) e o .sa-header e absolute por cima do
   conteudo. Numa pagina de fundo branco o logotipo desaparecia. A faixa
   .sa-legal-hero resolve isso e ao mesmo tempo poe estas paginas na mesma
   linguagem das outras, que abrem todas com um hero escuro.

   O HTML vive no RTE da pagina, para o conteudo poder ser editado no
   backoffice sem tocar em codigo.
   ========================================================================== */

.sa-legal {
    width: 100%;
    background: #ffffff;
    font-family: var(--font-family);
    color: var(--color-text);
}

.sa-legal-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding-mobile);
}

@media (min-width: 1024px) {
    .sa-legal-inner {
        padding: 0 var(--container-padding);
    }
}

/* --- faixa do titulo ------------------------------------------------------ */
/* 130px de topo = 110px de cabecalho no telemovel (30 + logo 50 + 30) com
   folga; 180px no desktop, onde o cabecalho mede 136px (30 + logo 76 + 30). */

.sa-legal-hero {
    background: var(--color-primary);
    padding: 130px 0 44px;
}

@media (min-width: 1024px) {
    .sa-legal-hero {
        padding: 180px 0 64px;
    }
}

.sa-legal-title {
    font-weight: 500;
    font-size: 36px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

@media (min-width: 1024px) {
    .sa-legal-title {
        font-size: 56px;
    }
}

/* --- corpo do texto ------------------------------------------------------- */
/* max-width em ch limita a linha a ~90 caracteres. Sem isto, no ecra grande
   o texto corrido atravessava os 1662px do container e ficava ilegivel. */

.sa-legal-body {
    padding: 56px 0 96px;
}

@media (min-width: 1024px) {
    .sa-legal-body {
        padding: 80px 0 140px;
    }
}

.sa-legal-body .sa-legal-inner {
    max-width: 90ch;
    margin-left: auto;
    margin-right: auto;
}

.sa-legal-heading {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin: 48px 0 16px;
}

.sa-legal-heading:first-child {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .sa-legal-heading {
        font-size: 24px;
    }
}

.sa-legal-body p {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 20px;
}

.sa-legal-list {
    margin: 0 0 24px;
    padding-left: 22px;
    list-style: disc;
}

.sa-legal-list li {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 6px;
}

.sa-legal-list li::marker {
    color: var(--color-orange);
}

/* Especificidade: o global `a:hover { color: #f0f0f0 }` ganha a `.sa-legal a`
   (0,1,1 contra 0,1,1 mas vem depois no ficheiro), por isso o hover e escrito
   aqui com o mesmo peso e mais abaixo -- e o mesmo padrao dos outros patches
   deste ficheiro. */

.sa-legal-body a {
    color: var(--color-orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sa-legal-body a:hover,
.sa-legal-body a:focus {
    color: var(--color-primary);
}
/* ==========================================================================
   ECRAS GRANDES  (> 1920px)

   Baseado na versao que o designer fez para 2K/4K (____figma sysadvance
   prototype v5). A tecnica dele nao da para copiar: ele converteu o prototipo
   todo para rem e faz crescer o font-size do html, o que arrasta tudo de uma
   vez. O nosso custom.css tem 3152 regras, todas em px -- converter era enorme
   e arriscado. Reproduzimos o mesmo EFEITO com media queries.

   --esc e o equivalente ao "root" dele. A formula e a mesma:
       @1920  ->  4 + 0.625*19.20  =  16px   (fica igual ao que ja e)
       @2560  ->  4 + 0.625*25.60  =  20px   (+25%)
       @3200  ->  4 + 0.625*32.00  =  24px   (tecto, +50%)

   O TECTO SUBIU DE 20 PARA 24 (2 Set 2026). Estava em 20 porque o prototipo
   do designer parava nos 2560. Consequencia: dos 2560 para cima a letra
   congelava mas a banda continuava a crescer ate aos 2800, e o texto ficava
   26% mais pequeno em relacao ao desenho -- e o que o cliente ve num 4K.

   Porque 24 e nao outro numero qualquer: um 4K de 32 polegadas tem ~138 DPI
   e um 1080p de 24 tem ~92. A razao e 1.5, logo 16 * 1.5 = 24 e o valor que
   mantem a letra do MESMO TAMANHO FISICO nos dois ecras.

   NAO MEXE EM NADA ATE AOS 2560: a recta so chega aos 20px nos 2560, por
   isso o tecto antigo nunca limitava nada abaixo disso. Verificado valor a
   valor (1920, 2048, 2200, 2560). Dos 3200 para cima trava nos 24.
   Assim qualquer medida se escreve calc(N * var(--esc)) com N = valor/16, e
   aos 1920 devolve exactamente o valor de hoje -- sem salto nenhum.

   ATENCAO ao 4px: no prototipo dele aquilo esta escrito 0.25rem, porque em
   Tailwind o root e 16px. AQUI NAO E. O bootstrap-3 poe html{font-size:10px}
   (media/css/1466269526-*.css), por isso 1rem = 10px e 0.25rem = 2.5px.
   Copiar o 0.25rem dava 18.5px aos 2560 em vez de 20 -- a escala subia devagar
   de mais e o h1 ficava nos 125px em vez de 135. Fica em px literais, que nao
   dependem do root.

   DESKTOP CONGELADO. Duas notas sobre isso:

   1. A media query comeca nos 1920, e nos 1920 tudo isto devolve os valores
      actuais. Abaixo de 1920 nem sequer se aplica.

   2. A banda dele e max(1662px, min(92vw, 2800px)). Aos 1920 isso da 1766px,
      ou seja +104px face a hoje -- um salto num tamanho de ecra muito comum.
      O comentario dele diz que aos 1920 fica igual, mas 92vw passa os 1662
      logo aos 1807px. Usamos 86.56vw (= 1662/1920), que da exactamente 1662
      aos 1920 e cresce a partir dai. Mesmo tecto de 2800px que ele.

   O QUE NAO ESTA AQUI, DE PROPOSITO: a v5 unifica todas as larguras em 1662
   (o .sa-wcu-inner de 1920 e o .sa-numbers-inner de 1536 incluidos). E uma
   alteracao visivel no desktop e fica para decisao separada. Aqui os dois
   mantem a proporcao que tem hoje, e so acima de 1920.
   ========================================================================== */

@media (min-width: 1920px) {
    :root {
        --esc: clamp(16px, calc(4px + 0.625vw), 24px);
        --container-max: max(1662px, min(86.56vw, 2800px));
    }

    /* as duas larguras propositadamente diferentes acompanham a banda */
    .sa-wcu-inner     { max-width: calc(var(--container-max) * 1.155); }
    .sa-numbers-inner { max-width: calc(var(--container-max) * 0.924); }

    /* --- tipografia: N = tamanho de hoje / 16 --------------------------- */
    .sa-hero-headline      { font-size: calc(6.75 * var(--esc)); }   /* 108 */
    .sa-wcu-title-light    { font-size: calc(2.125 * var(--esc)); }  /*  34 */
    .sa-wcu-title-bold,
    .sa-wcu-title-primary  { font-size: calc(3.625 * var(--esc)); }  /*  58 */
    .sa-sim-title-white,
    .sa-sim-title-accent   { font-size: calc(3.5 * var(--esc)); }    /*  56 */
    .sa-ts-title-light,
    .sa-ts-title-bold      { font-size: calc(4.75 * var(--esc)); }   /*  76 (era 5.5 = 88; 25 Set 2026) */
    .sa-numbers-value      { font-size: calc(3.75 * var(--esc)); }   /*  60 */
    .sa-globe-title,
    .sa-cards-title        { font-size: calc(3 * var(--esc)); }      /*  48 */
    .sa-innov-title        { font-size: calc(2.5 * var(--esc)); }    /*  40 */

    /* o min(...,7vh) fica: e o que impede o titulo de rebentar a altura do
       cartao num ecra largo mas baixo (2560x1080, por exemplo). */
    .sa-sectors-title      { font-size: min(calc(4 * var(--esc)), 7vh); }  /* 64 */

    /* --- corpo de leitura ---------------------------------------------- */
    .sa-hero-caption       { font-size: calc(0.875 * var(--esc)); }  /*  14 */
    .sa-sectors-desc,
    .sa-sectors-subdesc    { font-size: calc(1 * var(--esc)); }      /*  16 */
    .sa-globe-subtitle     { font-size: calc(1.125 * var(--esc)); }  /*  18 */

    /* --- Paginas de sector e de produto ---------------------------------
       .sa-sh-*   hero das paginas de seccao (industrial, medical, energy,
                  services, resources)
       .sa-ph-*   hero das paginas de produto (nitrogen, oxygen, ...)
       .sa-intro / -eq / -adv / -stats / -tt / -video / -faq / -cta
                  as seccoes que compoem essas paginas

       Todos os N sao o valor de hoje a dividir por 16, por isso aos 1920
       (--esc = 16px) devolvem exactamente o que ja la esta. */

    /* heros */
    .sa-sh-title           { font-size: calc(4.5 * var(--esc)); }     /*  72 */
    /* NAO por font-size no .sa-sh-content: e o CONTENTOR do hero (max-width,
       padding) e nao declara tamanho nenhum. Os 44px que eu tinha lido aqui
       sao na verdade de `body.page-65 .sa-sh-title`, uma regra so da pagina
       Services. Posto no contentor, mudava por heranca todo o texto do hero
       que nao tenha tamanho proprio -- a verificacao apanhou isso aos 1920
       (14px -> 44px). Fica no sitio certo: */
    body.page-65 .sa-sh-title { font-size: calc(2.75 * var(--esc)); } /*  44 */
    .sa-sh-desc            { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-sh-breadcrumb      { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-sh-btn             { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-ph-title           { font-size: calc(4.5 * var(--esc)); }     /*  72 */
    .sa-ph-desc            { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-ph-breadcrumb      { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-ph-breadcrumb-sep  { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-ph-btn-primary,
    .sa-ph-btn-outline     { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-ph-bar-link        { font-size: calc(0.75 * var(--esc)); }    /*  12 */

    /* intro */
    .sa-intro-title        { font-size: calc(2.75 * var(--esc)); }    /*  44 */
    .sa-intro-overline     { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-intro-text-1       { font-size: calc(1.0625 * var(--esc)); }  /*  17 */
    .sa-intro-text-2       { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-intro-cta          { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-intro-pillar-num   { font-size: calc(2.5 * var(--esc)); }     /*  40 */
    .sa-intro-pillar-title { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-intro-pillar-desc  { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* selector de equipamento */
    .sa-eq-title           { font-size: calc(2 * var(--esc)); }       /*  32 */
    .sa-eq-subtitle        { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-eq-card-title      { font-size: calc(1.25 * var(--esc)); }    /*  20 */
    .sa-eq-card-desc,
    .sa-eq-card-link       { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* vantagens */
    .sa-adv-title          { font-size: calc(2 * var(--esc)); }       /*  32 */
    .sa-adv-card-title     { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-adv-card-desc      { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* numeros */
    .sa-stats-val          { font-size: calc(3.5 * var(--esc)); }     /*  56 */
    .sa-stats-label        { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* testemunhos */
    .sa-tt-title           { font-size: calc(1.875 * var(--esc)); }   /*  30 */
    .sa-tt-desc,
    .sa-tt-quote           { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-tt-author          { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-tt-role            { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-tt-cta             { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* video e faq */
    .sa-video-title        { font-size: calc(1.875 * var(--esc)); }   /*  30 */
    .sa-faq-title          { font-size: calc(1.875 * var(--esc)); }   /*  30 */
    .sa-faq-question-text  { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-faq-answer-inner   { font-size: calc(0.9375 * var(--esc)); }  /*  15 */

    /* cta final */
    .sa-cta-engineer-title { font-size: calc(1.75 * var(--esc)); }    /*  28 */
    .sa-cta-engineer-desc  { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-cta-engineer-badge-name { font-size: calc(0.8125 * var(--esc)); } /* 13 */
    .sa-cta-engineer-badge-spec { font-size: calc(0.75 * var(--esc)); }   /* 12 */
    /* Nao vale a pena escalar o min-height do .sa-cta-engineer: medido aos
       2560 o cartao ja mede 606px pelo proprio conteudo (a tipografia cresceu),
       muito acima dos 360px do minimo. Um calc() ali era uma regra morta.
       Quem salva a cabeca do comercial e o object-position: center top, la em
       cima na regra base -- ver o comentario em .sa-cta-engineer-photo img. */
    .sa-cta-card-title     { font-size: calc(1.375 * var(--esc)); }   /*  22 */
    .sa-cta-card-desc      { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-cta-link           { font-size: calc(0.8125 * var(--esc)); }  /*  13 */

    /* --- Restantes paginas ----------------------------------------------
       services, resources, news (lista e detalhe), case studies, carreira,
       contactos, feiras, paginas legais e login.

       Os N sairam de MEDICAO, nao de leitura do ficheiro: abri cada pagina
       aos 1920 e li o font-size computado de cada elemento que tem texto
       proprio. Foi assim por causa do erro do .sa-sh-content -- ler o CSS a
       olho leva a atribuir a um contentor um tamanho que era de um filho, e
       depois a heranca estraga tudo o que la esta dentro.

       Pelo mesmo motivo as regras vao sempre na FOLHA (o elemento que mostra
       o texto) e nunca no contentor, mesmo quando quem declara o tamanho e o
       contentor. Da o mesmo aos 1920 e nao arrasta irmaos.

       Nao levam regra os sufixos -bold / -light dos titulos: so mudam o
       font-weight e herdam o tamanho. Escrever neles achatava os casos em
       que o mesmo par aparece com dois tamanhos (o titulo de seccao dos
       services e 44 mas o do CTA e 36; nos contactos e 56 contra 52). */

    /* services */
    .sa-svc-section-title  { font-size: calc(2.75 * var(--esc)); }    /*  44 */
    .sa-svc-cta-title      { font-size: calc(2.25 * var(--esc)); }    /*  36 */
    .sa-svc-cta-desc       { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-svc-subtitle       { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-svc-overline       { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-svc-paragraph      { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-svc-btn            { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-svc-activity-title { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-svc-activity-body  { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-svc-maintenance-image-badge   { font-size: calc(0.625 * var(--esc)); } /* 10 */
    .sa-svc-maintenance-image-tagline { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-svc-overview-card-title { font-size: calc(0.75 * var(--esc)); }   /* 12 */
    .sa-svc-overview-card-lock  { font-size: calc(0.5625 * var(--esc)); } /*  9 */
    .sa-svc-plan-title     { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-svc-plan-desc      { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-svc-rental-benefit { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-svc-pillar-num     { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    /* o titulo do pilar e um <p> dentro do .sa-svc-pillar, e a regra
       `.sa-svc-pillar p { font-size: 14px }` (0,1,1) ganha ao
       `.sa-svc-pillar-title { font-size: 15px }` (0,1,0) que esta la em cima.
       Ou seja: os 15px nunca chegam a aparecer, o titulo sai a 14 como o
       corpo. Isso e um bug do CSS base, anterior a isto, e nao se corrige
       aqui -- mudava o desktop. Escala-se o selector que MANDA, senao a
       regra nascia morta pela mesma razao. */
    .sa-svc-pillar p       { font-size: calc(0.875 * var(--esc)); }   /*  14 */

    /* resources. Os 14px dos titulos de cartao/FAQ/CTA nao sao engano: e o
       estilo de etiqueta pequena (peso 500, maiusculas, letter-spacing) que
       se repete pelo site todo. Confirmei no CSS antes de escalar. */
    .sa-res-title          { font-size: calc(3 * var(--esc)); }       /*  48 */
    .sa-res-overline       { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-res-card-title     { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-res-card-desc      { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-res-card-cta       { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-res-card-lock      { font-size: calc(0.5625 * var(--esc)); }  /*   9 */
    .sa-res-cta-title      { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-res-cta-desc       { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-res-cta-btn        { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-res-faq-title      { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-res-faq-pill       { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-res-faq-qtext      { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-res-faq-count      { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-res-faq-more-btn   { font-size: calc(0.6875 * var(--esc)); }  /*  11 */

    /* simulador: o -desc, -step-title e -step-desc ja estao no bloco dos
       1921, junto com a mudanca de estrutura que lhes fecha o buraco */
    .sa-sim-q              { font-size: calc(1.25 * var(--esc)); }    /*  20 */
    .sa-sim-q-n            { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-sim-step-num       { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-sim-next,
    .sa-sim-back           { font-size: calc(0.8125 * var(--esc)); }  /*  13 */

    /* news: lista */
    .sa-news-hero-title    { font-size: calc(5 * var(--esc)); }       /*  80 */
    .sa-news-hero-tagline  { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-news-featured-title { font-size: calc(2.25 * var(--esc)); }   /*  36 */
    .sa-news-featured-desc { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-news-featured-cat  { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-news-featured-date { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-news-card-title    { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-news-card-desc     { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-news-card-cat      { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-news-card-date     { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-news-grid-pill     { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-news-grid-loadmore { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    /* aqui quem declara o tamanho e um <h3> sem classe; as duas metades do
       titulo herdam-no. Sem classe nao ha selector, por isso a regra vai nas
       folhas -- da o mesmo resultado. */
    .sa-news-newsletter-heading-light,
    .sa-news-newsletter-heading-bold { font-size: calc(2.5 * var(--esc)); } /* 40 */

    /* news: detalhe */
    .sa-nd-title           { font-size: calc(3.25 * var(--esc)); }    /*  52 */
    .sa-nd-lead            { font-size: calc(1.25 * var(--esc)); }    /*  20 */
    .sa-nd-back            { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-nd-meta-item       { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-nd-share-label     { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-nd-text            { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-nd-card-title      { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-nd-card-k          { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-nd-card-v          { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-nd-cta-title       { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-nd-cta-text        { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-nd-cta-btn         { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-nd-related-title   { font-size: calc(1.75 * var(--esc)); }    /*  28 */
    .sa-nd-rel-title       { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-nd-rel-desc        { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-nd-rel-cat         { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-nd-rel-date        { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-nd-rel-more        { font-size: calc(0.75 * var(--esc)); }    /*  12 */

    /* case studies */
    .sa-cs-featured-title  { font-size: calc(2.25 * var(--esc)); }    /*  36 */
    .sa-cs-featured-desc   { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-cs-featured-badge  { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-cs-card-title      { font-size: calc(1.125 * var(--esc)); }   /*  18 */
    .sa-cs-card-desc       { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    /* mesmo caso do globo: medi 11 porque a pagina so mostra as etiquetas de
       local, mas a classe nua vale 10 (as de sector). Cada uma com o seu. */
    .sa-cs-chip            { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-cs-chip--location  { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-cs-filter          { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-cs-cta-title       { font-size: calc(2.5 * var(--esc)); }     /*  40 */
    .sa-cs-cta-desc        { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-cs-cta-btn         { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    .sa-cs-btn             { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
    /* o --sm tem de vir depois: mesmo peso de especificidade */
    .sa-cs-btn--sm         { font-size: calc(0.6875 * var(--esc)); }  /*  11 */

    /* carreira */
    .sa-carreira-hero-title    { font-size: calc(5 * var(--esc)); }      /*  80 */
    .sa-carreira-hero-tagline  { font-size: calc(1.125 * var(--esc)); }  /*  18 */
    .sa-carreira-section-title { font-size: calc(3.25 * var(--esc)); }   /*  52 */
    .sa-carreira-overline      { font-size: calc(0.75 * var(--esc)); }   /*  12 */
    .sa-carreira-perks-intro   { font-size: calc(1 * var(--esc)); }      /*  16 */
    .sa-carreira-perk-title    { font-size: calc(0.875 * var(--esc)); }  /*  14 */
    .sa-carreira-perk-desc     { font-size: calc(0.8125 * var(--esc)); } /*  13 */
    .sa-carreira-perks-stat-overline  { font-size: calc(0.6875 * var(--esc)); } /* 11 */
    .sa-carreira-perks-stat-value     { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-carreira-positions-stat-label { font-size: calc(0.6875 * var(--esc)); } /* 11 */
    .sa-carreira-positions-stat-value { font-size: calc(1.75 * var(--esc)); }   /* 28 */
    .sa-carreira-job-title     { font-size: calc(1.25 * var(--esc)); }   /*  20 */
    .sa-carreira-job-teaser    { font-size: calc(0.875 * var(--esc)); }  /*  14 */
    .sa-carreira-job-dep       { font-size: calc(0.625 * var(--esc)); }  /*  10 */
    .sa-carreira-job-meta-pill { font-size: calc(0.625 * var(--esc)); }  /*  10 */
    .sa-carreira-spontaneous-desc       { font-size: calc(1 * var(--esc)); }      /* 16 */
    .sa-carreira-spontaneous-card-label { font-size: calc(0.8125 * var(--esc)); } /* 13 */
    .sa-carreira-spontaneous-card-sub   { font-size: calc(0.75 * var(--esc)); }   /* 12 */
    .sa-carreira-file-text     { font-size: calc(0.8125 * var(--esc)); } /*  13 */

    /* contactos */
    .sa-contacts-hero-title    { font-size: calc(5 * var(--esc)); }      /*  80 */
    .sa-contacts-hero-tagline  { font-size: calc(1.125 * var(--esc)); }  /*  18 */
    .sa-contacts-section-title { font-size: calc(3.5 * var(--esc)); }    /*  56 */
    /* o titulo dentro do formulario e mais pequeno; a regra base ja e
       assim, aqui so se acompanha com o mesmo selector */
    .sa-contacts-form-left .sa-contacts-section-title { font-size: calc(3.25 * var(--esc)); } /* 52 */
    .sa-contacts-overline      { font-size: calc(0.75 * var(--esc)); }   /*  12 */
    .sa-contacts-quicklink-label { font-size: calc(0.6875 * var(--esc)); } /* 11 */
    .sa-contacts-quicklink-value { font-size: calc(0.9375 * var(--esc)); } /* 15 */
    .sa-contacts-type-title    { font-size: calc(1.125 * var(--esc)); }  /*  18 */
    .sa-contacts-type-subtitle { font-size: calc(0.6875 * var(--esc)); } /*  11 */
    .sa-contacts-type-desc     { font-size: calc(0.875 * var(--esc)); }  /*  14 */
    .sa-contacts-office-name   { font-size: calc(0.9375 * var(--esc)); } /*  15 */
    .sa-contacts-office-country { font-size: calc(0.6875 * var(--esc)); } /* 11 */
    .sa-contacts-office-flag   { font-size: calc(0.875 * var(--esc)); }  /*  14 */
    .sa-contacts-office-row-city { font-size: calc(0.8125 * var(--esc)); } /* 13 */
    .sa-contacts-hq-caption-overline { font-size: calc(0.6875 * var(--esc)); } /* 11 */
    .sa-contacts-hq-caption-place    { font-size: calc(1.125 * var(--esc)); }  /* 18 */

    /* globo. O -title e o -subtitle ja estavam la em cima (aparecem na
       homepage); estes quatro so aparecem no painel lateral, que se abre
       nos contactos e na pagina Sysadvance. */
    /* dois tamanhos, nao um: a lista de paises do painel esta a 12.5 e as
       pastilhas por baixo do globo a 12. Medi so a pagina de contactos, que
       mostra as pastilhas, e escrevi 12 na classe nua -- na homepage, onde o
       painel esta aberto, isso baixava a lista de 12.5 para 12. As duas
       regras, cada uma com o seu valor. */
    .sa-globe-loc-btn      { font-size: calc(0.78125 * var(--esc)); } /*  12.5 */
    .sa-globe-badges .sa-globe-loc-btn { font-size: calc(0.75 * var(--esc)); } /* 12 */
    .sa-globe-stat-val     { font-size: calc(1.875 * var(--esc)); }   /*  30 */
    .sa-globe-stat-label   { font-size: calc(0.625 * var(--esc)); }   /*  10 */
    .sa-globe-panel-close  { font-size: calc(1.5 * var(--esc)); }     /*  24 */

    /* feiras */
    .sa-feiras-hero-title    { font-size: calc(5 * var(--esc)); }      /*  80 */
    .sa-feiras-hero-tagline  { font-size: calc(1.125 * var(--esc)); }  /*  18 */
    .sa-feiras-section-title { font-size: calc(3.25 * var(--esc)); }   /*  52 */
    .sa-feiras-overline      { font-size: calc(0.75 * var(--esc)); }   /*  12 */
    .sa-feiras-show-name     { font-size: calc(2.25 * var(--esc)); }   /*  36 */
    .sa-feiras-show-year     { font-size: calc(2.25 * var(--esc)); }   /*  36 */
    .sa-feiras-show-sector   { font-size: calc(0.625 * var(--esc)); }  /*  10 */
    .sa-feiras-show-desc     { font-size: calc(0.9375 * var(--esc)); } /*  15 */
    .sa-feiras-past-card-name   { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-feiras-past-card-year   { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-feiras-past-card-sector { font-size: calc(0.625 * var(--esc)); } /* 10 */
    .sa-feiras-show-sede        { font-size: calc(0.625 * var(--esc)); } /* 10 */
    .sa-feiras-past-card-sede   { font-size: calc(0.625 * var(--esc)); } /* 10 */
    .sa-feiras-cal2-label    { font-size: calc(0.75 * var(--esc)); }   /*  12 */
    .sa-feiras-cal2-bar-name { font-size: calc(0.625 * var(--esc)); }  /*  10 */
    .sa-feiras-cal2-count    { font-size: calc(0.625 * var(--esc)); }  /*  10 */
    .sa-feiras-filtro-btn    { font-size: calc(0.75 * var(--esc)); }   /*  12 */
    .sa-feiras-filtro-nome   { font-size: calc(0.6875 * var(--esc)); } /*  11 */
    .sa-feiras-filtro-nome   { flex-basis: calc(3.5 * var(--esc)); }   /*  56 */
    .sa-feiras-calendar-legend-label { font-size: calc(0.75 * var(--esc)); } /* 12 */
    .sa-feiras-cta-title     { font-size: calc(2.625 * var(--esc)); }  /*  42 */
    .sa-feiras-cta-tagline   { font-size: calc(0.9375 * var(--esc)); } /*  15 */
    .sa-feiras-cta-btn       { font-size: calc(0.8125 * var(--esc)); } /*  13 */

    /* paginas legais. O corpo e texto do backoffice: nao tem classes por
       dentro, por isso os selectores sao os mesmos que ja estilizam o RTE. */
    .sa-legal-title        { font-size: calc(3.5 * var(--esc)); }     /*  56 */
    .sa-legal-heading      { font-size: calc(1.5 * var(--esc)); }     /*  24 */
    .sa-legal-body p       { font-size: calc(1 * var(--esc)); }       /*  16 */
    .sa-legal-list li      { font-size: calc(1 * var(--esc)); }       /*  16 */

    /* portal / login. O painel do formulario esta travado em 460px: aos 2560
       a letra crescia mas a caixa ficava do mesmo tamanho, e o formulario
       ficava pequenino no meio de um vazio enorme. Cresce com o resto. */
    .sa-login-panel-inner  { max-width: calc(28.75 * var(--esc)); }   /* 460 */
    .sa-login-brand-title  { font-size: calc(2.75 * var(--esc)); }    /*  44 */
    .sa-login-brand-over   { font-size: calc(0.6875 * var(--esc)); }  /*  11 */
    .sa-login-brand-desc   { font-size: calc(0.9375 * var(--esc)); }  /*  15 */
    .sa-login-h1           { font-size: calc(1.625 * var(--esc)); }   /*  26 */
    .sa-login-lead         { font-size: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-login-tab          { font-size: calc(0.75 * var(--esc)); }    /*  12 */
    .sa-login-switch       { font-size: calc(0.8125 * var(--esc)); }  /*  13 */
}

/* --- Heros das paginas interiores: altura e folga do cabecalho a escalar ---
   22 Set 2026, queixa do cliente (ecra grande): "o caminho de navegacao so'
   esta' nas noticias". Estava em quase todas -- mas ESCONDIDO atras do
   logotipo. Medido no Chrome:

     ate' 1920     livre (40 a 70px de folga)
     2560x1440     Contactos, News, Trade Shows e Careers ja' tapados
     3440 / 3840   tapados tambem a noticia e os heros .sa-sh (Industrial,
                   Medical, Energy, Services, Information, Case Studies)

   Porque: acima de 1920 o bloco de cima faz crescer o texto do hero E o
   cabecalho (o logo vai de 76 a 114px de altura), mas a ALTURA dos heros e
   os 80px que cada um reserva para o cabecalho ficaram em px fixos. O
   conteudo esta' centrado na vertical, portanto quanto maior o titulo mais o
   bloco SOBE -- e o logo desce e cresce ao encontro dele. Na noticia o
   breadcrumb e' comprido e espreita por baixo do logo; nas outras some.

   Aqui passa tudo a` mesma escala do resto do bloco: N = px de hoje / 16.
   A 1920 (--esc = 16px) cada linha devolve EXACTAMENTE o valor de hoje, por
   isso o desktop nao muda um pixel; acima disso o hero, a folga e o
   cabecalho crescem juntos e a distancia que ha' aos 1920 mantem-se.
   Os heros de produto (.sa-ph) nao entram: tem 100vh e ja' estavam livres.
   As excepcoes por pagina (Services 65, Case Studies 151, Resources 117)
   repetem-se aqui porque body.page-N ganha a um .sa-sh solto. */
@media (min-width: 1920px) {
    /* Seccoes: Industrial, Medical, Energy, Services, Information, Case Studies */
    .sa-sh                     { height: calc(43.75 * var(--esc)); }     /* 700 */
    .sa-sh-content             { padding-top: calc(5 * var(--esc)); }    /*  80 */
    body.page-151 .sa-sh,
    body.page-117 .sa-sh       { height: calc(32.5 * var(--esc)); }      /* 520 */
    body.page-65 .sa-sh        { min-height: calc(32.5 * var(--esc)); }  /* 520 */
    body.page-65 .sa-sh-inner  { min-height: calc(32.5 * var(--esc));    /* 520 */
                                 padding-top: calc(10.5 * var(--esc));   /* 168 */
                                 padding-bottom: calc(4.5 * var(--esc)); } /* 72 */

    /* News */
    .sa-news-hero              { height: calc(32.5 * var(--esc)); }      /* 520 */
    .sa-news-hero-inner        { padding-top: calc(5 * var(--esc)); }    /*  80 */

    /* Contactos */
    .sa-contacts-hero          { height: calc(32.5 * var(--esc)); }      /* 520 */
    .sa-contacts-hero-inner    { padding-top: calc(5 * var(--esc)); }    /*  80 */

    /* Trade Shows */
    .sa-feiras-hero            { height: calc(32.5 * var(--esc)); }      /* 520 */
    .sa-feiras-hero-inner      { padding-top: calc(5 * var(--esc)); }    /*  80 */

    /* Careers */
    .sa-carreira-hero          { height: calc(35 * var(--esc)); }        /* 560 */
    .sa-carreira-hero-inner    { padding-top: calc(5 * var(--esc)); }    /*  80 */

    /* Detalhe da noticia */
    .sa-nd-hero                { min-height: calc(25 * var(--esc));      /* 400 */
                                 height: calc(30 * var(--esc)); }        /* 480 */
    .sa-nd-hero-content        { padding-top: calc(5 * var(--esc)); }    /*  80 */

    /* Larguras das caixas de texto dos heros (22 Set 2026, 2.a parte).
       O titulo ja' crescia com o ecra, mas dentro de uma caixa de largura
       FIXA -- a noticia tinha 760px para um titulo de 78px aos 3840 e partia
       em tres linhas o que aos 1920 cabe em menos. Com a largura a escalar
       tambem, cada texto parte nas mesmas linhas que aos 1920. */
    .sa-nd-hero-content        { max-width: calc(47.5 * var(--esc)); }   /* 760 */
    .sa-sh-content             { max-width: calc(47 * var(--esc)); }     /* 752 */
    body.page-65 .sa-sh-content { max-width: calc(58.75 * var(--esc)); } /* 940 */
    body.page-65 .sa-sh-desc   { max-width: calc(51.25 * var(--esc)); }  /* 820 */
    .sa-news-hero-tagline,
    .sa-contacts-hero-tagline  { max-width: calc(30 * var(--esc)); }     /* 480 */
    .sa-feiras-hero-tagline,
    .sa-carreira-hero-tagline  { max-width: calc(31.25 * var(--esc)); }  /* 500 */
}

/* Janela larga mas BAIXA (1920x800, por exemplo: um 1080p com barra de
   tarefas e barra de favoritos). La em cima, no bloco dos sectores, ha um
   @media (min-width:1024px) and (max-height:820px) que aperta estes dois
   textos para 15px, senao nao ha altura para a foto mais o texto mais a
   barra de navegacao. A minha regra dos 1920 punha-os de volta a 16 -- ganha
   por vir depois no ficheiro, com o mesmo peso. Isto devolve o aperto, agora
   tambem a escalar. Nao e novo de hoje: veio com o bloco da homepage. */
@media (min-width: 1920px) and (max-height: 820px) {
    .sa-sectors-desc,
    .sa-sectors-subdesc { font-size: calc(0.9375 * var(--esc)); }     /*  15 */
}

/* --- Simulador: fechar o buraco do meio ---------------------------------
   Alargar a banda deixava um vazio enorme entre o texto e o cartao. Medido
   a 2560 antes disto: a coluna esquerda ficava com 1258px, mas o texto la
   dentro esta travado em 512px e o cartao e fixo em 704px -> 746px de nada
   no meio da seccao. Aos 3440 eram 1330px.

   O designer resolve de outra maneira no Simulator.tsx da v5: duas colunas
   de 50% (lg:w-1/2) e SEM tectos de largura no texto, que assim preenche a
   sua metade. E o que se faz aqui.

   >>> 1921 e nao 1920, de proposito. Estas regras nao sao de escala -- o
   >>> max-width:none e o flex:50% mudam o desenho, nao o tamanho. Aos 1920
   >>> fechariam tambem o buraco de 192px que ja la esta hoje, e isso era
   >>> mexer no desktop. Fica de fora por um pixel para o desktop ficar
   >>> mesmo intacto. Esse buraco dos 192px aos 1920 e uma questao separada:
   >>> existe desde sempre e resolve-se movendo este bloco para 1920.
   ------------------------------------------------------------------------ */
@media (min-width: 1921px) {
    /* --- Talk to an Engineer: manter o racio da foto -------------------
       As 38 fotos da Equipa sao todas 600x600 (medi: 34 exactamente, 4 com
       1px de diferenca). A caixa e que muda de forma com a largura:

           1440   374x620  retrato    corta 123px de cada lado
           1920   507x572  retrato    corta  33px de cada lado
           2560   835x606  PAISAGEM   corta na vertical -- a cabeca

       Com a caixa em 1/1 o cover deixa de ter o que cortar: a foto entra
       inteira, com as proporcoes do ficheiro. E deixa de depender de qual
       o comercial que sai no sorteio.

       O painel de texto passa a `flex: 1` para ocupar o que sobra (a foto
       deixa de esticar). O `max-width: 320px` da descricao fica: e o limite
       de comprimento de linha, e uma linha mais curta que a coluna e
       tipografia normal, nao um buraco. */
    .sa-cta-engineer-photo { flex: 0 0 auto; aspect-ratio: 1 / 1; }
    .sa-cta-engineer-text  { flex: 1 1 auto; max-width: none; }

    /* --- Sectores: a seccao cresce, a maquina nao ----------------------
       .sa-sectors e height:100vh, por isso acompanha o ecra. Mas a foto
       tem height: min(58vh, 520px) e e o 520 que manda em tudo acima dos
       ~900px de altura. Resultado, medido:

           ecra          altura util   foto   vazio
           1440x900        764          520    244   (32%)
           1920x1080       944          520    424   (45%)
           2560x1440      1304          520    784   (60%)
           3840x2160      2024          520   1504   (74%)

       Num 4K a seccao ocupa o ecra todo com a maquina a boiar la no meio.
       Tirando o tecto dos 520px, o 58vh sozinho da a proporcao certa em
       qualquer altura -- e nao ha risco de a maquina ficar gigante, porque
       o object-fit: contain limita-a a largura da coluna muito antes disso.

       1921 e nao 1920 pelo mesmo motivo do simulador: aos 1920 o 58vh ja
       daria 626px e isso mudava o desktop. */
    .sa-sectors-img { height: 58vh; }

    .sa-sim-inner {
        padding: calc(8 * var(--esc)) calc(5.9375 * var(--esc));  /* 128 / 95 */
        gap: calc(4 * var(--esc));                                /*  64      */
    }
    .sa-sim-left  { flex: 1 1 50%; min-width: 0; }
    .sa-sim-card  { flex: 1 1 50%; width: auto; }   /* era 704px fixos */

    /* os tectos saem: e o que impedia o texto de acompanhar a coluna */
    .sa-sim-desc  { max-width: none; font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-sim-steps { max-width: none; }
    .sa-sim-step-title { font-size: calc(1 * var(--esc)); }      /* 16 */
    .sa-sim-step-desc  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
}

/* ==========================================================================
   ECRAS GRANDES: cabecalho, barra de navegacao e rodape

   Bloco separado de proposito. Isto aparece em TODAS as paginas, incluindo as
   que ja estao aprovadas, por isso ha-de poder cair inteiro sem mexer no
   resto. E so apagar deste comentario ate ao fim do bloco.

   Porque e preciso: aos 3840 o titulo da homepage tem 135px e a barra de
   navegacao continua com 43px de altura e letra de 13px. E o pormenor que
   mais denuncia "isto nao foi feito para este ecra".

   Aqui nao chega escalar a letra. As tres pecas tem caixa de tamanho fixo --
   a pastilha do nav tem height:43px, os botoes do header 43x82 e 43x91, o
   logo 152x76. Se so crescesse a letra, o texto rebentava a caixa. Por isso
   vai tudo em calc(N * var(--esc)): alturas, larguras, paddings e gaps.

   Aos 1920 --esc = 16px e cada calc() devolve exactamente o numero que la
   estava. Continua a valer a mesma promessa: <= 1920 nao muda um pixel.
   ========================================================================== */

@media (min-width: 1920px) {

    /* --- cabecalho ------------------------------------------------------ */
    .sa-header             { padding: calc(1.875 * var(--esc)) 0; }    /* 30 */
    .sa-header-logo        { width: calc(9.5 * var(--esc));            /* 152 */
                             height: calc(4.75 * var(--esc)); }        /*  76 */
    .sa-header-right       { gap: calc(0.875 * var(--esc)); }          /*  14 */

    .sa-header-lang-selected { height: calc(2.6875 * var(--esc));      /*  43 */
                               width: calc(5.125 * var(--esc));        /*  82 */
                               gap: calc(0.375 * var(--esc)); }        /*   6 */
    .sa-header-lang-selected span { font-size: calc(0.9375 * var(--esc)); } /* 15 */
    .sa-header-lang-dropdown { width: calc(5.125 * var(--esc)); }      /*  82 */
    .sa-header-lang-option { padding: calc(0.625 * var(--esc)) 0;      /*  10 */
                             font-size: calc(0.9375 * var(--esc)); }   /*  15 */
    .sa-header-login       { height: calc(2.6875 * var(--esc));        /*  43 */
                             width: calc(5.6875 * var(--esc)); }       /*  91 */
    .sa-header-login span  { font-size: calc(0.9375 * var(--esc)); }   /*  15 */

    /* --- barra de navegacao --------------------------------------------
       O realce que desliza por baixo do link activo e posicionado por JS,
       que le as posicoes reais dos links no momento. Como o left e o width
       sao calculados a partir do que esta no ecra, crescer a pastilha nao o
       desalinha -- mas fica verificado a medir, nao a supor. O top e o
       height do realce escalam com o resto para nao sair da barra. */
    .sa-nav                { bottom: calc(3.125 * var(--esc)); }       /*  50 */
    .sa-nav-bar            { height: calc(2.6875 * var(--esc)); }      /*  43 */
    .sa-nav-highlight      { top: calc(0.25 * var(--esc));             /*   4 */
                             height: calc(2.1875 * var(--esc)); }      /*  35 */
    .sa-nav-link           { gap: calc(0.3125 * var(--esc));           /*   5 */
                             padding: 0 calc(1 * var(--esc));          /*  16 */
                             font-size: calc(0.8125 * var(--esc)); }   /*  13 */

    /* --- rodape ---------------------------------------------------------
       O .sa-footer-inner ja acompanha a banda pelo --container-max; o que
       falta e o respiro por dentro. O min-height e so um chao: com o texto
       maior o conteudo passa-o a vontade, mas escala tambem para o rodape
       nao encolher em proporcao num ecra muito alto. */
    .sa-footer             { min-height: calc(35.8125 * var(--esc)); } /* 573 */
    .sa-footer-inner       { padding: 0 calc(5.9375 * var(--esc)); }   /*  95 */
    .sa-footer-columns     { padding-top: calc(5.625 * var(--esc));    /*  90 */
                             gap: calc(2 * var(--esc)); }              /*  32 */
    .sa-footer-col         { gap: calc(1.5 * var(--esc)); }            /*  24 */
    .sa-footer-col-title   { font-size: calc(0.75 * var(--esc)); }     /*  12 */
    .sa-footer-col-links   { gap: calc(0.75 * var(--esc)); }           /*  12 */
    .sa-footer-col-link    { gap: calc(0.5 * var(--esc)); }            /*   8 */
    .sa-footer-col-link-dot { width: calc(0.25 * var(--esc));          /*   4 */
                              height: calc(0.25 * var(--esc)); }       /*   4 */
    .sa-footer-col-link a  { font-size: calc(0.75 * var(--esc)); }     /*  12 */

    .sa-footer-socials     { gap: calc(1.25 * var(--esc)); }           /*  20 */
    .sa-footer-social-link { width: calc(1.75 * var(--esc));           /*  28 */
                             height: calc(1.75 * var(--esc)); }        /*  28 */
    .sa-footer-social-link svg { width: calc(0.875 * var(--esc));      /*  14 */
                                 height: calc(0.875 * var(--esc)); }   /*  14 */
    .sa-footer-partners    { gap: calc(5 * var(--esc)); }              /*  80 */
    .sa-footer-partners img { height: calc(1.75 * var(--esc)); }       /*  28 */

    .sa-footer-copyright   { margin-top: calc(2.75 * var(--esc));      /*  44 */
                             padding-bottom: calc(2.5 * var(--esc));   /*  40 */
                             gap: calc(1 * var(--esc));                /*  16 */
                             font-size: calc(0.75 * var(--esc)); }     /*  12 */
    .sa-footer-copyright-links   { gap: calc(0.25 * var(--esc)); }     /*   4 */
    .sa-footer-copyright-links a { font-size: calc(0.75 * var(--esc)); } /* 12 */
}

/* ==========================================================================
   ECRAS GRANDES: o texto que faltava (2 Set 2026)

   O bloco dos 1920 la em cima escalou os TITULOS e deixou de fora os botoes,
   os campos de formulario, os filtros, as pastilhas, as modais e as migalhas.
   Ficaram tambem paginas inteiras por tocar -- a Empresa, a cronologia, as
   Aplicacoes Globais, as sedes, as certificacoes, as tabelas de specs, o
   comparador de modelos, o detalhe das vagas e o portal todo.

   O resultado disso e pior do que nao ter escalado nada: dentro da MESMA
   seccao o titulo crescia e o botao logo por baixo ficava na mesma. Sao 24
   seccoes assim, e e o que mais se nota num ecra grande.

   >>> COMECA NOS 1920, o mesmo sitio do bloco de cima. De proposito.
   >>>
   >>> Aos 1920 o --esc vale exactamente 16px, por isso calc(N * var(--esc))
   >>> devolve o numero que ja la estava. NAO HA SALTO NENHUM aos 1920 -- a
   >>> curva sai continua dali para cima. Abaixo dos 1920 o bloco nem sequer
   >>> se aplica.
   >>>
   >>> ISTO MUDA A FAIXA DOS 2048 AOS 2560 (um QHD de 27). Muda porque essa
   >>> faixa hoje esta a MEIO: o bloco de cima ja la faz crescer os titulos e
   >>> deixa os botoes e os campos parados. Nao e um desenho aprovado, e o
   >>> defeito. Passa a crescer tudo junto.
   >>>
   >>> SE ALGUM DIA for preciso congelar tambem o QHD: trocar o 1920 por 2561
   >>> na linha do @media aqui em baixo. E a unica alteracao precisa. Fica-se
   >>> com o QHD igualzinho ao de hoje, mas em troca aparece um salto seco de
   >>> 25% aos 2561 e o QHD fica com o defeito de cima. Por isso nao e o que
   >>> esta escolhido.

   COMO FOI FEITO -- por script, nao a olho:

   1. Leu-se o ficheiro todo e, para cada regra que JA declara font-size e que
      ainda se aplica aos 3840, guardou-se o selector exacto e o valor em px.
      N = valor / 16.

   2. So se toca em selectores que JA TINHAM font-size proprio. E esta a regra
      que evita repetir o erro do .sa-sh-content (comentario na linha ~19506):
      por um tamanho num CONTENTOR que nao tinha nenhum faz o texto todo la
      dentro herda-lo. Aqui nao se cria heranca nova -- so se reescreve em
      calc() um tamanho que ja existia naquele mesmo selector.

   3. O selector vai copiado tal e qual, incluindo os compostos
      (.sa-sim-choices--row .sa-sim-choice, .sa-globe-search input, ...), para
      a especificidade e a ordem da cascata ficarem iguais as de hoje.

   4. Saltou-se quem ja estava escalado no bloco de cima -- nao ha aqui nenhum
      selector repetido a lutar com o que ja la esta.

   5. Saltou-se quem ja e fluido por outra via. Quatro tem clamp() com vw a
      ganhar a regra em px: .sa-ga-title (40px), .sa-ga-app-title (30),
      .sa-err-code e .sa-err-title. Escalar por cima baixava os dois primeiros
      para 32 e 22 AOS 1920 -- foi a verificacao da cascata que os apanhou.
      Outros dois herdam (font-size: inherit) e tambem ficam de fora.

   VERIFICADO, nao suposto: resolveu-se a cascata dos 698 selectores com
   font-size nos dois ficheiros (antes e depois) a 1280, 1366, 1440, 1536,
   1600, 1680, 1728 e 1920. Zero diferencas em todas.

   PODE CAIR INTEIRO: e aditivo e esta todo dentro de um so @media. Apagar
   deste comentario ate ao fim do ficheiro devolve o estado anterior.
   ========================================================================== */


@media (min-width: 1920px) {

    /* sa-hero-* (2) */
    .sa-hero-progress-label { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-hero-scroll         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-nav-* (5) */
    .sa-nav-dropdown-title { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-nav-dropdown-item  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-nav-mob-link       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-nav-mob-toggle     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-nav-mob-item       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-wcu-* (14) */
    .sa-wcu-overline-text          { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-wcu-desc                   { font-size: calc(1.0625 * var(--esc)); }  /* 17 */
    .sa-wcu-stat-val               { font-size: calc(1.75 * var(--esc)); }  /* 28 */
    .sa-wcu-stat-label             { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-wcu-cta                    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-wcu-feature-card-sub       { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-wcu-feature-card-title     { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-wcu-feature-card-line span { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    /* o cartao tem de crescer com o numero: com os 210px fixos o "4500+"
       ficava cortado dos 2560 para cima (ponto 6 do cliente, 25 Set 2026) */
    .sa-wcu-stat-card              { width: calc(13.125 * var(--esc)); }  /* 210 */
    .sa-wcu-stat-card-number       { font-size: calc(4.25 * var(--esc)); }  /* 68 */
    .sa-wcu-stat-card-label        { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-wcu-stat-card-sublabel     { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-wcu-diff-card-tag          { font-size: calc(0.5625 * var(--esc)); }  /* 9 */
    .sa-wcu-diff-card-title        { font-size: calc(0.84375 * var(--esc)); }  /* 13.5 */
    .sa-wcu-diff-card-body         { font-size: calc(0.78125 * var(--esc)); }  /* 12.5 */

    /* sa-sim-* (23) */
    .sa-sim-slider-label                { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-sim-slider-value                { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-sim-slider-unit                 { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-sim-result-label                { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-sim-result-name                 { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-sim-result-series               { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-sim-btn                         { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-sim-eng-desc                    { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-sim-eng-title                   { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-sim-eng-name                    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-sim-eng-name span               { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-sim-eng-link                    { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-sim-tab                         { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-sim-sub                         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-sim-hint                        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-sim-warn                        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-sim-choice span                 { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-sim-choice small                { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-sim-choices--row .sa-sim-choice { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-sim-select                      { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-sim-num                         { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-sim-unit-static                 { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-sim-unit                        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-ts-* (8) */
    .sa-ts-info-label { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-ts-info-value { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-ts-btn        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-ts-rep-name   { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-ts-rep-role   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-ts-rep-btn    { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-ts-tab        { font-size: calc(1 * var(--esc)); }  /* 16 */

    /* sa-sectors-* (4) */
    .sa-sectors-product-item { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-sectors-cta span     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-sectors-nav-num      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-sectors-nav-label    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-numbers-* (1) */
    .sa-numbers-label { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-innov-* (1) */
    .sa-innov-subtitle { font-size: calc(1 * var(--esc)); }  /* 16 */

    /* sa-appbanner-* (2) */
    .sa-appbanner-title    { font-size: calc(3.75 * var(--esc)); }  /* 60 */
    .sa-appbanner-subtitle { font-size: calc(1.125 * var(--esc)); }  /* 18 */

    /* sa-globe-* (22) */
    .sa-globe-search input        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-list-region         { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-globe-list-empty          { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-panel-region        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-globe-panel-name          { font-size: calc(1.875 * var(--esc)); }  /* 30 */
    .sa-globe-panel-badge         { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-globe-panel-texto         { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-globe-panel-cta           { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-globe-panel-sede          { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-globe-panel-email         { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-globe-panel-morada        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-globe-panel-stat-val      { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-globe-panel-stat-label    { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-globe-panel-section-title { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-globe-panel-project span  { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-panel-rep-name      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-panel-rep-role      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-globe-panel-rep-email     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-globe-dd-btn              { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-dd-caret            { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-globe-dd-opt              { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-globe-panel-sector        { font-size: calc(0.625 * var(--esc)); }  /* 10 */

    /* sa-cards-* (5) */
    .sa-cards-viewall span  { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-cards-badge span    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-cards-card-title    { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-cards-card-desc     { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-cards-readmore-text { font-size: calc(1 * var(--esc)); }  /* 16 */

    /* sa-co-* (11) */
    .sa-co-year                { font-size: calc(11.25 * var(--esc)); }  /* 180 */
    .sa-co-overline            { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-co-title               { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-co-tagline             { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-co-narrative-lead      { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-co-narrative-grid p    { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-co-portfolio-title     { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-co-portfolio-sub       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-co-portfolio-item span { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-co-sectors-title       { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-co-sectors-list span   { font-size: calc(1.5 * var(--esc)); }  /* 24 */

    /* sa-gs-* (9) */
    .sa-gs-title         { font-size: calc(4 * var(--esc)); }  /* 64 */
    .sa-gs-subtitle      { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-gs-stat-val      { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-gs-stat-label    { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-gs-card-type     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-gs-card-name     { font-size: calc(2 * var(--esc)); }  /* 32 */
    .sa-gs-card-location { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-gs-card-desc     { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-gs-card-toggle   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-cert-* (5) */
    .sa-cert-title      { font-size: calc(2 * var(--esc)); }  /* 32 */
    .sa-cert-desc       { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-cert-card-title { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-cert-card-desc  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-cert-code       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-bc-* (8) */
    .sa-bc-overline         { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-bc-title            { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-bc-quote-mark       { font-size: calc(7.5 * var(--esc)); }  /* 120 */
    .sa-bc-quote p          { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-bc-author-name      { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-bc-author-role      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-bc-image-stat-val   { font-size: calc(5 * var(--esc)); }  /* 80 */
    .sa-bc-image-stat-label { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-tl-* (8) */
    .sa-tl-title         { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-tl-drag-hint     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-tl-year          { font-size: calc(4 * var(--esc)); }  /* 64 */
    .sa-tl-item-title    { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-tl-item-desc     { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-tl-tooltip-year  { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-tl-tooltip-title { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-tl-tooltip-desc  { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    /* A geometria da faixa tem de crescer com a letra (pedido do cliente,
       25 Set 2026). Com a faixa presa nos 540px e os marcos nos 240px, a letra
       maior partia em mais linhas e os anos de cima saiam pelo topo da faixa
       (overflow-y: hidden): a 2560 o 2012, a 3840 seis anos e tres textos.
       Assim a timeline e' a mesma da de 1920, so' que maior. */
    .sa-tl-track         { height: calc(33.75 * var(--esc)); }  /* 540 */
    .sa-tl-items         { gap: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-tl-item          { width: calc(15 * var(--esc)); }  /* 240 */
    .sa-tl-dot,
    .sa-tl-connector     { left: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-tl-connector     { height: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-tl-item:nth-child(odd) .sa-tl-content  { margin-bottom: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-tl-item:nth-child(even) .sa-tl-content { margin-top: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-tl-tooltip       { width: calc(15 * var(--esc)); }  /* 240 */
    .sa-tl-item:nth-child(odd) .sa-tl-tooltip  { top: calc(50% + 1.125 * var(--esc)); }  /* 18 */
    .sa-tl-item:nth-child(even) .sa-tl-tooltip { bottom: calc(50% + 1.125 * var(--esc)); }  /* 18 */
    .sa-tl-tooltip-inner { padding: var(--esc); }  /* 16 */
    .sa-tl-tooltip-img img { height: calc(6.25 * var(--esc)); }  /* 100 */

    /* sa-cp-* (5) */
    .sa-cp-title         { font-size: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-cp-tab           { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-cp-panel         { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-cp-section-title { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-cp-reviewed      { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-faq-* (1) */
    .sa-faq-engineer { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-ph-* (1) */
    .sa-ph-bar-sep { font-size: calc(0.625 * var(--esc)); }  /* 10 */

    /* sa-pi-* (5) */
    .sa-pi-overline { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-pi-text-lg  { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-pi-text     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-pi-check    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-pi-cta      { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-mc-* (12) */
    .sa-mc-title            { font-size: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-mc-subtitle         { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-mc-card-label       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-mc-remove           { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-mc-selector         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-mc-chevron          { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-mc-option           { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-mc-spec-label       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-mc-spec-val         { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-mc-card-placeholder { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-mc-add-circle       { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-mc-add span         { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-ga-* (8) */
    .sa-ga-subtitle          { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-ga-card-title        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-ga-card-cta          { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-ga-detail-title      { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-ga-app-desc          { font-size: calc(0.96875 * var(--esc)); }  /* 15.5 */
    .sa-ga-drawer-nav button { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-ga-drawer-pos        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-ga-app-cta           { font-size: calc(0.71875 * var(--esc)); }  /* 11.5 */

    /* sa-pd-* (4) */
    .sa-pd-overline      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-pd-title         { font-size: calc(1.75 * var(--esc)); }  /* 28 */
    .sa-pd-body          { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-pd-diagram-title { font-size: calc(1.25 * var(--esc)); }  /* 20 */

    /* sa-dl-* (4) -- acertados ao desenho a 2 Set: mais pequenos e mais finos */
    .sa-dl-title { font-size: calc(1.75 * var(--esc)); }  /* 28 */
    .sa-dl-desc  { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-dl-actions .sa-dl-btn { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-dl-card-btn { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-err-* (2) */
    .sa-err-desc { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-err-btn  { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-np-* (12) */
    .sa-np-eyebrow       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-np-title         { font-size: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-np-all           { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-np-tab           { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-np-chip          { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-np-meta          { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-np-project-title { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-np-project-desc  { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-np-spec-val      { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-np-spec-label    { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-np-readmore      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-np-counter       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-news-* (13) */
    .sa-news-hero-breadcrumb        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-news-featured-badge span    { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-news-featured-btn           { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-news-grid-search input      { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-news-card-readmore          { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-news-grid-empty             { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-news-newsletter-heading h3  { font-size: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-news-newsletter-heading p   { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-news-newsletter-form input  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-news-newsletter-form button { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-news-newsletter-consent     { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-news-newsletter-error       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-news-newsletter-success     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-contacts-* (18) */
    .sa-contacts-hero-breadcrumb                                      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-contacts-type-cta                                             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-form-sep span                                        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-contacts-form-field .sa-contacts-form-choices label           { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-contacts-form-field label                                     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-contacts-form-field input                                     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-contacts-form-field select                                    { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-contacts-form-field textarea                                  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-contacts-form-consent label                                   { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-form-submit                                          { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-form-success h3                                      { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-contacts-form-success p                                       { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-contacts-form-success div:not(.sa-contacts-form-success-icon) { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-contacts-form-success-again                                   { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-form-error                                           { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-contacts-form-success button                                  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-office-row p                                         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-contacts-office-row a                                         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-feiras-* (12) */
    .sa-feiras-hero-breadcrumb      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-feiras-calendar-month-name  { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-feiras-calendar-month-count { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-feiras-show-status          { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-feiras-show-meta-item span  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-feiras-show-toggle          { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-feiras-show-link            { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-feiras-show-reps-title      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-feiras-rep-name             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-feiras-rep-role             { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-feiras-rep-email            { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-feiras-past-card-meta span  { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-carreira-* (69) */
    .sa-carreira-hero-breadcrumb                                { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-hero-btn                                       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-positions-filter-btn                           { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-positions-filter-select                        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-positions-empty                                { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-carreira-job-meta                                       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-job-apply                                      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-job-body-label                                 { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-job-body-text                                  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-job-list li                                    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-job-apply-inline                               { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-spontaneous-field label:not(.sa-carreira-file) { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-spontaneous-field input                        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-spontaneous-field select                       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-spontaneous-field textarea                     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-spontaneous-submit                             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-spontaneous-success h3                         { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-carreira-spontaneous-success p                          { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-carreira-spontaneous-success button                     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-spontaneous-success a                          { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-modal-header-overline                          { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-modal-header-title                             { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-carreira-modal-header-loc                               { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-modal-header-dep                               { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-carreira-modal-field label:not(.sa-carreira-file)       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-modal-field input                              { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-modal-field textarea                           { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-modal-requirements-label                       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-modal-requirements-item                        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-modal-submit                                   { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-modal-disclaimer                               { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-modal-success h3                               { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-carreira-modal-success p                                { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-carreira-modal-success button                           { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-job-view                                       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-crumb a                                    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-det-crumb span                                 { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-det-foto-faixa                                 { font-size: calc(0.5625 * var(--esc)); }  /* 9 */
    .sa-carreira-det-oferta-label                               { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-oferta-lista li                            { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-det-badge                                      { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-carreira-det-title                                      { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-carreira-det-hero-meta                                  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-det-btn                                        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-det-label                                      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-lead                                       { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-carreira-det-rte                                        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-rte h1                                     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-rte h2                                     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-rte h3                                     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-card-label                                 { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-card-k                                     { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-carreira-det-card-v                                     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-card-btn                                   { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-det-card-linkedin                              { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-carreira-det-apply-title                                { font-size: calc(1.875 * var(--esc)); }  /* 30 */
    .sa-carreira-det-apply-sub                                  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-alert                                      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-form-field label                           { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-form-field input                           { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-form-field textarea                        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-det-file                                       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-det-submit                                     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-carreira-det-disclaimer                                 { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-carreira-det-sent h3                                    { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-carreira-det-sent p                                     { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-carreira-det-gate-text h3                               { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-carreira-det-gate-text p                                { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-carreira-job-details                                    { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-svc-* (18) */
    .sa-svc-hero-breadcrumb a    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-svc-hero-breadcrumb span { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-svc-hero-title           { font-size: calc(5 * var(--esc)); }  /* 80 */
    .sa-svc-hero-tagline         { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-svc-note p               { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-svc-rental-benefit span  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-svc-pillar-title         { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-svc-dist-aside-label     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-svc-dist-aside p         { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-svc-dist-benefit-title   { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-svc-dist-benefit-body    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-svc-dist-step-num        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-svc-dist-step-title      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-svc-dist-step-body       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-svc-dist-how-num         { font-size: calc(3 * var(--esc)); }  /* 48 */
    .sa-svc-dist-how-title       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-svc-dist-how-body        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-svc-dist-cta-desc        { font-size: calc(1 * var(--esc)); }  /* 16 */

    /* sa-cs-* (8) */
    .sa-cs-pages           { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-cs-breadcrumb a    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-cs-breadcrumb span { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-cs-hero-title      { font-size: calc(5 * var(--esc)); }  /* 80 */
    .sa-cs-hero-desc       { font-size: calc(1.125 * var(--esc)); }  /* 18 */
    .sa-cs-search          { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-cs-empty           { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-cs-loadmore        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-res-* (20) */
    .sa-res-sector             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-subtab             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-slider-label       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-res-slider-value       { font-size: calc(1.625 * var(--esc)); }  /* 26 */
    .sa-res-slider-unit        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-slider-bounds      { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-res-rec-overline       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-res-rec-name           { font-size: calc(1.375 * var(--esc)); }  /* 22 */
    .sa-res-rec-series         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-rec-btn            { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-res-sim-imgmeta-name   { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-sim-imgmeta-series { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-res-comp-cardlabel     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-res-comp-select        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-comp-option        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-res-comp-spec-label    { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-comp-spec-val      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-res-comp-empty         { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-res-comp-add-label     { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-res-faq-a p            { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-login-* (10) */
    .sa-login-alert                            { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-login-field label                      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-login-field input                      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-login-field select                     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-login-field-err                        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-login-forgot a                         { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-login-submit                           { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-login-back a                           { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-login-toggle-btn                       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-login-form-wrap .LV_validation_message { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-portal-* (46) */
    .sa-portal-user-name       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-user-role       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-logout          { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-lang-selected,
    a.sa-portal-lang-option    { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-hero-eyebrow    { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-hero-title      { font-size: calc(2.75 * var(--esc)); }  /* 44 */
    .sa-portal-hero-desc       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-portal-feed-label      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-feed-all        { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-portal-vid-title       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-new-title       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-vid-date        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-new-date        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-resources-title { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-resources-count { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-portal-card-title      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-portal-card-date       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-card-tag        { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-portal-card-desc       { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-card-item-label { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-card-item-date  { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-card-download   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-card-viewall    { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-bdh-label       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-portal-bdh-all         { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-bdh-name        { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-portal-bdh-dept        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-bdh-area        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-bdh-today       { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-portal-bdh-date        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-bdh-days        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-parking-caption { font-size: calc(0.5625 * var(--esc)); }  /* 9 */
    .sa-portal-parking-month   { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-portal-parking-label   { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-portal-parking-parque  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-parking-note    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-portal-footer-link     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-card-none       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-portal-empty-title     { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-portal-empty-desc      { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-portal-sec-back        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-sec-title       { font-size: calc(1.5 * var(--esc)); }  /* 24 */
    .sa-portal-sec-desc        { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-portal-doc-title       { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-portal-doc-meta        { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-doc-download    { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-portal-doc-nofile      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-pcat-* (6) */
    .sa-pcat-pill  { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-pcat-vazio { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-pcat-area  { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-pcat-title { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-pcat-meta  { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-pcat-btn   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-account-* (7) */
    .sa-account-card-title     { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-account-hint           { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-account-field label    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-account-field input    { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-account-field select   { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-account-field textarea { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-account-err            { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-bpop-* (9) */
    .sa-bpop-head-title { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-bpop-head-sub   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-bpop-self-emoji { font-size: calc(1.875 * var(--esc)); }  /* 30 */
    .sa-bpop-self-title { font-size: calc(1 * var(--esc)); }  /* 16 */
    .sa-bpop-self-msg   { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-bpop-label      { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-bpop-name       { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-bpop-meta       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-bpop-close      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    /* a cara e a janela crescem com o texto (23 Set 2026): 96px / 560px aos
       1920, 120 / 700 aos 2560, tecto 144 / 840 no 4K */
    .sa-bpop-avatar     { width: calc(6 * var(--esc)); height: calc(6 * var(--esc)); }  /* 96 */
    .sa-bpop            { max-width: calc(35 * var(--esc)); }  /* 560 */
    /* parabens ao proprio (23 Set 2026) */
    .sa-bgreet                    { max-width: calc(35 * var(--esc)); }  /* 560 */
    .sa-bgreet-kicker             { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-bgreet-title              { font-size: calc(2.5 * var(--esc)); }  /* 40 */
    .sa-bgreet-text p             { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-bgreet-text p:first-child { font-size: calc(1.0625 * var(--esc)); }  /* 17 */
    .sa-bgreet-btn                { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    /* cartao de colega ampliado (23 Set 2026) */
    .sa-fzoom-card                { width: min(calc(26.25 * var(--esc)), 92vw); }  /* 420 */
    .sa-fzoom-name                { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-fzoom-meta                { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-fzoom-date                { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-fzoom-flag                { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-psec-* (11) */
    .sa-psec-month      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-psec-empty      { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-psec-bcard-flag { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-psec-bcard-name { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-psec-bcard-sub  { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-psec-bcard-area { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-psec-bcard-date { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-psec-erow-name  { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-psec-erow-sub   { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-psec-erow-date  { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-psec-erow-ver   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */

    /* sa-pevt-* (4) */
    .sa-pevt-info-label  { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-pevt-info-value  { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-pevt-about-label { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-pevt-about-text  { font-size: calc(0.9375 * var(--esc)); }  /* 15 */

    /* sa-pdet-* (5) */
    .sa-pdet-crumb a    { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-pdet-crumb span { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-pdet-badge      { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-pdet-date       { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-pdet-title      { font-size: calc(2.25 * var(--esc)); }  /* 36 */

    /* sa-spec-* (10) */
    .sa-spec-h-sub        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */
    .sa-spec-h-lbl        { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-spec-h-unit       { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-spec-table td     { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-spec-section span { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-spec-note         { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-spec-eyebrow      { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-spec-title        { font-size: calc(2 * var(--esc)); }  /* 32 */
    .sa-spec-count        { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-spec-more-btn     { font-size: calc(0.75 * var(--esc)); }  /* 12 */

    /* sa-cr-* (6) */
    .sa-cr-eyebrow    { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-cr-title      { font-size: calc(2.25 * var(--esc)); }  /* 36 */
    .sa-cr-subtitle   { font-size: calc(0.6875 * var(--esc)); }  /* 11 */
    .sa-cr-text       { font-size: calc(0.9375 * var(--esc)); }  /* 15 */
    .sa-cr-text ul li { font-size: calc(0.875 * var(--esc)); }  /* 14 */
    .sa-cr-cta        { font-size: calc(0.8125 * var(--esc)); }  /* 13 */

    /* sa-cg-* (4) */
    .sa-cg-eyebrow    { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-cg-title      { font-size: calc(2.625 * var(--esc)); }  /* 42 */
    .sa-cg-card-title { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-cg-card-desc  { font-size: calc(0.875 * var(--esc)); }  /* 14 */

    /* sa-nd-* (8) */
    .sa-nd-crumb a              { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-nd-crumb span           { font-size: calc(0.75 * var(--esc)); }  /* 12 */
    .sa-nd-chip                 { font-size: calc(0.625 * var(--esc)); }  /* 10 */
    .sa-nd-text h2              { font-size: calc(1.625 * var(--esc)); }  /* 26 */
    .sa-nd-text h3              { font-size: calc(1.3125 * var(--esc)); }  /* 21 */
    .sa-nd-text h4              { font-size: calc(1.0625 * var(--esc)); }  /* 17 */
    .sa-nd-text blockquote      { font-size: calc(1.25 * var(--esc)); }  /* 20 */
    .sa-nd-text blockquote cite { font-size: calc(0.75 * var(--esc)); }  /* 12 */
}

/* ==============================================================
   BOOK A MEETING -- 4 Set 2026
   Botao por representante na pagina das feiras + o popup do pedido
   de reuniao. Ver views/Cms/include-book-meeting.tpl.
   ============================================================== */

/* O cartao do representante passa a ter uma faixa no fundo, como no
   prototipo (FeirasPage.tsx ~265): o botao ocupa a linha toda e encosta
   as margens do cartao -- por isso a largura recupera os 32px do padding
   com margem negativa, em vez de se tirar o padding ao cartao inteiro. */
.sa-feiras-rep {
    flex-wrap: wrap;
    padding: 16px 16px 0;
}

.sa-feiras-rep-info {
    flex: 1 1 auto;
    min-width: 0;   /* um email comprido nao rebenta o cartao */
}

/* O `color` no hover e obrigatorio: sem ele a regra global do topo deste
   ficheiro -- `a:hover, a:focus { color: #f0f0f0 }` -- apagava o email
   sobre o fundo branco do cartao. No desenho o hover do email e um
   sublinhado e nao uma mudanca de cor. */
.sa-feiras-rep-email:hover,
.sa-feiras-rep-email:focus {
    color: var(--color-primary);
    text-decoration: underline;
}

.sa-feiras-rep-btn {
    flex: 0 0 auto;
    width: calc(100% + 32px);
    margin: 14px -16px 0;
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color .2s ease, color .2s ease;
}

.sa-feiras-rep-btn svg { width: 10px; height: 10px; }

.sa-feiras-rep-btn:hover,
.sa-feiras-rep-btn:focus {
    background: var(--color-primary);
    color: #ffffff;
}

/* --- O popup ------------------------------------------------------- */

/* A janela abre e fecha pelo atributo `hidden`, posto pelo JavaScript.
   O `[hidden]` precisa de ser declarado a seguir ao display:flex, senao o
   flex ganha ao valor por omissao do atributo e a janela nascia aberta. */
.sa-bm-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sa-bm-modal[hidden] { display: none; }

/* Enquanto a janela esta aberta a pagina por baixo nao anda. */
body.sa-bm-lock { overflow: hidden; }

.sa-bm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 21, 36, 0.72);
}

.sa-bm-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.sa-bm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.sa-bm-title {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-dark);
}

.sa-bm-sub {
    margin: 4px 0 0;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.sa-bm-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-light);
}

.sa-bm-close svg { width: 16px; height: 16px; }
.sa-bm-close:hover { color: var(--color-dark); }

.sa-bm-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sa-bm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 600px) {
    .sa-bm-grid { grid-template-columns: 1fr 1fr; }
}

.sa-bm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sa-bm-field > span {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.sa-bm-field input,
.sa-bm-field textarea {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 13px;
    color: var(--color-dark);
    background: #ffffff;
    border: 1px solid #d7dde3;
    padding: 10px 12px;
    width: 100%;
    border-radius: 0;
}

.sa-bm-field input:focus,
.sa-bm-field textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.sa-bm-field textarea { resize: vertical; min-height: 72px; }

/* Honeypot: fora do ecra, mas sem display:none -- ha bots que ignoram os
   campos escondidos por display e caem neste na mesma. */
.sa-bm-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sa-bm-note {
    margin: 0;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--color-text-light);
}

.sa-bm-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 300;
    font-size: 12px;
    color: var(--color-text-light);
    cursor: pointer;
}

.sa-bm-consent input { margin-top: 2px; flex-shrink: 0; }

/* Outra vez o `color`: sem ele o link da politica ficava quase-branco. */
.sa-bm-consent a { color: var(--color-primary); }
.sa-bm-consent a:hover,
.sa-bm-consent a:focus { color: var(--color-primary); text-decoration: underline; }

.sa-bm-error {
    margin: 0;
    font-weight: 300;
    font-size: 12px;
    color: #b4462a;
}

.sa-bm-submit {
    height: 44px;
    background: var(--color-primary);
    color: #ffffff;
    border: 0;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s ease;
}

.sa-bm-submit:hover { opacity: .9; }
.sa-bm-submit[disabled] { opacity: .5; cursor: default; }

.sa-bm-done {
    padding: 40px 24px;
    text-align: center;
    color: var(--color-dark);
}

.sa-bm-done svg {
    width: 34px;
    height: 34px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.sa-bm-done p {
    margin: 0;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
}

/* Selo do reCAPTCHA (30 Set 2026): sempre por cima de tudo. Havia elementos
   fixos da pagina a tapa-lo. O Google poe o z-index inline, dai o !important. */
.grecaptcha-badge { z-index: 2147483647 !important; }