:root {
  --fm-navy: #0F172A;
  --fm-orange: #F97316;
  --fm-bg: #ffffff;
  --fm-text: #1a1a1a;
  --fm-text-dim: #64748b;
  --fm-navy-dark: #0B1220;
  --fm-border: #E2E8F0;
  --fm-bg-alt: #F8FAFC;
  --fm-radius: 4px;
  --fm-shadow: 0 2px 8px rgba(0,0,0,.07);
  --fm-shadow-lg: 0 4px 24px rgba(0,0,0,.1);
  /* Linguagem comum do ecossistema (iagratis.pt, esimples.pt): botões em
     pílula, cartões arredondados, palavra marcada a amarelo. O laranja dos
     botões é mais escuro que o da marca — branco sobre #F97316 não tem contraste. */
  --fm-orange-btn: #EA580C;
  --fm-orange-btn-hover: #C2410C;
  --fm-orange-texto: #C2410C;
  --fm-orange-claro: #FFF7ED;
  --fm-marca-amarelo: #FDE68A;
  --fm-raio-cartao: 18px;
  --fm-raio-bloco: 24px;
}

/* .page-hero — banner de título das páginas estáticas (Pages, uxbasic:
   /sobre-nos, /politica-de-privacidade, ...). !important pela mesma razão de
   sempre: pages.css (extraCss por página) carrega DEPOIS de site.css (ver
   layout/head.php), min-height:50vh + texto preto por omissão ficava enorme
   e sem nada a ver com o resto do site. */
.page-hero {
  min-height: 0 !important;
  padding: clamp(40px, 6vw, 64px) 24px clamp(24px, 4vw, 36px) !important;
  background: radial-gradient(ellipse at top, #FFEDD5, #fff 62%) !important;
  color: var(--fm-navy) !important;
  text-align: center;
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem) !important; letter-spacing: -.03em; color: var(--fm-navy) !important; }
.page-hero h2 { color: var(--fm-text-dim) !important; }
/* Texto das Pages (sobre nós, privacidade, termos): largura de leitura confortável. */
.page-hero + .section .container { max-width: 760px; }
.page-hero + .section h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
.page-hero + .section p, .page-hero + .section li { line-height: 1.7; color: #334155; }
.page-hero + .section ul { padding-left: 1.2rem; }
.page-hero + .section li { margin-bottom: .5rem; }
.page-hero + .section a { color: var(--fm-orange-texto); }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--fm-navy);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}
.bi { line-height: 1; vertical-align: -.1em; }

.fm-navbar { background: var(--fm-navy); }
.fm-navbar .navbar-brand, .fm-navbar .nav-link { color: #fff; }

/* .layout-header/.layout-footer — chrome do módulo Layout partilhado (uxbasic),
   usado por toda a app (home incluída — partials/layout.php chama o mesmo
   views/layout/header.php de apps/fabricademoveis). Header branco com
   logótipo (como nos mockups Stitch), footer navy.
   !important: layout/head.php (uxbasic) injecta layout.css DEPOIS deste
   ficheiro — com a mesma especificidade, os valores por omissão do layout.css
   ganhavam sempre a cascata. Em vez de tocar na layer partilhada (uxbasic é
   estável, ver feedback_platform_shared_layers_stable), força-se aqui. */
.layout-header { background: #fff !important; color: var(--fm-text) !important; border-bottom: 1px solid var(--fm-border); }
.layout-footer { background: var(--fm-navy) !important; color: #fff !important; border-top: none !important; }
.layout-footer { padding: 32px 24px 20px; }
/* Mesma grelha do header: .layout-header tem 24px de padding (layout.css) e
   lá dentro um .container do Bootstrap (12px de padding, larguras por
   breakpoint). O footer imita isso em vez dos 1200px fixos do layout.css,
   senão o conteúdo ficava desalinhado do logótipo. Selector composto porque
   layout.css carrega depois deste ficheiro. */
.layout-footer .layout-footer-grid,
.layout-footer .layout-footer-bottom { max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
@media (min-width: 576px)  { .layout-footer .layout-footer-grid, .layout-footer .layout-footer-bottom { max-width: 540px; } }
@media (min-width: 768px)  { .layout-footer .layout-footer-grid, .layout-footer .layout-footer-bottom { max-width: 720px; } }
@media (min-width: 992px)  { .layout-footer .layout-footer-grid, .layout-footer .layout-footer-bottom { max-width: 960px; } }
@media (min-width: 1200px) { .layout-footer .layout-footer-grid, .layout-footer .layout-footer-bottom { max-width: 1140px; } }
@media (min-width: 1400px) { .layout-footer .layout-footer-grid, .layout-footer .layout-footer-bottom { max-width: 1320px; } }
/* position:sticky já vem do layout.css partilhado (uxbasic), mas a home usa
   o seu próprio partials/layout.php (cabeçalho HTML próprio, sem passar por
   layout/head.php) — nunca carrega esse ficheiro, por isso o sticky nunca
   chegava a aplicar-se lá. Repor aqui garante o mesmo em todas as páginas. */
.layout-header { display: block; padding: 10px 0; position: sticky; top: 0; z-index: 100; }
.layout-brand { display: inline-flex; align-items: center; }
.layout-brand, .layout-brand:hover { text-decoration: none; }
/* Marca (views/partials/marca.php): quadrado + nome em texto, como iagratis/esimples. */
.fm-marca { display: inline-flex; align-items: center; gap: .45rem; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; color: var(--fm-navy); white-space: nowrap; }
.fm-marca-icone { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: .55rem; background: var(--fm-orange); color: #fff; display: inline-grid; place-items: center; }
.fm-marca-icone svg { width: 1.3rem; height: 1.3rem; }
.fm-marca-de { font-weight: 500; color: var(--fm-text-dim); }
.fm-marca-pt { color: var(--fm-orange); }
.layout-footer .fm-marca { color: #fff; }
.layout-footer .fm-marca-de { color: #94A3B8; }
.layout-footer .fm-marca-pt { color: #FB923C; }
/* !important pela mesma razão do .layout-header acima — layout.css
   (uxbasic) injecta-se depois deste ficheiro e define --layout-text/-muted
   escuros (pensados para um footer claro), ilegíveis sobre o fundo navy. */
.layout-footer-brand { color: #fff !important; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.layout-footer-contact a,
.layout-footer-col nav a { color: rgba(255, 255, 255, .75) !important; }
.layout-footer-contact a:hover,
.layout-footer-col nav a:hover { color: #fff !important; }
.layout-footer-bottom { border-top-color: rgba(255, 255, 255, .15) !important; color: rgba(255, 255, 255, .6); }
.fm-footer-tagline { color: rgba(255, 255, 255, .7); font-size: .9rem; margin-top: 4px; max-width: 320px; }

/* .layout-header > .container — mesma largura máxima do resto das páginas
   (navbar: logo à esquerda, "Ver fábricas"/"Pedir orçamento" à direita;
   pesquisa por baixo), em vez do padding fixo antigo do .fm-navbar. */
.fm-header-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fm-header-links { display: flex; gap: 28px; margin-left: auto; margin-right: 12px; }
/* .layout-header prefixado: layout.css (uxbasic) tem '.layout-header nav a' em cinzento, mais específico. */
.layout-header .fm-header-links a { color: var(--fm-navy); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.layout-header .fm-header-links a:hover { color: var(--fm-orange); }
.fm-header-menu-botao { display: none; }
/* Botão do header: "Pedir orçamento" → "Orçamento" no mobile, para caber ao lado da marca. */
.fm-so-estreito { display: none; }
@media (max-width: 419px) { .fm-so-largo { display: none; } .fm-so-estreito { display: inline; } }
/* Mobile: logótipo | Pedir orçamento | ☰ — o <nav> passa a painel por baixo
   do header (posicionado contra o .layout-header, que é sticky), aberto pelo
   botão ☰ (header.js põe .aberto no <nav>). */
/* Até 991px (tablet incluído): com a marca em texto, os 3 links + botão já não
   cabem numa linha — passam para o painel ☰. */
@media (max-width: 991px) {
  .fm-marca { font-size: .95rem; gap: .3rem; }
  .fm-marca-icone { width: 1.65rem; height: 1.65rem; border-radius: .5rem; }
  .fm-marca-icone svg { width: 1.1rem; height: 1.1rem; }
  .fm-header-topo { gap: 8px; }
  .fm-header-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .fm-header-acoes .btn { font-size: .8rem; padding: .3rem .6rem; white-space: nowrap; }
  .fm-header-menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 1.5rem;
    color: var(--fm-navy);
    background: transparent;
    border: 1px solid var(--fm-border);
    border-radius: 6px;
  }
  .fm-header-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--fm-border);
    box-shadow: var(--fm-shadow-lg);
    padding: 6px 0;
  }
  .fm-header-links.aberto { display: flex; }
  .layout-header .fm-header-links a { padding: 12px 24px; font-size: 1rem; }
  .layout-header .fm-header-links a:hover { background: var(--fm-bg-alt); }
}
.fm-header-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.fm-header-search { margin: 14px auto 0; max-width: 640px; }
@media (max-width: 767px) { .fm-header-search { max-width: 100%; } }
/* Ecrãs muito estreitos (iPhone SE 1.ª geração, 320px): só o ícone da marca. */
@media (max-width: 359px) { .fm-marca-txt { display: none; } }


/* Botões em pílula. Laranja = só pedir orçamento / acção principal; escuro e
   claro para tudo o resto (procurar, mapa, ver mais). */
.btn-fm-primary, .btn-fm-escuro, .btn-fm-claro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  font-weight: 700;
  padding: .6rem 1.3rem;
  white-space: nowrap;
}
.btn-fm-primary { background: var(--fm-orange-btn); color: #fff; border: 0; }
.btn-fm-primary:hover, .btn-fm-primary:focus-visible { background: var(--fm-orange-btn-hover); color: #fff; }
.btn-fm-escuro { background: var(--fm-navy); color: #fff; border: 0; }
.btn-fm-escuro:hover, .btn-fm-escuro:focus-visible { background: #1E293B; color: #fff; }
.btn-fm-claro { background: #fff; color: var(--fm-navy); border: 1.5px solid var(--fm-border); }
.btn-fm-claro:hover, .btn-fm-claro:focus-visible { border-color: var(--fm-navy); color: var(--fm-navy); }
.btn-fm-primary.btn-sm, .btn-fm-escuro.btn-sm, .btn-fm-claro.btn-sm { padding: .4rem 1rem; font-size: .88rem; }
.btn-fm-primary.btn-lg, .btn-fm-escuro.btn-lg, .btn-fm-claro.btn-lg { padding: .8rem 1.6rem; font-size: 1.02rem; }

/* Palavra marcada a amarelo nos títulos (traço comum do ecossistema). */
.fm-marcado { background: linear-gradient(transparent 60%, var(--fm-marca-amarelo) 60%); padding: 0 .1em; }
.fm-marcado-escuro { background: linear-gradient(transparent 60%, rgba(253, 230, 138, .35) 60%); padding: 0 .1em; }
/* Etiqueta por cima dos títulos de secção ("COMO FUNCIONA"). */
.fm-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fm-orange-texto); margin-bottom: .6rem; }
/* Pílula informativa ("27 fábricas verificadas"). */
.fm-pilula { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid var(--fm-border); border-radius: 999px; padding: .35rem .9rem; font-size: .88rem; color: var(--fm-text-dim); }
.fm-pilula .bi { color: var(--fm-orange-btn); }

/* Modal "Pedir orçamento" — mesmo padrão visual/estrutural do .perfil-modal
   (overlay fixo + .aberto), mas maior (leva o formulário completo) e global
   (site.css, não perfil.css) porque é partilhado por todas as páginas — ver
   views/partials/pedido-modal.php, incluído por views/layout/header.php. */
.pedido-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 23, 42, .6);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  /* o modal é incluído dentro de <header class="layout-header"> (color:#fff
     para o texto do nav sobre fundo navy) — sem repor a cor aqui, título e
     labels do form ficavam brancos sobre o fundo branco do modal. */
  color: var(--fm-text);
}
.pedido-modal-overlay.aberto { display: flex; }
.fm-modal-aberta, .fm-modal-aberta body { overflow: hidden; }
.pedido-modal {
  position: relative;
  background: #fff;
  border-radius: var(--fm-raio-bloco);
  padding: 32px 30px 28px;
  max-width: 600px;
  width: 100%;
  margin: auto;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .45);
}
.pedido-modal-fechar {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--fm-bg-alt);
  border: 0;
  border-radius: 50%;
  font-size: .95rem;
  color: var(--fm-navy);
  cursor: pointer;
}
.pedido-modal-fechar:hover { background: var(--fm-border); }
/* Mobile: a modal ocupa o ecrã (mais espaço para o formulário). */
@media (max-width: 575px) {
  .pedido-modal-overlay { padding: 0; align-items: stretch; }
  .pedido-modal { border-radius: 0; min-height: 100%; padding: 24px 18px 28px; box-shadow: none; }
}

/* Formulário de pedido (partials/pedido-form-campos.php) — modal e /pedido. */
.fm-pedido-titulo { margin: 0 0 6px; font-size: clamp(1.6rem, 3.4vw, 2rem); }
.fm-pedido-intro { margin: 0 0 22px; color: var(--fm-text-dim); }
.fm-pedido-grupo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.fm-pedido-grupo legend, .fm-pedido-grupo > .form-label { font-size: .95rem; font-weight: 700; color: var(--fm-navy); margin-bottom: 10px; }
.fm-pedido-grupo legend { float: none; width: 100%; padding: 0; }
.fm-pedido-grupo .row .form-label { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.fm-pedido-grupo .form-control, .fm-pedido-grupo .form-select { border-radius: 12px; padding: .6rem .85rem; border-color: var(--fm-border); }
.fm-pedido-grupo .form-control:focus, .fm-pedido-grupo .form-select:focus { border-color: var(--fm-orange-btn); box-shadow: 0 0 0 3px rgba(234, 88, 12, .15); }
.fm-ficheiro { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1.5px dashed var(--fm-border); border-radius: 12px; padding: 10px 12px; cursor: pointer; margin: 0; }
.fm-ficheiro:hover, .fm-ficheiro:focus-within { border-color: var(--fm-navy); }
.fm-ficheiro-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fm-ficheiro-botao { display: inline-flex; align-items: center; gap: 6px; background: var(--fm-bg-alt); border: 1px solid var(--fm-border); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .88rem; color: var(--fm-navy); }
.fm-ficheiro-nome { font-size: .88rem; color: var(--fm-text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 140px; }
.fm-pedido-nota { margin: 12px 0 0; font-size: .82rem; color: var(--fm-text-dim); text-align: center; }
.fm-pedido-nota a { color: inherit; }
.fm-erro { margin-top: 6px; font-size: .875em; color: var(--bs-form-invalid-color, #dc3545); }
.fm-obrigatorio { color: var(--fm-orange-btn); }
.fm-pedido-sucesso { text-align: center; padding: 28px 0 12px; }
.fm-pedido-sucesso > .bi { font-size: 3rem; color: #16A34A; }
.fm-pedido-sucesso p { max-width: 420px; margin: 8px auto 20px; color: var(--fm-text-dim); }
.fm-pedido-pagina { padding: clamp(32px, 6vw, 64px) 0; background: radial-gradient(ellipse at top, #FFEDD5, #fff 60%); }
.fm-pedido-cartao { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--fm-border); border-radius: var(--fm-raio-bloco); padding: clamp(22px, 4vw, 36px); box-shadow: 0 20px 44px -28px rgba(15, 23, 42, .35); }

.btn-perfil-submeter {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  border: none;
  text-decoration: none;
  background: var(--fm-orange-btn);
  color: #fff;
}
.btn-perfil-submeter:hover { background: var(--fm-orange-btn-hover); color: #fff; }

/* Chips de "O que quer fabricar?" no pedido de orçamento
   (partials/pedido-form-campos.php) — radio real escondido, label como chip. */
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-chip { position: relative; margin: 0; }
.fm-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fm-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--fm-border);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--fm-text);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.fm-chip-label:hover { border-color: var(--fm-navy); }
.fm-chip-input:checked + .fm-chip-label { border-color: var(--fm-navy); background: var(--fm-navy); color: #fff; }
.fm-chip-input:focus-visible + .fm-chip-label { outline: 2px solid var(--fm-orange); outline-offset: 2px; }
.fm-opcional { color: var(--fm-text-dim); font-weight: 400; font-size: .85em; }

/* "Como funciona" em banda escura (partials/como-funciona-passos.php) — home e /como-funciona. */
.fm-passos { background: var(--fm-navy); color: #fff; padding: clamp(48px, 7vw, 76px) 0; }
.fm-eyebrow-claro { color: #FDBA74; }
.fm-passos-titulo { margin: 0 0 32px; color: #fff; font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.15; }
.fm-passos-lista { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.fm-passos-lista li { border-top: 1px solid #334155; padding-top: 18px; }
.fm-passos-n { display: block; font-weight: 800; font-size: 1.75rem; color: #FDBA74; }
.fm-passos-lista h3 { margin: 6px 0; color: #fff; font-size: 1.2rem; }
.fm-passos-lista p { margin: 0; color: #94A3B8; line-height: 1.55; }
.fm-passos-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #1E293B; border-radius: var(--fm-raio-cartao); padding: 20px 24px; }
.fm-passos-cta strong { display: block; font-size: 1.12rem; }
.fm-passos-cta span { color: #94A3B8; font-size: .95rem; }
@media (max-width: 575px) { .fm-passos-cta .btn { width: 100%; } }

/* Colunas de links do footer (localidades / especialidades). */
.fm-footer-titulo { color: #fff; font-size: .95rem; font-weight: 700; margin: 0 0 12px; }
.layout-footer-col nav ul.fm-footer-lista-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }

/* Faixa "É uma fábrica?" (views/layout/footer.php) — está dentro do <footer>,
   mas o footer fica sem padding-top e ela anula o lateral (24px), com fundo branco: visualmente é a última
   secção antes do footer escuro, com um cartão escuro arredondado lá dentro. */
.layout-footer { padding-top: 0 !important; }
.layout-footer .fm-cta-fabricas { margin: 0 -24px 40px; padding: clamp(8px, 2vw, 16px) 24px clamp(40px, 5vw, 56px); background: #fff; }
/* Sem a faixa (/registo), a grelha precisa do espaço que o padding-top dava. */
.layout-footer > .layout-footer-grid:first-child { padding-top: 32px; }
.fm-cta-fabricas-cartao {
  max-width: 1116px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  background: var(--fm-navy); color: #fff; border-radius: var(--fm-raio-bloco); padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
}
.fm-cta-fabricas-cartao h2 { margin: 0 0 4px; color: #fff; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.fm-cta-fabricas-cartao p { margin: 0; color: #94A3B8; }
@media (max-width: 575px) { .fm-cta-fabricas-cartao .btn { width: 100%; } }

/* Aviso de cookies (partials/cookies.php) — cartão fixo no fundo do ecrã. */
.fm-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 250;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  background: #fff; color: var(--fm-navy); border: 1px solid var(--fm-border); border-radius: var(--fm-raio-cartao);
  padding: 18px 20px; box-shadow: 0 20px 44px -16px rgba(15, 23, 42, .4);
}
.fm-cookies[hidden] { display: none; }
.fm-cookies-texto { flex: 1 1 360px; min-width: 0; }
.fm-cookies-texto strong { display: block; margin-bottom: 2px; }
.fm-cookies-texto p { margin: 0; font-size: .9rem; color: var(--fm-text-dim); }
.fm-cookies-texto a { color: var(--fm-orange-texto); }
.fm-cookies-acoes { display: flex; gap: 8px; }
@media (max-width: 575px) { .fm-cookies-acoes { width: 100%; } .fm-cookies-acoes .btn { flex: 1; } }
.layout-footer .fm-footer-cookies { color: rgba(255, 255, 255, .6); text-decoration: underline; }
.layout-footer .fm-footer-cookies:hover { color: #fff; }

/* Marca + badge de versão no footer (config 'app_versao'). */
.fm-footer-marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fm-footer-marca .layout-footer-brand { margin-bottom: 0; }
.fm-versao { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid #334155; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #94A3B8; }