:root{
  --navy:#0F0C2D; --brand:#EC008C; --ink:#D4007E;
  /* BR007-Q27, fechada 2026-09-09 — REGRA, nao cor nova.
     Sobre navy o #EC008C da 4,45: cumpre o limiar de 3,0 de superficies e
     tipos grandes, falha o de 4,5 de texto pequeno. Logo, em faixa escura o
     magenta so entra como FILETE, preenchimento, logotipo, titulo e subtitulo;
     o texto pequeno passa a --mutd (9,58). Nao ha terceiro magenta. */
  --ok-escuro:#4ED8A0;
  --paper:#F9F9F9; --linha:#E4E2ED; --txt:#333333; --mut:#6E6B85; --mutd:#B9B5D6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Roboto,system-ui,-apple-system,'Segoe UI',sans-serif;
     color:var(--txt);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,.pop{font-family:Poppins,system-ui,sans-serif;font-weight:700;line-height:1.2;
     text-wrap:balance}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- topo ---- */
.topo{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.topo .halo{position:absolute;right:-90px;top:-70px;width:420px;opacity:.06;pointer-events:none}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;
    gap:20px;flex-wrap:wrap;position:relative}
nav .marca img{height:30px;display:block}
nav .links{display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--mutd);text-decoration:none;font-size:15px}
nav a:hover,nav a[aria-current="page"]{color:#fff}
nav .lingua{font-family:Poppins,sans-serif;font-weight:500;font-size:13px;letter-spacing:1px;
    border:1px solid var(--mutd);border-radius:4px;padding:2px 7px}
.cabecalho{padding:60px 0 74px;max-width:680px;position:relative}
.cabecalho.curto{padding:44px 0 52px}
.cabecalho h1{font-size:clamp(28px,4.6vw,44px);letter-spacing:-.5px}
.cabecalho p{font-size:clamp(16px,2vw,19px);color:var(--mutd);margin-top:18px;max-width:60ch}
.eyebrow{font-family:Poppins,sans-serif;font-weight:500;font-size:12px;letter-spacing:2px;
     text-transform:uppercase;margin-bottom:14px;display:block}
.topo .eyebrow{color:var(--mutd)}
/* o acento de marca na faixa escura e este filete — superficie, nao texto */
.topo .cabecalho h1::after,.final h2::after{content:"";display:block;width:54px;
     height:3px;border-radius:2px;background:var(--brand);margin-top:18px}
.cta{display:inline-block;margin-top:30px;background:var(--ink);color:#fff;
     text-decoration:none;font-family:Poppins,sans-serif;font-weight:500;font-size:16px;
     padding:13px 26px;border-radius:6px}
.cta:hover{background:var(--brand)}

/* ---- seccoes ---- */
section{padding:66px 0;border-bottom:1px solid var(--linha)}
section.alt{background:var(--paper)}
section .eyebrow{color:var(--ink)}
h2{font-size:clamp(22px,3.1vw,30px);color:var(--navy);max-width:22ch}
.lead{font-size:17px;color:var(--mut);margin-top:14px;max-width:62ch}

.duas{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.caixa{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:24px}
.caixa.cheia{background:var(--paper);border-color:var(--paper)}
.caixa h3{font-size:18px;color:var(--navy);margin-bottom:10px}
.caixa p{color:var(--mut)}
ul.pontos{list-style:none;margin-top:4px}
ul.pontos li{color:var(--mut);padding:3px 0 3px 18px;position:relative}
ul.pontos li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:6px;
     border-radius:50%;background:var(--brand)}
.nota{font-size:16px;color:var(--navy);font-family:Poppins,sans-serif;font-weight:500;
     margin-top:26px}

.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.passo{border-top:3px solid var(--acento,#013B7C);padding-top:14px}
.passo .n{font-family:Poppins,sans-serif;font-weight:700;font-size:13px;color:var(--acento,#013B7C)}
.passo h3{font-size:17px;color:var(--navy);margin:5px 0 7px}
.passo p{font-size:14px;color:var(--mut)}

.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.mod{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:22px;
     text-decoration:none;display:block}
.mod:hover{border-color:var(--tom);box-shadow:0 2px 16px rgba(15,12,45,.08)}
.mod .dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--tom);
     margin-bottom:14px;opacity:.35}
.mod.on{border-color:var(--tom)}
.mod.on .dot{opacity:1}
.mod h3{font-size:18px;color:var(--navy)}
.mod .amb{font-family:Poppins,sans-serif;font-weight:500;font-size:13.5px;color:var(--mut);
     margin:2px 0 9px}
.mod.on.tomtexto .amb{color:var(--tom)}
.mod p{font-size:13.5px;color:var(--mut)}

.selo{display:inline-block;font-family:Poppins,sans-serif;font-weight:500;font-size:12px;
     letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:99px;
     border:1px solid currentColor}
.selo.ja{color:var(--ok-escuro)}
.selo.depois{color:var(--mutd)}

.cenario{border-left:3px solid var(--linha);padding:2px 0 2px 22px;margin-top:30px}
.cenario h3{font-size:19px;color:var(--navy);margin-bottom:8px}
.cenario .par{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px}
.cenario .par div h4{font-family:Poppins,sans-serif;font-weight:500;font-size:13px;
     letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.cenario .par div p{color:var(--txt)}

/* ---- ecras do produto ---- */
.ecras{margin-top:34px;display:grid;gap:34px}
/* min-width:0 nos dois: um item de grid recusa-se a encolher abaixo do conteudo
   (min-width:auto por defeito), e sem isto a largura minima da imagem em ecra
   estreito empurra a PAGINA INTEIRA para scroll horizontal. */
.ecras>*{min-width:0}
.ecra{margin:30px 0 0;display:block;min-width:0;max-width:100%}
.ecra .quadro{display:block;border-radius:9px;border:1px solid var(--linha);
     background:#fff;overflow:hidden;
     box-shadow:0 1px 2px rgba(15,12,45,.06),0 14px 34px -22px rgba(15,12,45,.45)}
.ecra img{display:block;width:100%;height:auto}
.ecra figcaption{margin-top:13px;font-size:14.5px;color:var(--mut);max-width:78ch;
     line-height:1.55}
.ecra figcaption b{color:var(--navy);font-family:Poppins,sans-serif;font-weight:600}
.ecra.destaque img{border-color:#D8D5E6}
.selo-maqueta{display:inline-block;margin-top:26px;font-family:Poppins,sans-serif;
     font-weight:500;font-size:12.5px;letter-spacing:.4px;color:var(--mut);
     background:var(--paper);border:1px solid var(--linha);border-radius:20px;
     padding:6px 14px}
.aviso{background:#FFF6FB;border:1px solid #F6D6E8;border-radius:8px;padding:18px 22px;
     margin-top:26px}
.aviso p{color:var(--ink);font-size:15px;max-width:76ch}

.modelos{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.modelo{border:1px solid var(--linha);border-radius:8px;padding:26px}
.modelo h3{font-size:20px;color:var(--navy)}
.modelo .quem{font-family:Poppins,sans-serif;font-weight:500;font-size:14px;
     color:var(--ink);margin:4px 0 14px}

.final{background:var(--navy);color:#fff;border:0;position:relative;overflow:hidden}
.final .halo{position:absolute;left:-80px;bottom:-110px;width:340px;opacity:.05}
.final h2{color:#fff;max-width:26ch}
.final p{color:var(--mutd);font-size:17px;margin-top:16px;max-width:58ch}
.final .eyebrow{color:var(--mutd)}
.final a.mail{display:inline-block;margin-top:26px;font-family:Poppins,sans-serif;
     font-weight:500;font-size:20px;color:#fff;text-decoration:none;
     border-bottom:2px solid var(--brand);padding-bottom:3px}

.rodape{background:var(--navy);color:var(--mutd);font-size:14px;padding:26px 0 40px;
     border-top:1px solid rgba(255,255,255,.08)}
.rodape .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- empresas.html (Rota A-4) ------------------------------------------
   Duas classes, e so estas. A pagina reutiliza tudo o resto do site. */
.perguntas{list-style:none;padding:0;margin:26px 0 0;max-width:62ch}
.perguntas li{font-family:Poppins,system-ui,sans-serif;font-weight:500;
     font-size:21px;line-height:1.45;color:var(--navy);
     padding:16px 0 16px 30px;border-bottom:1px solid var(--linha);position:relative}
.perguntas li::before{content:"—";position:absolute;left:0;color:var(--ink);font-weight:700}
.duas .col{min-width:0}
.duas .col h3{font-family:Roboto,system-ui,sans-serif;font-weight:700;font-size:13px;
     line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
     margin:0 0 16px}
.duas .col ul{list-style:none;padding:0;margin:0}
.duas .col li{font-family:Poppins,system-ui,sans-serif;font-weight:500;font-size:20px;
     line-height:1.5;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--linha)}
@media(max-width:540px){ .perguntas li{font-size:18px} .duas .col li{font-size:17px} }

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media(max-width:880px){
  .passos,.mods{grid-template-columns:repeat(2,1fr)}
  .duas,.modelos,.tres,.cenario .par{grid-template-columns:1fr}
  /* Um ecra de 1760px reduzido a 342px da 19% — decorativo, nao legivel, e o
     objectivo destas imagens e serem lidas. Abaixo dos 880 a figura passa a
     caixa de scroll horizontal com uma largura minima que se le. */
  .ecra .quadro{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ecra img{min-width:860px}
  .ecra figcaption::after{content:' Arraste para o lado para ver o ecrã todo, ou toque para o abrir em tamanho real.';color:var(--ink)}
  /* texto em CSS nao passa pelo ingles.py: a versao inglesa fica aqui */
  html[lang="en"] .ecra figcaption::after{content:' Swipe sideways to see the whole screen, or tap to open it at full size.'}
}
@media(max-width:540px){
  .passos,.mods{grid-template-columns:1fr}
  section{padding:48px 0}
  .cabecalho{padding:40px 0 52px}
}

/* ---- paginas legais e consentimento (scripts/legal.py) ---- */
.legal{max-width:72ch}
.legal h2{font-size:clamp(19px,2.4vw,23px);max-width:none;margin-top:40px}
.legal p,.legal ul{margin-top:12px}
.legal ul{padding-left:22px}
.legal li{margin-top:8px}
.legal a{color:var(--navy)}
.rodape .ligacoes{display:flex;gap:18px;flex-wrap:wrap}
.rodape .ligacoes a,.rodape .ligacoes button{color:var(--mutd);font:inherit;background:none;
     border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rodape .ligacoes a:hover,.rodape .ligacoes button:hover{color:#fff}
.consentimento{position:fixed;right:16px;bottom:16px;left:16px;z-index:50;max-width:540px;
     margin-left:auto;background:#fff;color:var(--txt);border:1px solid var(--linha);
     border-radius:10px;padding:20px 22px;box-shadow:0 10px 40px rgba(15,12,45,.2);
     font-size:15px;line-height:1.55}
.consentimento a{color:var(--navy)}
.consentimento .botoes{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
/* os dois botoes IGUAIS, de proposito: rejeitar tem de custar o mesmo que aceitar */
.consentimento button{flex:1 1 140px;font-family:Poppins,sans-serif;font-weight:500;
     font-size:15px;padding:11px 18px;border-radius:6px;cursor:pointer;
     background:var(--navy);color:#fff;border:1px solid var(--navy)}
.consentimento button:hover{background:#2A2560}