/* ============================================================
   LEICAR — kit do tema (frente pública)
   Único ficheiro de estilo do site. As secções do page-builder
   usam SÓ as classes daqui — nada de estilos soltos nas views.

   Medidas tiradas do Figma (frame 1512): conteúdo 1272px,
   margem lateral 120px, respiro vertical 150px por secção.
   Em ecrãs pequenos ambos encolhem com clamp() — o desenho é
   o mesmo, só respira menos.
   ============================================================ */

/* ---------- 1 · Tokens ------------------------------------ */
:root{
  /* Paleta da marca (variáveis do Figma) */
  --verde:#3FA435;              /* verde leicar2 */
  --verde-rgb:63,164,53;
  --azul:#2D518D;               /* azul leicar */
  --tinta:#323E48;              /* Cinza_escuro */
  --cinza:#F5F5F5;              /* cinza site */
  --verde-suave:#E8F5E2;        /* fundo dos ícones */
  --verde-fundo:rgba(var(--verde-rgb),.3);  /* faixas Números e CTA */

  /* Tipografia. Gotham Rounded é licenciada: se os ficheiros não
     estiverem em /themes/leicar/fonts/, a cascata cai numa
     geométrica arredondada do sistema e o desenho aguenta-se. */
  --f:'Gotham Rounded', 'Gothic A1', ui-rounded, 'SF Pro Rounded',
      'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Ritmo */
  --pad:clamp(1.25rem, 7.94vw, 120px);   /* margem lateral */
  /* Respiro vertical de CADA secção. O espaço ENTRE duas secções é a soma dos
     dois respiros — portanto o dobro deste valor, e igual em toda a parte:
     ~195px no máximo, contra os 300px de antes (-35%). */
  --sec-y:clamp(2.25rem, 6.45vw, 97px);  /* respiro vertical */
  /* Espaço entre o título de uma secção e o seu conteúdo. Era 80px nas
     métricas e 64px nas grelhas — o mesmo gesto com duas medidas. */
  --sec-gap:clamp(2rem, 4.2vw, 64px);
  --wrap:1272px;                          /* largura do conteúdo */
}

/* Gotham Rounded — colocar os .woff2 licenciados em
   public/themes/leicar/fonts/ e estes @font-face passam a valer.
   Sem os ficheiros, o browser ignora-os em silêncio (sem erro). */
@font-face{font-family:'Gotham Rounded';src:url('fonts/GothamRounded-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('fonts/GothamRounded-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham Rounded';src:url('fonts/GothamRounded-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2 · Base -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--tinta);
  font-family:var(--f);font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 3 · Estrutura --------------------------------- */
.sec{padding:var(--sec-y) var(--pad)}
/* Antes, duas secções brancas seguidas dispensavam o respiro de cima da segunda —
   ficavam com METADE do espaço das que ladeiam uma faixa verde (150px contra
   300px). Resultado: a página tinha vazios de dois tamanhos, conforme a cor do
   vizinho, e lia-se como descuido. Agora todas as secções respiram o mesmo dos
   dois lados, seja qual for o fundo, e a distância entre quaisquer duas é
   sempre a mesma. */
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%}

/* Títulos de secção — 40px bold verde, centrados */
.sec-title{font-size:clamp(1.75rem,3.3vw,40px);font-weight:700;line-height:1.2;color:var(--verde);text-align:center}
.sec-sub{font-size:clamp(1.1rem,1.9vw,25px);font-weight:400;line-height:1.4;color:var(--tinta);text-align:center;margin-top:16px}

/* Botão sólido azul (Ver Projeto) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;border-radius:10px;
  background:var(--azul);color:#fff;
  font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;
  transition:filter .18s ease, transform .18s ease;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}

/* Medalhão de ícone — 80px, redondo. `--bg` troca o fundo por secção.
   Cada SVG traz a SUA largura/altura do Figma (a vaca é 42.6×36, a garrafa
   21×46.5, o troféu 44×44) — por isso aqui NÃO se impõe um tamanho comum,
   que espalmaria os ícones não-quadrados. */
.icon-badge{
  --bg:var(--verde-suave);
  flex:0 0 auto;width:80px;height:80px;border-radius:50%;
  background:var(--bg);color:var(--verde);
  display:flex;align-items:center;justify-content:center;
}
.icon-badge svg{flex:0 0 auto}

/* ---------- 4 · Cabeçalho --------------------------------- */
.site-header{position:absolute;inset:0 0 auto;z-index:10;padding:52px var(--pad) 0}
.site-header .wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.site-header img{height:164px;width:auto}
@media (max-width:700px){
  .site-header{padding-top:24px}
  .site-header img{height:96px}
}

/* ---------- 5 · Hero -------------------------------------- */
/* O bloco de texto encosta ao FUNDO (como no Figma: acaba 93px acima da base),
   não ao centro — é isso que lhe dá o peso de banner em vez de cartaz. */
.hero{position:relative;min-height:850px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;
  padding:0 var(--pad) clamp(3rem,6.15vw,93px)}
/* Carrossel: cada fotografia é uma CAMADA que se sobrepõe às outras — a mudança
   de destaque é a camada nova a ganhar opacidade, nunca um salto de layout. */
.hero__slide{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
.hero__slide.is-active{opacity:1;z-index:1}
.hero__bg{width:100%;height:100%;object-fit:cover;display:block}
/* Véu escuro: mais denso à esquerda, onde assenta o texto. */
.hero__veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(100deg,rgba(8,20,12,.78) 0%,rgba(8,20,12,.62) 38%,rgba(8,20,12,.18) 78%,rgba(8,20,12,.05) 100%)}
.hero .wrap{position:relative;z-index:3;width:100%}
/* Só o destaque activo ocupa espaço — os outros dois ficam prontos, escondidos,
   à espera da sua vez (é o mesmo <h1>/<div> de sempre, só entram um de cada vez). */
.hero__copy{display:none}
.hero__copy.is-active{display:block}
.hero__title{font-size:clamp(2rem,3.9vw,48px);font-weight:700;line-height:1.25;max-width:760px;text-wrap:balance}
.hero__lead{margin-top:36px;max-width:560px;font-size:clamp(1rem,1.45vw,18px);font-weight:500;line-height:2;opacity:.92}
.hero__lead p{margin:0}
@media (max-width:700px){.hero{min-height:640px}}

/* Barra de progresso: um segmento fino por destaque, que enche da esquerda para
   a direita ao longo dos 4s — o mesmo gesto do Instagram/WhatsApp Status. */
.hero__progresso{display:flex;gap:6px;max-width:340px;margin-top:44px}
.hero__progresso-seg{
  flex:1;padding:8px 0;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hero__progresso-seg span{
  display:block;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.32);
}
.hero__progresso-seg span::after{
  content:'';display:block;height:100%;width:0;background:#fff;border-radius:2px;
}
.hero__progresso-seg.is-active span::after{width:var(--prog,0%)}
.hero__progresso-seg.is-active span::after{transition:width linear var(--prog-dur,4s)}
.hero__progresso-seg.ja-passou span::after{width:100%;transition:none}
@media (max-width:700px){.hero__progresso{max-width:220px;margin-top:32px}}

/* ---------- 6 · Grupo (imagem + texto) -------------------- */
.split{display:flex;align-items:center;gap:96px}
.split__media{flex:0 0 509px;max-width:509px;aspect-ratio:509/584;border-radius:10px;overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.split__title{font-size:clamp(1.75rem,3.3vw,40px);font-weight:700;line-height:1.25;color:var(--verde)}
.split__text{font-size:clamp(1rem,1.6vw,20px);line-height:1.6;color:var(--tinta)}
.split__text p{margin:0 0 1.6em}
.split__text p:last-child{margin-bottom:0}
@media (max-width:1000px){
  .split{flex-direction:column;gap:40px;align-items:stretch}
  .split__media{flex:0 0 auto;max-width:none;aspect-ratio:4/3}
}

/* ---------- 7 · Números ----------------------------------- */
.faixa-verde{background:var(--verde-fundo)}
/* Grelha (e não flex) com colunas minmax(0,…): sem o 0, "+25 milhões" a 28px
   empurra a coluna para lá da largura do ecrã e o site ganha scroll lateral. */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:var(--sec-gap)}
.metric{min-width:0;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.metric .icon-badge{--bg:#fff}
/* `tabular-nums`: todos os algarismos com a MESMA largura. Sem isto, um "1"
   ocupa menos que um "8" e o número inteiro encolhe e alarga a cada frame
   enquanto conta — é essa dança lateral, e não a contagem, que se lê como
   falta de fluidez. */
.metric__valor{font-size:clamp(1.75rem,3.6vw,44px);font-weight:700;line-height:1.1;color:var(--verde);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.metric__label{font-size:clamp(.95rem,1.45vw,18px);font-weight:700;line-height:1.35;color:var(--tinta)}
/* 2 colunas é o CHÃO — sempre "2 a 2", até ao telemóvel mais estreito
   (pedido explícito: nunca colapsar para 1 coluna). */
@media (max-width:860px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;margin-top:48px}}

/* ---------- 8 · Serviços ---------------------------------- */
.grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:var(--sec-gap)}
.card-servico{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  min-height:240px;padding:32px;border-radius:16px;background:var(--cinza);
  text-align:center;text-decoration:none;
}
.card-servico__nome{font-size:clamp(1rem,1.45vw,18px);font-weight:700;line-height:1.3;color:var(--azul);overflow-wrap:break-word}
/* 2 colunas é o CHÃO aqui também — mas a 620px o cartão ainda encolhe o
   min-height (o texto sozinho não precisa da altura toda dos cartões com
   ícone+texto lado a lado num ecrã largo). */
@media (max-width:980px){.grelha{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}}
@media (max-width:620px){.card-servico{min-height:0}}

/* ---------- 9 · Banner (imagem + texto à direita) --------- */
.banner{position:relative;min-height:500px;display:flex;align-items:center;overflow:hidden;color:#fff;padding-inline:var(--pad)}
.banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner__veil{position:absolute;inset:0;z-index:1;background:rgba(8,20,12,.6)}
.banner .wrap{position:relative;z-index:2;display:flex;justify-content:flex-end;padding-block:60px}
.banner__body{width:621px;max-width:100%;display:flex;flex-direction:column;gap:24px}
.banner__title{font-size:clamp(1.6rem,3.3vw,40px);font-weight:700;line-height:1.25;max-width:495px}
.banner__text{font-size:clamp(1rem,1.45vw,18px);font-weight:500;line-height:1.6;max-width:513px;opacity:.88}
@media (max-width:900px){.banner .wrap{justify-content:flex-start}}

/* ---------- 10 · Valores ---------------------------------- */
.cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:var(--sec-gap)}
.card-valor{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  padding:40px;border-radius:16px;background:var(--cinza);text-align:center;
}
.card-valor__titulo{font-size:clamp(1.15rem,1.9vw,24px);font-weight:700;line-height:1.2;color:var(--azul)}
.card-valor__texto{font-size:16px;line-height:1.5;color:var(--tinta)}
/* 2 colunas é o CHÃO aqui também. */
@media (max-width:980px){.cards-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px}.card-valor{padding:32px}}

/* ---------- 11 · CTA -------------------------------------- */
.cta{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cta__sub{font-size:clamp(1rem,1.6vw,20px);line-height:1.5;color:var(--tinta);opacity:.9}
.cta .btn{margin-top:16px}

/* ---------- 12 · Rodapé ----------------------------------- */
.site-footer{background:var(--verde);color:#fff;padding:80px var(--pad)}
.site-footer .wrap{display:flex;flex-direction:column;gap:80px}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:16px}
.footer-col--contactos{width:400px;max-width:100%}
.footer-col--social{width:360px;max-width:100%;gap:24px}
.footer-titulo{font-size:18px;font-weight:700;line-height:1.3}
.footer-morada{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}
.footer-linha{display:flex;align-items:center;gap:8px;padding-top:8px;font-size:16px;font-weight:700;text-decoration:none}
.footer-linha svg{flex:0 0 auto}
.footer-linha:hover{text-decoration:underline}
.footer-redes{display:flex;flex-wrap:wrap;gap:12px}
.rede{
  width:48px;height:48px;border-radius:50%;
  border:1px solid #fff;background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease;
}
.rede svg{flex:0 0 auto}
.rede:hover{background:#fff;color:var(--verde)}
.footer-bottom{display:flex;flex-direction:column;gap:24px}
.footer-bottom hr{border:0;border-top:1px solid rgba(255,255,255,.45);margin:0;width:100%}
/* Barra de cofinanciamento: os logótipos institucionais exigem fundo claro, por
   isso vive num cartão branco — sobre o verde do rodapé ficariam ilegíveis e
   fora das normas de comunicação do Portugal 2030. */
.footer-financiamento{display:flex;justify-content:center}
.footer-financiamento img{
  display:block;width:100%;max-width:280px;height:auto;
  background:#fff;border-radius:12px;padding:14px 20px;
}
@media (max-width:700px){.footer-financiamento img{padding:12px 14px;border-radius:10px}}
.footer-copy{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}
.footer-copy a{text-decoration:none}
.footer-copy a:hover{text-decoration:underline}
@media (max-width:700px){.site-footer{padding-block:56px}.site-footer .wrap{gap:48px}}

/* ---------- 13 · Ecrã de abertura -------------------------- */
/* Fundo verde, medalhão branco com o logótipo, e a cortina sobe com o topo
   curvo — um campo a abrir-se. Tudo em CSS com `forwards`: sem JavaScript a
   cortina sobe à mesma e o ecrã sai do caminho. O JS só decide se aparece.
   Ver themes/leicar/front/partials/intro.blade.php. */
/* A curva é do PRÓPRIO painel, não de um elemento pendurado por baixo: assim o
   bordo de baixo É o arco, sem a linha recta que antes o cortava a meio.
   O painel é 140px mais alto do que o ecrã, e é essa sobra — a que leva o arco —
   que fica escondida abaixo da dobra enquanto está parado. */
.intro{
  position:fixed;left:0;right:0;top:0;height:calc(100% + 140px);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:140px;            /* centra o logótipo na parte VISÍVEL do painel */
  background:var(--verde);
  border-radius:0 0 50% 50%/0 0 140px 140px;
  animation:intro-cortina .9s cubic-bezier(.76,0,.24,1) 1.05s forwards;
}
.intro__marca{
  width:clamp(148px,26vw,208px);aspect-ratio:1;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  animation:intro-marca .75s cubic-bezier(.22,.61,.36,1) both;
}
/* A margem interior é dada pela LARGURA do logótipo, não por padding em
   percentagem: padding percentual resolve contra a largura do PAI (aqui, o ecrã
   inteiro), e num monitor largo dava 211px de cada lado num círculo de 208px —
   o espaço interior ficava negativo e o logótipo desaparecia. */
.intro__marca img{width:58%;height:auto;object-fit:contain}
.intro__nome{font-size:1.5rem;font-weight:700;color:var(--verde)}

@keyframes intro-marca{
  from{opacity:0;transform:scale(.82)}
  to  {opacity:1;transform:none}
}
@keyframes intro-cortina{
  to{transform:translateY(-100%);visibility:hidden}
}

/* Enquanto a abertura corre, a página por baixo não se rola. A classe é posta e
   TIRADA pelo JavaScript (overflow não é uma propriedade animável, não dava para
   a largar por keyframes) — sem JS a classe nunca chega a existir e não há nada
   preso. */
html.com-intro,html.com-intro body{overflow:hidden}

/* Já vista nesta sessão, ou "reduzir movimento" ligado → nem chega a existir. */
html.sem-intro .intro{display:none}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}

/* ---------- 14 · Aviso de cookies -------------------------- */
/* Faixa no fundo do ecrã, nas cores da marca: fundo verde, botão de aceitar
   branco (o contraste mais forte que há sobre o verde) e o secundário em
   contorno. Ver themes/leicar/front/partials/cookies.blade.php. */
.cookies{
  position:fixed;z-index:9998;left:50%;bottom:clamp(1rem,3vw,2rem);
  width:min(980px,calc(100% - 2rem));
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.25rem,3vw,2rem);
  border-radius:16px;background:var(--verde);color:#fff;
  box-shadow:0 18px 46px rgba(var(--verde-rgb),.34), 0 4px 12px rgba(50,62,72,.18);
  transform:translate(-50%,calc(100% + 2rem));opacity:0;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .38s ease;
}
.cookies.is-visivel{transform:translate(-50%,0);opacity:1}
.cookies__corpo{flex:1 1 320px;min-width:0}
.cookies__titulo{font-size:1.05rem;font-weight:700;line-height:1.3;margin:0 0 .35rem}
.cookies__texto{font-size:.92rem;line-height:1.55;margin:0;opacity:.95}
.cookies__texto a{color:#fff;text-underline-offset:3px}
.cookies__accoes{display:flex;gap:.75rem;flex-wrap:wrap;flex:0 0 auto}
.cookies__btn{
  font-family:inherit;font-size:.92rem;font-weight:700;line-height:1.2;
  padding:12px 22px;border-radius:10px;border:1px solid #fff;cursor:pointer;
  background:#fff;color:var(--verde);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.cookies__btn:hover{transform:translateY(-1px)}
.cookies__btn--fantasma{background:transparent;color:#fff}
.cookies__btn--fantasma:hover{background:rgba(255,255,255,.16)}
@media (max-width:640px){
  .cookies{flex-direction:column;align-items:stretch;text-align:left}
  /* `flex:1 1 320px` no corpo foi pensado para LARGURA (o layout lado a
     lado). Ao mudar para coluna, esse "320px" passa a valer no eixo
     principal — que agora é a ALTURA — e a caixa de texto ficava com
     ~320px de altura mínima mesmo tendo só ~120px de conteúdo. */
  .cookies__corpo{flex-basis:auto}
  .cookies__accoes{width:100%}
  .cookies__btn{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){
  .cookies{transition:opacity .2s ease;transform:translate(-50%,0)}
}

/* ---------- 15 · Cartões com relevo (efeito 3D) ------------ */
/* Os cartões dos Serviços e do "Porquê escolher" inclinam-se na direção do
   cursor e ganham uma sombra verde da marca. A rotação vem do JS por variáveis
   (--rx/--ry); a CSS é que decide se a aplica — assim basta uma media query
   para a desligar onde não faz sentido, sem tocar no JavaScript.
   Ver themes/leicar/front/partials/tilt.blade.php. */
.tilt{
  --rx:0deg; --ry:0deg; --lift:0px;
  transform-style:preserve-3d;
  transform:perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
/* Enquanto o cursor anda em cima, a rotação segue-o sem atraso; a transição fica
   só para o regresso ao sítio (quando a classe sai). */
.tilt.is-tilting{transition:box-shadow .35s ease}
/* Sombra na cor da marca, em duas camadas: uma curta que assenta o cartão no
   fundo e uma larga que faz o halo. Só com a larga ficava a flutuar. */
.tilt:hover{
  --lift:-6px;
  box-shadow:0 8px 16px rgba(var(--verde-rgb),.20), 0 22px 46px rgba(var(--verde-rgb),.32);
}

/* Profundidade: o medalhão do ícone e o título vêm um pouco à frente do cartão,
   o que é o que dá a leitura de relevo em vez de "imagem torta". */
.tilt .icon-badge,.tilt .card-servico__nome,.tilt .card-valor__titulo{
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.tilt.is-tilting .icon-badge{transform:translateZ(34px)}
.tilt.is-tilting .card-servico__nome,.tilt.is-tilting .card-valor__titulo{transform:translateZ(18px)}

/* Sem rato (telemóvel/tablet) não há para onde inclinar. */
@media (hover:none),(pointer:coarse){
  .tilt{transform:none}
  .tilt.is-tilting .icon-badge,.tilt.is-tilting .card-servico__nome,.tilt.is-tilting .card-valor__titulo{transform:none}
}
/* Quem pediu menos movimento fica só com a sombra — continua a haver resposta
   ao cursor, mas nada se mexe. */
@media (prefers-reduced-motion:reduce){
  .tilt,.tilt .icon-badge,.tilt .card-servico__nome,.tilt .card-valor__titulo{transform:none;transition:box-shadow .2s ease}
}

/* ---------- 16 · Páginas interiores ------------------------ */
/* Sem banner de fundo, o cabeçalho deixa de flutuar e ocupa o seu lugar. */
.site-header--fixo{position:static;padding:40px var(--pad) 32px;background:#fff}
.site-header--fixo img{height:120px}
@media (max-width:700px){.site-header--fixo{padding:20px var(--pad) 16px}.site-header--fixo img{height:84px}}

/* Cabeçalho de página: a mesma faixa verde da home, mas mais baixa. */
.pagina-hero{padding-block:clamp(2.5rem,6.6vw,100px)}
.pagina-hero .sec-title{font-size:clamp(2rem,3.9vw,48px)}

/* Ficheiros para descarregar */
.docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--sec-gap)}
.doc{display:flex;align-items:flex-start;gap:24px;padding:32px;border-radius:16px;background:var(--cinza)}
.doc__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.doc__titulo{font-size:clamp(1.1rem,1.6vw,20px);font-weight:700;line-height:1.3;color:var(--azul);overflow-wrap:break-word}
.doc__meta{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde)}
.doc__desc{font-size:16px;line-height:1.5;color:var(--tinta)}
.doc .btn{margin-top:6px}
@media (max-width:900px){.docs{grid-template-columns:minmax(0,1fr);margin-top:48px}}
@media (max-width:520px){.doc{flex-direction:column;gap:20px;padding:24px}}

/* Texto corrido (política de privacidade e afins) */
.prosa{max-width:760px}
.prosa__titulo{font-size:clamp(1.5rem,2.6vw,32px);font-weight:700;line-height:1.25;color:var(--verde);margin-bottom:2rem}
.prosa__bloco{font-size:17px;line-height:1.75;color:var(--tinta)}
.prosa__bloco p{margin:0 0 1.4em}
.prosa__bloco p:last-child{margin-bottom:0}
.prosa__bloco h2,.prosa__bloco h3,.prosa__bloco strong{color:var(--azul)}
.prosa__bloco h2,.prosa__bloco h3{font-size:1.25rem;font-weight:700;line-height:1.3;margin:2.2em 0 .8em}
/* O primeiro capítulo não leva o respiro de cima (senão abre um buraco no topo). */
.prosa__bloco:first-child > :first-child{margin-top:0}
.prosa__bloco ul,.prosa__bloco ol{margin:0 0 1.4em;padding-left:1.4em}
.prosa__bloco li{margin-bottom:.5em}
.prosa__bloco a{color:var(--verde);text-underline-offset:3px}
.prosa__bloco + .prosa__bloco{margin-top:1.4em}

/* ---------- 17 · Auxiliares ------------------------------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 18 · Movimento -------------------------------- */
/* A página constrói-se à medida que se lê. Ver themes/leicar/kit.js.
   NOTA IMPORTANTE: nada aqui esconde seja o que for sem a classe `.anima`,
   que é o PRÓPRIO JavaScript que põe no <html>. Sem JS — ou com "reduzir
   movimento" — a página fica estática e inteiramente visível, em vez de em
   branco à espera de um observador que nunca chega. */
/* ESTADO INICIAL — antes de o kit.js existir.
   O atributo `data-anim` só é posto pelo JavaScript, que corre com `defer`:
   entre o primeiro desenho e essa marcação, os elementos estavam VISÍVEIS.
   Via-se o logótipo e o texto aparecerem, desaparecerem e só depois entrarem.
   Por isso o estado inicial vive aqui, em selectores, e não no atributo.

   ⚠️ Esta lista é a mesma de `ALVOS` no kit.js (mais o herói e o logótipo).
   Mexer numa é mexer na outra — senão volta o salto. */
.anima .sec-title,.anima .sec-sub,
.anima .split__title,.anima .split__text,.anima .split__media,
.anima .metric,.anima .card-servico,.anima .card-valor,.anima .doc,
.anima .banner__title,.anima .banner__text,
.anima .cta__sub,.anima .sec .btn,
.anima .hero__title,.anima .hero__lead,
.anima .prosa__titulo,.anima .prosa__bloco,
.anima .site-header img{
  opacity:0;
}
/* Quando entram, mandam eles: o `data-anim` com `is-in` vem depois na cascata
   e devolve a opacidade. */

.anima [data-anim]{
  opacity:0;
  transform:translate3d(0,var(--anim-y,26px),0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--anim-d,0ms);
  will-change:opacity,transform;
}
.anima [data-anim].is-in{opacity:1;transform:none}

/* A ENTRADA NA PÁGINA é outra coisa que o scroll.
   Quem chega (ou faz refresh) deve APANHAR a página a construir-se; quem
   percorre já está em movimento e não quer esperar por cada bloco. Por isso
   o primeiro ecrã entra devagar, num gesto só, e o resto do site mantém o
   ritmo vivo do scroll. A classe é posta pelo kit.js e nunca mais volta. */
/* Cada linha do título e do texto do herói entra por si. O kit.js parte-os em
   <span class="linha"> — que têm de ser `block` para as quebras se manterem
   exactamente onde estavam antes de alguém lhes mexer. */
.linha{display:block}

.anima [data-anim].e-entrada{
  transition-duration:1.5s;
  transition-timing-function:cubic-bezier(.16,.84,.28,1);
  --anim-y:38px;
}

/* Cartões entram com um toque de escala: dá-lhes peso, sem o exagero de os
   fazer "saltar" para dentro do ecrã. */
.anima .card-servico[data-anim],
.anima .card-valor[data-anim]{transform:translate3d(0,var(--anim-y,26px),0) scale(.965)}
.anima .card-servico[data-anim].is-in,
.anima .card-valor[data-anim].is-in{transform:none}

/* A FOTOGRAFIA DESCOBRE-SE, não aparece.
   O ecrã de abertura do site é uma cortina que sobe. Repetir esse gesto aqui
   — a imagem a ser descoberta de baixo para cima — faz do movimento um
   vocabulário e não uma colecção de efeitos: quem já viu a abertura reconhece
   o gesto sem saber que o está a reconhecer.

   `clip-path` corre no compositor, como `transform`: não custa layout. E a
   imagem por baixo continua o seu passeio lento, portanto o que se descobre
   já está vivo — não é um cartaz a ser desembrulhado. */
.anima .split__media[data-anim]{
  clip-path:inset(100% 0 0 0);
  transform:translate3d(0,var(--anim-y,26px),0);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1),
             clip-path 1.1s cubic-bezier(.16,.84,.28,1);
  transition-delay:var(--anim-d,0ms);
}
.anima .split__media[data-anim].is-in{clip-path:inset(0 0 0 0);transform:none}

/* O medalhão do ícone acompanha o número que começa a contar: um gesto curto,
   com a mesma inércia do resto. Sem isto, o ícone é a única coisa parada numa
   secção onde tudo se move. */
.anima .metric[data-anim] .icon-badge{
  transform:scale(.82);
  transition:transform .75s cubic-bezier(.34,1.36,.64,1);
  transition-delay:calc(var(--anim-d,0ms) + 120ms);
}
.anima .metric[data-anim].is-in .icon-badge{transform:none}

/* AS FOTOGRAFIAS NAVEGAM.
   Nenhuma imagem grande fica parada: todas fazem um percurso lento pelo seu
   próprio enquadramento — entra o zoom, desloca-se, e volta.

   Três decisões que explicam os números:

   · `linear` e não `ease-in-out`. Com aceleração, o primeiro terço do ciclo é
     quase imóvel e o movimento só «começa» a meio — era o que se via no herói.
     A velocidade constante faz-se notar desde o primeiro segundo.
   · Amplitude generosa (12–20% de escala) e deslocação até 3%: para ser
     evidente sem nunca descobrir os bordos, o mínimo de escala é sempre > 1.
   · Durações diferentes por imagem (14s / 12s / 11s): se fossem iguais, as
     fotografias respiravam todas ao mesmo tempo e o site parecia pulsar.

   O que decide se o movimento SE VÊ é a velocidade — escala a dividir pela
   duração —, não a amplitude sozinha. A 15% em 24s (0,6%/s) a imagem do
   bloco «grupo» parecia parada; a 26% em 11s (2,4%/s) lê-se logo.            */
@media (prefers-reduced-motion:no-preference){
  .hero__bg,.banner__bg,.split__media img{
    will-change:transform;
    backface-visibility:hidden;   /* evita o tremor do texto por cima em WebKit */
  }

  /* A fotografia do herói também CHEGA: revela-se em 1,8s enquanto já navega.
     São duas animações no mesmo elemento de propósito — uma trata da
     `opacity`, a outra do `transform`. Se ambas mexessem no `transform`,
     a última declarada apagava a primeira. */
  .hero__bg{
    animation:foto-chega 1.8s ease-out both,
              navega-a 14s linear infinite alternate;
    transform-origin:58% 45%;
  }
  @keyframes foto-chega{from{opacity:0}to{opacity:1}}
  /* Enquanto a cortina de abertura está no ar, a fotografia espera: revelar-se
     por trás dela seria gastar a melhor entrada do site sem ninguém ver. A
     classe sai quando a cortina acaba de subir — e a animação arranca aí. */
  .com-intro .hero__bg{animation-play-state:paused}
  @keyframes navega-a{
    from{transform:scale(1.04) translate3d(-2.6%,1.8%,0)}
    to  {transform:scale(1.30) translate3d(3.0%,-3.2%,0)}
  }

  .banner__bg{
    animation:navega-b 12s linear infinite alternate;
    transform-origin:38% 55%;
  }
  @keyframes navega-b{
    from{transform:scale(1.05) translate3d(2.6%,-1.8%,0)}
    to  {transform:scale(1.32) translate3d(-3.2%,2.8%,0)}
  }

  .split__media img{
    animation:navega-c 11s linear infinite alternate;
    transform-origin:50% 40%;
  }
  @keyframes navega-c{
    from{transform:scale(1.04) translate3d(-2.2%,-1.8%,0)}
    to  {transform:scale(1.30) translate3d(2.6%,3.0%,0)}
  }

  /* O véu do herói adensa-se enquanto o texto entra: a fotografia começa
     limpa e só depois cede o palco às palavras. */
  .hero__veil{animation:hero-veu 1.6s ease-out both}
  @keyframes hero-veu{from{opacity:.55}to{opacity:1}}
}

/* Botões e cartões: a reacção ao toque também é experiência. */
.btn{transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease,background-color .25s ease,color .25s ease}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .doc{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
  .doc:hover{transform:translateY(-3px)}
}

@media (prefers-reduced-motion:reduce){
  .hero__bg,.hero__veil,.banner__bg,.split__media img{animation:none;transform:none}
  /* Os destaques continuam a mudar (é conteúdo, não decoração) — só sem o
     desvanecer animado entre fotografias e sem a barra a "encher" visualmente. */
  .hero__slide{transition:none}
  .hero__progresso-seg span::after{transition:none!important}
}