/* ============================================================================
   GIACOMINI ES — kit.css
   Folha de estilo da frente pública. Segue a convenção do esqueleto LKCOM:
   cada tema serve public/themes/{tema}/kit.css|js e as páginas ligam-no
   diretamente (o Vite/Tailwind é só do admin — ver vite.config.js).

   Referência visual: Figma "Giacomini ES" › Homepage (node 1:2), 1440px.
   Os números citados nos comentários são as medidas do Figma nessa largura.
   ========================================================================== */

/* ---------- Tipografia (Raleway, auto-alojada — sem pedidos ao Google) ----- */
@font-face{
  font-family:'Raleway';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/themes/giacomini/fonts/raleway-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Raleway';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/themes/giacomini/fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens de design (Figma › Variáveis) -------------------------- */
:root{
  /* Cores */
  --rojo:#ED1C24;        /* "Red Giacomini" */
  --rojo-osc:#D9000D;    /* botões de envio / redes sociais no rodapé */
  --tinta:#000000;       /* corpo de texto */
  --texto:#303633;       /* "Preto Textos" */
  --negro:#101211;       /* etiqueta inativa do seletor */
  --blanco:#FFFFFF;
  --gris:#F4F5F5;        /* fundo de cartão / secção */
  --gris-2:#EDEDED;      /* pílula inativa */

  /* Tipografia. O Figma desenha tudo com entrelinha 1.1667 (24→28, 36→42,
     48→56, 16→18.7): é o valor fixado abaixo. O `normal` do Chrome para a
     Raleway dá 1.2085 e afastava as caixas de texto do original. */
  --f:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --lh:1.1667;

  /* Escalas de texto (desktop = valor do Figma; encolhem com clamp) */
  --t-h1:clamp(2rem,1.35rem + 2.9vw,3rem);        /* 48 */
  --t-h2:clamp(1.625rem,1.28rem + 1.53vw,2.25rem);/* 36 */
  --t-h3:clamp(1.25rem,1.11rem + 0.62vw,1.5rem);  /* 24 */
  --t-body:1rem;                                   /* 16 */
  --t-small:0.875rem;                              /* 14 */
  --t-xs:0.75rem;                                  /* 12 */

  /* Métrica de página: 1164px de conteúdo com goteiras de 138px a 1440px */
  --wrap:1164px;
  --gut:clamp(20px,4.45vw,64px);
  --r:24px;              /* raio dominante do design */
  --header-h:100px;
}

/* ---------- Reset curto --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f);font-size:var(--t-body);font-weight:400;
  line-height:var(--lh);color:var(--tinta);background:var(--blanco);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}

/* ---------- Estruturas partilhadas ---------------------------------------- */
.wrap{width:min(var(--wrap),100% - 2 * var(--gut));margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--rojo);color:#fff;
  padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:800;
}
.skip-link:focus{left:0}

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

/* Título de secção — vermelho, 36/700, centrado (Figma: caixa de 770 centrada) */
.titulo-seccion{
  font-size:var(--t-h2);font-weight:700;color:var(--rojo);text-align:center;
  max-width:770px;margin-inline:auto;
}
.titulo-seccion--izq{text-align:left;margin-inline:0}
.titulo-seccion b{font-weight:700;color:var(--negro);display:block}

/* CTA principal — "Diseña tu confort" (Figma: px16 py10, r24, 16/700) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:10px 16px;border-radius:var(--r);background:var(--rojo);color:var(--blanco);
  font-size:var(--t-body);font-weight:700;line-height:var(--lh);
  transition:background-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--rojo-osc)}
.btn:active{transform:translateY(1px)}

/* "Ver todos" — pílula branca com texto vermelho (Figma: px16 py8, 14/700) */
.btn-ver-todos{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:var(--r);background:var(--blanco);color:var(--rojo);
  font-size:var(--t-small);font-weight:700;line-height:16px;   /* Figma: 96×32 */
  transition:background-color .18s ease,color .18s ease;
}
.btn-ver-todos:hover{background:var(--rojo);color:var(--blanco)}


/* ============================================================================
   CABEÇALHO  (Figma: 100px, fundo vermelho, logo 197×39 a 138px)
   ========================================================================== */
.cabecalho{
  position:relative;z-index:30;height:var(--header-h);background:var(--rojo);
  display:flex;align-items:center;
}
.cabecalho .wrap{display:flex;align-items:center;gap:24px;align-self:stretch}
.cabecalho__logo{flex:none}
/* O contorno de foco global é vermelho: sobre o cabeçalho vermelho ficava invisível */
.cabecalho :focus-visible{outline-color:var(--blanco)}
.cabecalho__logo img{width:197px;height:39px}

.nav{margin-left:auto;display:flex;align-items:center;gap:40px;align-self:stretch}  /* Figma: 40px entre itens */
.nav a,.nav button{
  color:var(--blanco);font-size:var(--t-body);font-weight:400;line-height:var(--lh);
  display:inline-flex;align-items:center;gap:8px;padding:6px 0;position:relative;
}
/* Hover do item (Figma: node 13:7): Regular → Bold. Como no componente do
   Figma, a caixa mantém a largura do texto regular e o negrito transborda —
   é uma cópia sobreposta e centrada, por isso o menu não salta nem se afasta
   das posições do design. A cópia não é lida por leitores de ecrã. */
.nav__rotulo{position:relative;display:inline-block;transition:color .15s ease}
.nav__rotulo::after{
  content:attr(data-rotulo);content:attr(data-rotulo) / "";
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-weight:700;white-space:nowrap;color:var(--blanco);opacity:0;transition:opacity .15s ease;
}
.nav a:hover .nav__rotulo,.nav a[aria-current="page"] .nav__rotulo,
.nav__grupo:hover .nav__rotulo,.nav__grupo [aria-expanded="true"] .nav__rotulo,.nav__grupo [aria-current="true"] .nav__rotulo{color:transparent}
.nav a:hover .nav__rotulo::after,.nav a[aria-current="page"] .nav__rotulo::after,
.nav__grupo:hover .nav__rotulo::after,.nav__grupo [aria-expanded="true"] .nav__rotulo::after,.nav__grupo [aria-current="true"] .nav__rotulo::after{opacity:1}
.nav__chevron{width:11px;height:7px;flex:none;transition:transform .18s ease}
.nav__grupo:hover .nav__chevron,.nav__grupo [aria-expanded="true"] .nav__chevron{transform:rotate(180deg)}
/* Item com destino e sub-itens: o texto é a ligação e a seta é o botão do
   submenu. Fica igual ao botão único (8px entre o texto e a seta); a seta ganha
   4px de área de toque de cada lado sem mexer no desenho. */
.nav .nav__abrir{padding:6px 4px;margin-left:4px}

/* Submenu (Figma: nodes 449:942 e 449:921) — 340px, r6, itens de 48px;
   hover a vermelho com texto branco em negrito. O grupo ocupa a altura toda
   do cabeçalho, para a lista nascer na aresta de baixo sem um vão pelo meio. */
.nav__grupo{position:relative;display:flex;align-items:center;align-self:stretch}
.nav__sub{
  position:absolute;top:100%;left:0;z-index:40;width:340px;
  background:var(--blanco);border-radius:6px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.nav__grupo:hover .nav__sub,.nav__grupo [aria-expanded="true"] + .nav__sub{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.nav .nav__sub a{
  display:block;padding:16px;color:var(--negro);font-size:var(--t-small);line-height:16px;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease;
}
.nav .nav__sub a:hover,.nav .nav__sub a:focus-visible,.nav .nav__sub a[aria-current="page"]{
  background:var(--rojo);color:var(--blanco);font-weight:700;
}
.nav .nav__sub a:focus-visible{outline-offset:-3px;outline-color:var(--blanco)}

/* Botão de menu (só abaixo de 1100px) */
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff;position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;transition:transform .2s ease,top .2s ease;
}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ============================================================================
   1 · HERÓI  (Figma: imagem 1440×700, degradê vermelho no topo, faixa inferior)
   ========================================================================== */
.heroi{position:relative;height:700px;min-height:520px;overflow:hidden;color:var(--blanco)}
/* Slides do CMS: o enquadramento vem do ponto focal de cada slide (object-position
   inline). As imagens vivem numa camada própria (z-index 0), por baixo do véu. */
.heroi__imagens{position:absolute;inset:0;z-index:0}
.heroi__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.heroi__img[hidden]{display:none}
/* Os textos dos slides partilham a mesma célula: a caixa mede o mais alto e
   trocar de slide nunca muda a altura do herói. Só o ativo se vê. */
.heroi__textos{display:grid;grid-template-columns:minmax(0,1fr)}
.heroi__slide{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0}
.heroi__slide:not(.is-ativo){visibility:hidden;opacity:0}
.heroi__cta{margin-top:32px;align-self:flex-start}

/* Carrossel (2+ slides, kit.js): a imagem e o texto do slide deslizam juntos na
   horizontal, 1,5 s, num carrossel circular — o kit.js calcula a posição a cada
   frame e escreve o translate3d de cada peça; sem transição CSS, que atrasaria
   cada frame e perderia a posição real quando se muda de destino a meio. */
.heroi[data-carrossel]{touch-action:pan-y pinch-zoom}
.heroi[data-carrossel] :is(.heroi__img,.heroi__slide){will-change:transform}
.heroi[data-carrossel] .heroi__img{opacity:1;z-index:1}
.heroi[data-carrossel] .heroi__img.is-ativo{z-index:2}
/* Em cena: o que entra e o que sai. O resto fica invisível (e fora do ecrã). */
.heroi[data-carrossel] .heroi__slide:not(.is-ativo):not(.is-saindo){visibility:hidden;opacity:0}
.heroi[data-carrossel] .heroi__slide.is-saindo{visibility:visible;opacity:1}
.heroi__veu{position:absolute;inset:0;background:rgba(0,0,0,.2)}
/* Degradê vermelho que desce do cabeçalho (Figma: imagem de 1440×131) */
.heroi__degradado{position:absolute;top:0;left:0;width:100%;height:131px;object-fit:fill}
.heroi .wrap{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-start}

.heroi__titulo{
  font-size:var(--t-h1);font-weight:700;line-height:var(--lh);max-width:645px;
  margin-top:237px;text-wrap:balance;                    /* Figma: y=337, herói começa a 100 */
}
.heroi__sub{font-size:var(--t-h3);font-weight:700;margin-top:16px;max-width:673px}

/* Zona dos controlos do carrossel: sempre presente, reserva o lugar dos pontos na composição
   (a altura não depende de haver 1 ou N slides). Os pontos centram-se nela. */
.heroi__controlos{
  position:absolute;left:50%;transform:translateX(-50%);bottom:124px;   /* Figma: y=664 */
  height:12px;display:flex;justify-content:center;
}
/* Pontos (Figma: 12px, 8px de intervalo): um por slide visível, só com 2+ */
.heroi__pontos{position:relative;display:flex;gap:8px}
.heroi__ponto{position:relative;width:12px;height:12px;border-radius:50%;background:var(--gris);padding:0;transition:background-color .2s ease}
.heroi__ponto[aria-current="true"]{background:var(--rojo)}
/* Área de toque de 20×24 à volta do ponto de 12px, sem mudar o desenho */
.heroi__ponto::after{content:"";position:absolute;inset:-6px -4px}
.heroi__pontos :focus-visible{outline:2px solid var(--blanco);outline-offset:3px}

/* Faixa inferior com o texto UNIK (Figma: 100px, #2B2B2B a 25%, multiply) */
.heroi__faixa{
  position:absolute;left:0;right:0;bottom:0;height:100px;
  background:rgba(43,43,43,.25);mix-blend-mode:multiply;
}
.heroi__faixa-texto{
  position:absolute;left:0;right:0;bottom:0;height:100px;display:flex;align-items:center;
}
.heroi__faixa-texto p{font-size:var(--t-h3);font-weight:700;line-height:var(--lh)}
/* O .wrap da faixa não herda a altura total do `.heroi .wrap` do título: assim
   fica centrado nos 100px, como no Figma (texto a y=722). */
.heroi__faixa-texto .wrap{height:auto}

/* CTAs laterais — pílula clara encostada à direita (Figma: 44×132, r22; aqui um
   pouco maior: botões de 44px, pílula de 52×156, ícones na mesma proporção). Globais
   (partials/atalhos, em todas as páginas) e fixas no ecrã: acompanham o scroll.
   No topo da página ficam onde o Figma as põe (222px abaixo do cabeçalho, 322 no
   ecrã); num ecrã baixo sobem o necessário para caberem. Acima do conteúdo e
   abaixo do cabeçalho (o menu móvel), do aviso de cookies e dos diálogos. */
.heroi__lateral{
  position:fixed;top:min(calc(var(--header-h) + 222px),calc(100vh - 172px));right:clamp(12px,4.1vw,59px);z-index:25;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:4px;border-radius:22px;background:var(--gris-2);
}
.heroi__lateral a{
  position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background-color .18s ease;
}
/* Hover (Figma: ícones 63:299, 64:322, 64:338 — «Variant2»): círculo vermelho e
   ícone branco. O mesmo no foco do teclado, com o contorno de foco do site.
   Os ícones são SVG em <img> (vêm do menu do CMS): o desenho serve de máscara e a
   cor é o fundo — exatamente o --rojo em repouso e o branco aqui. */
.heroi__lateral a:is(:hover,:focus-visible){background:var(--rojo)}
.heroi__lateral a:is(:hover,:focus-visible) img[style*="--icone"]{background-color:var(--blanco)}
/* Etiqueta de hover (Figma: node 64:379) — pílula #F4F5F5, p10, r18, 14px
   vermelho, a 9px da coluna e centrada no ícone. Fica sempre no DOM (é o
   nome acessível do link); só se mostra onde há rato e espaço lateral. */
.heroi__rotulo{
  position:absolute;right:calc(100% + 13px);top:50%;transform:translateY(-50%);
  padding:10px;border-radius:18px;background:var(--gris);
  color:var(--rojo);font-size:var(--t-small);line-height:16px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
@media (hover:hover) and (min-width:901px){
  .heroi__lateral a:hover .heroi__rotulo{opacity:1}
}
@media (min-width:901px){
  .heroi__lateral a:focus-visible .heroi__rotulo{opacity:1}
}
/* Cada ícone conserva a sua área útil do Figma (caixa de 36px), escalada ao botão de 44px */
.heroi__lateral img{max-width:36px;max-height:36px;transform:scale(1.222)}   /* ícone do item de menu, no seu tamanho (36×36, 20×17.78, 20×19.95) */
/* A cor: a forma do SVG (--icone, posta pelo partials/atalhos) recorta um fundo
   da cor do tema; o desenho original sai da caixa (object-position) e não se vê.
   Sem --icone (ícone sem máscara), fica o SVG tal como é. */
.heroi__lateral img[style*="--icone"]{
  object-position:-9999px 0;background-color:var(--rojo);transition:background-color .18s ease;
  -webkit-mask:var(--icone) center / contain no-repeat;mask:var(--icone) center / contain no-repeat;
}

/* ============================================================================
   2 · ENTRADA  (Figma: cartão cinzento 968×380, r24, centrado)
   ========================================================================== */
.entrada{padding:40px 0 0}                      /* Figma: 800 → 840 (indicador «scroll») */
/* Indicador «scroll» (Figma: componente 793:813, instância 793:819): rato vermelho
   com o ponto da roda e o texto por baixo, numa caixa de 36×61 centrada;
   840 + 61 + 37 = 938 (o cartão). O contorno é o ::before (2px) — o ::after (1px)
   é o contorno do 2.º estado, invisível em repouso. */
.entrada__scroll{position:relative;width:36px;height:61px;margin:0 auto 37px}
.entrada__scroll-rato{position:absolute;left:7px;top:0;width:23px;height:40px}
.entrada__scroll-rato::before,.entrada__scroll-rato::after{content:"";position:absolute;inset:0;border-radius:42px;border:2px solid var(--rojo)}
.entrada__scroll-rato::after{border-width:1px;opacity:0}
.entrada__scroll::before{content:"";position:absolute;left:16px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--rojo);transform-origin:0 0}
.entrada__scroll-texto{position:absolute;left:0;right:0;top:45px;font-size:var(--t-small);font-weight:400;line-height:16px;text-align:center;color:var(--negro)}
/* A animação do protótipo, em loop e sem hover. No Figma é «On hover → Change to
   Variant2, Smart animate, ease-out, 300ms» (e o regresso ao tirar o rato):
   o ponto desce de y9 para y28 e passa de 5 a 4px, o contorno passa de 2 a 1px e
   tudo fica a 50%. Aqui um ciclo de 2s: 300ms a ir, fica, 300ms a voltar, fica —
   começa e acaba no estado de repouso (sem salto entre ciclos). Só opacity e
   transform (compositor; o browser pára-a sozinho num separador inativo); a
   espessura 2→1px é a troca entre os dois contornos. Sem «reduzir movimento». */
/* Ecrã inicial sem o indicador (herói alto, ecrã baixo): o kit.js (scrollNoEcra)
   põe uma cópia no canto direito do herói, por cima da imagem, e esconde este.
   A posição (--scroll-x/--scroll-y) é medida; sobre a foto fica todo a branco,
   como os textos do herói (o vermelho perde-se nas imagens escuras). */
.entrada--scroll-no-heroi .entrada__scroll{display:none}
.heroi > .entrada__scroll{--rojo:var(--blanco);position:absolute;z-index:3;left:var(--scroll-x,auto);top:var(--scroll-y,auto);margin:0}
.heroi > .entrada__scroll[hidden]{display:none}
.heroi > .entrada__scroll .entrada__scroll-texto{color:var(--blanco)}
/* No lugar da frase da faixa: a frase esconde-se (sem mudar a altura) até ao
   primeiro scroll; aí o indicador sai e a frase volta, uma vez por visita. */
.heroi > .entrada__scroll,.heroi__faixa-texto p{transition:opacity .3s ease,visibility .3s}
.heroi--scroll-na-faixa .heroi__faixa-texto p,
.heroi--scroll-visto > .entrada__scroll{opacity:0;visibility:hidden}
/* Ao abrir, até se decidir (hero/entrada + kit.js): escondida já, sem transição */
.heroi--scroll-a-decidir .heroi__faixa-texto p{opacity:0;visibility:hidden;transition:none}
@media (prefers-reduced-motion:no-preference){
  .entrada__scroll::before{animation:scroll-ponto 2s infinite}
  .entrada__scroll-rato::before{animation:scroll-contorno-grosso 2s infinite}
  .entrada__scroll-rato::after{animation:scroll-contorno-fino 2s infinite}
  .entrada__scroll-texto{animation:scroll-meio 2s infinite}
}
@keyframes scroll-ponto{
  0%{transform:none;opacity:1;animation-timing-function:ease-out}
  15%{transform:translateY(19px) scale(.8);opacity:.5}
  50%{transform:translateY(19px) scale(.8);opacity:.5;animation-timing-function:ease-out}
  65%,100%{transform:none;opacity:1}
}
@keyframes scroll-contorno-grosso{
  0%{opacity:1;animation-timing-function:ease-out}
  15%{opacity:0}
  50%{opacity:0;animation-timing-function:ease-out}
  65%,100%{opacity:1}
}
@keyframes scroll-contorno-fino{
  0%{opacity:0;animation-timing-function:ease-out}
  15%{opacity:.5}
  50%{opacity:.5;animation-timing-function:ease-out}
  65%,100%{opacity:0}
}
@keyframes scroll-meio{
  0%{opacity:1;animation-timing-function:ease-out}
  15%{opacity:.5}
  50%{opacity:.5;animation-timing-function:ease-out}
  65%,100%{opacity:1}
}
/* Figma (node 1:2, revisto em 10-2026): o parágrafo sai do cartão — centrado
   numa coluna de 967px, 69px abaixo do indicador (a margem colapsa com os 37
   dele, por isso é a total), com a linha
   em branco do editor entre os dois parágrafos. O cartão tem a largura da .wrap,
   fica 40px abaixo do texto e leva só a lista: uma grelha de 3 colunas alinhada
   com a coluna do texto (967 = 3 × 307 + 2 × 23), lida por linhas pela ordem do
   CMS; 40px em cima, 48 em baixo, 32 entre linhas, ponto a 18px do texto. Em
   ecrãs mais estreitos as margens laterais encolhem até 24px. */
.entrada__texto{max-width:967px;margin:69px auto 0;font-size:var(--t-h3);font-weight:400;line-height:var(--lh);text-align:center}
.entrada__texto :is(b,strong){font-weight:700;color:var(--rojo)}   /* o negrito do editor sai a vermelho */
.entrada__cartao{
  margin-top:40px;background:var(--gris);border-radius:var(--r);
  padding:40px max(24px,(100% - 967px) / 2) 48px;
}
.entrada__lista{font-size:1.25rem;font-weight:400}   /* 20px fixo (pedido do cliente, 29-10-2026); o parágrafo de cima fica no --t-h3 */
.entrada__lista :is(ul,ol){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 23px}   /* ul semeada ou ol[data-list] do Quill 2 */
.entrada__lista > p:has(> br:only-child){display:none}   /* a linha vazia que o editor deixa depois da lista */
.entrada__lista li{position:relative;padding-left:18px}
.entrada__lista li::before{
  content:"";position:absolute;left:0;top:.375em;width:8px;height:8px;border-radius:50%;background:var(--rojo);
}

/* ============================================================================
   3 · SISTEMA  (título + seletor + diagrama com destaque por zona)
   ========================================================================== */
.sistema{padding:100px 0 0}                     /* Figma: 1302 → 1482 */
.sistema__seletor{display:flex;justify-content:center;gap:16px;margin-top:40px}
.pilula{
  min-width:107px;padding:12px 16px;border-radius:var(--r);background:var(--gris-2);color:var(--negro);  /* Figma: 2×107px */
  font-size:var(--t-small);font-weight:400;line-height:16px;transition:background-color .18s,color .18s;  /* Figma: botão de 40px */
}
.pilula:hover{background:#e2e3e3}
.pilula[aria-selected="true"]{background:var(--rojo);color:var(--blanco)}
.sistema__defs{position:absolute;width:0;height:0;overflow:hidden}

/* Diagrama (Figma: caixa de 1164×367; palco de 573×367 a 297px da esquerda).
   Os dois modos partilham a mesma célula e trocam por crossfade. */
.diagrama{display:grid;margin-top:27px}
.diagrama__painel{
  grid-area:1 / 1;position:relative;aspect-ratio:1164 / 367;
  transition:opacity .6s ease,visibility 0s linear .6s;
}
.diagrama__painel:not(.is-ativo){opacity:0;visibility:hidden;pointer-events:none}
.diagrama__painel.is-ativo{transition:opacity .6s ease,visibility 0s}
.diagrama__palco{position:absolute;left:25.52%;top:0;width:49.23%;height:100%}
.diagrama__img{position:absolute;object-fit:contain;max-width:none}
.diagrama__camada{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--rojo-osc)}

/* Linhas contínuas, pontos e ícones (Figma: traço de 3, #D9000D, pontas redondas) */
.diagrama__linha polyline{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.diagrama__ponto{fill:currentColor}
.diagrama__circulo{fill:currentColor}
.diagrama__icone use{fill:var(--blanco)}
.diagrama__icone[data-zona]{pointer-events:auto;cursor:pointer}
.diagrama__anel{fill:none;stroke:currentColor;stroke-width:1.5;opacity:0;transition:opacity .25s ease}
.diagrama__linha,.diagrama__icone{transition:color .3s ease}

/* Destaque de uma zona (kit.js põe data-zona-ativa no painel e .is-ativa nos
   elementos dessa zona): a imagem fica velada exceto no recorte da zona; o
   resto do desenho passa a cinzento e só a zona ativa mantém o vermelho. */
.diagrama__veu{fill:var(--blanco);fill-opacity:.72;opacity:0;transition:opacity .35s ease}
.diagrama__veu.is-ativa{opacity:1}
.diagrama__painel[data-zona-ativa] .diagrama__linha:not(.is-ativa),
.diagrama__painel[data-zona-ativa] .diagrama__icone:not(.is-ativa){color:var(--texto)}
.diagrama__icone.is-ativa .diagrama__anel{opacity:1}

/* Etiquetas (Figma: 14px, colunas de 279px, centradas na altura do ícone) */
.diagrama__etiquetas{margin:0;padding:0;list-style:none}
.diagrama__et{position:absolute;top:var(--y);transform:translateY(-50%);width:23.97%}
.diagrama__et--izq{right:76.03%;text-align:right}
.diagrama__et--der{left:76.29%;text-align:left}
.diagrama__zona{
  display:inline;padding:0;font-size:var(--t-small);font-weight:400;line-height:var(--lh);
  color:var(--tinta);text-align:inherit;transition:color .25s ease,opacity .25s ease;
}
button.diagrama__zona{cursor:pointer}
.diagrama__painel[data-zona-ativa] .diagrama__zona:not(.is-ativa){opacity:.45}
.diagrama__zona.is-ativa{color:var(--rojo)}
.sistema__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}

/* ============================================================================
   4 · ¿QUÉ QUIERES DISEÑAR?  (3 blocos alternados texto/imagem)
   ========================================================================== */
.disenar{padding:100px 0 0}                     /* Figma: 2040 → 2220 */
.disenar__filas{margin-top:60px;display:flex;flex-direction:column;gap:120px}
.fila{display:grid;grid-template-columns:476fr 574fr;gap:114px;align-items:start}
/* Figma: na "Reforma integral" a imagem está em x=142 (e não 138) e acaba a
   110px do texto, como nos outros blocos — daí os 4px à esquerda. */
.fila--invertida{grid-template-columns:578fr 476fr;column-gap:110px}
.fila--invertida .fila__media{padding-left:4px}
.fila--invertida .fila__texto{order:2}
.fila--invertida .fila__media{order:1}
.fila__titulo{font-size:var(--t-h2);font-weight:700;color:var(--rojo)}
.fila__corpo{margin-top:24px;display:flex;flex-direction:column;gap:1.17em;font-size:var(--t-body)}
.fila__corpo :is(ul,ol){display:flex;flex-direction:column;gap:0;font-weight:700}   /* ul semeada ou ol[data-list] do Quill 2 */
.fila__corpo :is(ul,ol) li{position:relative;padding-left:20px}   /* marcador redondo vermelho (Figma: elipse 8px) */
.fila__corpo :is(ul,ol) li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.fila__corpo :is(ul,ol) strong{font-weight:800}   /* Figma: "Obra nueva" em ExtraBold (negrito do editor), "Reforma" em Bold */
.fila__media img{width:100%;height:354px;object-fit:cover;border-radius:var(--r)}
.fila .btn{margin-top:43px;align-self:flex-start}
.fila__texto{display:flex;flex-direction:column;align-items:flex-start}

/* ============================================================================
   5 · CÓMO PODEMOS AYUDARTE  (degradê + marca de água + 8 passos)
   ========================================================================== */
.ayuda{
  position:relative;overflow:hidden;margin-top:160px;padding:40px 0 120px;
  background:linear-gradient(180deg,var(--gris) 0%,var(--blanco) 100%);
}
.ayuda__marca{
  position:absolute;top:50px;left:36.94%;width:66.94%;max-width:964px;
  pointer-events:none;user-select:none;
}
.ayuda .wrap{position:relative;z-index:1}
.ayuda__titulo{max-width:448px}
.ayuda__passos{
  margin-top:81px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:80px 100px;max-width:1066px;
}
.passo__topo{display:flex;align-items:center;gap:29px}   /* Figma: seta começa 29px após o número */
.passo__num{font-size:clamp(2rem,1.4rem + 2.7vw,3rem);font-weight:700;color:var(--rojo);line-height:var(--lh)}
.passo__texto{margin-top:12px;font-size:var(--t-h3);font-weight:700;color:var(--texto);line-height:var(--lh)}
/* Medida de texto por coluna. O Figma não usa uma grelha regular: cada caixa de
   texto tem a sua largura (197 / 179 / 181 / 181), e é isso que decide onde as
   frases quebram. As colunas mantêm-se iguais (e responsivas); só o texto leva
   a medida do original, para as quebras de linha coincidirem. */
@media (min-width:1101px){
  /* Colunas no passo exato do Figma (começam a 138/435/728/1023) e a seta
     atravessa o intervalo até 17px antes da coluna seguinte. */
  .ayuda__passos{grid-template-columns:297fr 293fr 295fr 181fr;column-gap:0}
  .passo__topo{padding-right:17px}
  .passo:nth-child(4n+1) .passo__texto{max-width:197px}
  .passo:nth-child(4n+2) .passo__texto{max-width:179px}
  .passo:nth-child(4n+3) .passo__texto,
  .passo:nth-child(4n)   .passo__texto{max-width:181px}
}
/* Seta de ligação: linha elástica + a ponta exata do ativo do Figma */
.passo__seta{flex:1;display:flex;align-items:center;min-width:0}
.passo__seta i{flex:1;height:1px;background:var(--rojo)}
.passo__seta svg{flex:none;width:11.27px;height:22.4px;margin-left:-1px}
.passo:nth-child(4n) .passo__seta{display:none}
/* Tablet (≤1100px): 2 colunas; a seta liga o passo da esquerda ao da direita.
   A medida do texto fica perto da do desktop (a 1024px as linhas chegavam a
   ~430px, pesadas em negrito a 24px); o título aproxima-se da lista e as linhas
   de passos um pouco uma da outra, para a secção não crescer. */
@media (max-width:1100px){
  .ayuda__passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px;max-width:none;margin-top:64px}
  .passo__texto{max-width:15em}
  .passo:nth-child(4n) .passo__seta{display:flex}
  .passo:nth-child(2n) .passo__seta{display:none}
}
/* Telemóvel (≤700px): linha do tempo vertical — o número à esquerda, o texto ao
   lado e a mesma seta do desktop (linha + ponta do Figma) a descer até ao
   número seguinte. Em vez de 8 blocos soltos (número por cima do texto, sem
   setas), a sequência continua a ler-se e a secção fica mais curta. */
@media (max-width:700px){
  .ayuda__passos{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
  .passo{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:16px}
  .passo__topo{flex-direction:column;align-items:center;gap:6px;justify-self:start}   /* o número alinha com o título; a seta fica ao centro dele */
  /* 1.ª linha ao centro do número; cada passo guarda a altura de 3 linhas, para
     a seta de um texto curto (2 linhas) ter o comprimento das normais — um
     texto mais longo continua a alongar a sua */
  .passo__texto{margin-top:0;padding-top:.35em;min-height:calc(.35em + 3em * var(--lh))}
  .ayuda__passos .passo .passo__seta{display:flex;flex-direction:column;align-items:center;margin-bottom:-22px}   /* entra no intervalo até ~6px do número seguinte */
  .passo__seta i{flex:1;width:1px;height:auto;min-height:12px}
  .passo__seta svg{margin:-6px 0 -5px;transform:rotate(90deg)}
  .ayuda__passos .passo:last-child .passo__seta{display:none}
}

/* ============================================================================
   6 · SISTEMA UNIK  (3 cartões: capa 172 + corpo cinzento 590)
   ========================================================================== */
.unik{padding:180px 0 0}                        /* Figma: 4817 → 4997 */
.unik__cartoes{margin-top:83px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cartao-unik{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--gris)}
.cartao-unik__capa{position:relative;height:172px;flex:none}
.cartao-unik__capa img{width:100%;height:100%;object-fit:cover}
.cartao-unik__capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(237,28,36,0) 0%,var(--rojo) 100%);
}
.cartao-unik__titulo{
  position:absolute;left:0;right:0;top:75px;z-index:1;
  font-size:var(--t-h3);font-weight:700;color:var(--blanco);text-align:center;
}
/* O Figma fixa o corpo do cartão em 590px, independentemente do conteúdo.
   Cada bloco «Texto» do CMS é um grupo (.grupo): entre grupos há 40px;
   dentro de um grupo, uma linha em branco — o dobro num grupo de destaques
   (o itálico do editor sai como destaque a vermelho, Figma: «Para la
   propiedad:»). Listas numeradas com o número vermelho e negrito; listas de
   pontos com o «•» vermelho. */
.cartao-unik__corpo{min-height:590px;padding:40px 24px;display:flex;flex-direction:column;gap:40px;font-size:var(--t-body)}
.cartao-unik .grupo{display:flex;flex-direction:column;gap:1.17em}
.cartao-unik .grupo:has(> p > em){gap:2.34em}
.cartao-unik__corpo strong{font-weight:700}
.cartao-unik__corpo em{font-style:normal;color:var(--rojo);font-weight:700}
.cartao-unik__corpo :is(ul,ol){display:flex;flex-direction:column;gap:1.17em}
.cartao-unik__corpo ol{counter-reset:unik-num}
/* Numeradas: <ol> semeada ou li[data-list="ordered"] do Quill 2; de pontos: <ul>
   semeada ou li[data-list="bullet"] (o Quill 2 grava as duas dentro de <ol>). */
.cartao-unik__corpo ol > li:not([data-list="bullet"]){counter-increment:unik-num}
.cartao-unik__corpo ol > li:not([data-list="bullet"])::before{content:counter(unik-num) ". ";color:var(--rojo);font-weight:700}
.cartao-unik__corpo :is(ul > li,li[data-list="bullet"])::before{content:"• ";color:var(--rojo);font-weight:700}
/* As caixas de texto do Figma levam linhas em branco no fim, que empurram o
   bloco seguinte: cartão 1 — lista a 5521 e último bloco a 5694; cartão 2 —
   último parágrafo a 5691 (medidas do node 1:2 a 1440px). */
/* (a lista numerada; o Quill grava também os bullets num <ol> — esses ficam
   como uma <ul> semeada) */
.cartao-unik__corpo > .grupo > ol:only-child:not(:has(> li[data-list="bullet"])){margin:12px 0 2px}
.cartao-unik__corpo > .grupo:last-child:not(:has(> :is(p,ol,ul))){margin-top:11px}

/* ============================================================================
   7 · VÍDEOS  (1 grande 771×455 + 2 pequenos 375, à direita)
   ========================================================================== */
.videos{margin-top:115px}
/* Figma: vídeo principal 771×455; a coluna da direita segue o retângulo de 377 (node 139:355) */
.videos__grelha{display:grid;grid-template-columns:771fr 377fr;gap:16px}
.videos__col{display:grid;grid-template-rows:1fr 1fr;gap:14px}
/* Até 1100px a grelha é uma pista com as setas de Proyectos (ver abaixo); no
   desktop não há pista nem setas. */
.videos__palco{position:relative}
.videos__palco .videos__seta{display:none}
.video{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--gris)}
.video img{width:100%;height:100%;object-fit:cover}
.video--grande{aspect-ratio:771 / 455}
.video--pequeno{aspect-ratio:375 / 220}
/* No desktop quem dá a altura (455) é o vídeo principal; as duas miniaturas
   repartem-na sem impor a sua (Figma: 6041 → 6496). */
@media (min-width:1101px){
  .video--pequeno{aspect-ratio:auto}
  .video--pequeno img{position:absolute;inset:0}
}
/* Botão de reprodução (Figma: círculo de 76px #F7F7F7, triângulo 20×24 #FF5524) */
/* Botão que põe o vídeo a tocar: cobre o cartão todo, sem desenho próprio —
   o que se vê continua a ser o círculo de play por cima da miniatura. */
.video__disparo{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.video__disparo:focus-visible{outline:2px solid var(--blanco);outline-offset:-4px}
/* O leitor (iframe do YouTube/Vimeo ou <video> do site) fica no lugar do cartão */
/* O leitor preenche o cartão. O embed do YouTube/Vimeo recebe ainda uma largura
   em pixéis (kit.js: a do ecrã, nunca menos do que HD) e é encolhido à caixa —
   o tamanho visual é o mesmo, a qualidade pedida ao player é a do ecrã. */
.video__player{position:absolute;left:0;top:0;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;background:rgba(247,247,247,.97);
  box-shadow:0 1px 6px rgba(0,0,0,.14);
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background-color .2s ease;
}
.video:hover .video__play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.video__play svg{width:20px;height:24px;margin-left:5px}
/* Vídeo de terceiros sem «Medios externos» autorizado (kit.js): o aviso cobre
   o cartão e deixa autorizar ali mesmo; nada é pedido ao serviço antes disso. */
.video__consentimento{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:16px;background:rgba(16,18,17,.82);color:var(--blanco);text-align:center;font-size:var(--t-small);line-height:1.43;
}
.video__consentimento p{max-width:420px}
.video__consentimento-prefs{color:var(--blanco);font-size:var(--t-xs);text-decoration:underline}

/* ============================================================================
   8 · NOVEDADES  (faixa cinzenta + 3 cartões + "Ver todos")
   ========================================================================== */
.novedades{margin-top:180px;padding:40px 0 48px;background:var(--gris)}
.novedades__palco{position:relative;margin-top:40px}
.novedades__cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* As setas da pista (≤1100px, ver abaixo) são as de Proyectos; no desktop, em
   grelha, não há pista nem setas. Ficam ao centro da capa (260px), não do texto. */
.novedades__palco .novedades__seta{display:none;top:130px}
.cartao-noticia{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--blanco)}
.cartao-noticia__capa{height:260px;flex:none;overflow:hidden}
.cartao-noticia__capa img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cartao-noticia:hover .cartao-noticia__capa img{transform:scale(1.04)}
/* Figma: corpo branco de 160px por baixo da capa de 260 */
.cartao-noticia__corpo{min-height:160px;padding:24px 16px;display:flex;flex-direction:column;flex:1}
.cartao-noticia__titulo{font-size:var(--t-body);font-weight:800;color:var(--tinta);line-height:var(--lh)}
.cartao-noticia__link{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-body);font-weight:800;color:var(--rojo);
}
.cartao-noticia__link svg{width:16px;height:14px;transition:transform .2s ease}
.cartao-noticia:hover .cartao-noticia__link svg{transform:translateX(4px)}
.novedades__rodape{margin-top:40px;display:flex;justify-content:center}
.proyectos__rodape{margin-top:24px;display:flex;justify-content:center}

/* ============================================================================
   9 · PROYECTOS  (carrossel de 3 cartões com setas)
   ========================================================================== */
.proyectos{padding:160px 0 0}
.proyectos__palco{position:relative;margin-top:40px}
.proyectos__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);gap:16px;
  /* overflow-y fixo: sem ele o estado inicial da entrada (cartão 18px mais
     abaixo) tornava a pista deslocável na vertical e roubava a roda do rato. */
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.proyectos__pista::-webkit-scrollbar{display:none}
.cartao-proyecto{
  position:relative;height:260px;border-radius:var(--r);overflow:hidden;
  display:block;scroll-snap-align:start;
}
.cartao-proyecto img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
/* Enquadramento exato do Figma (node 157:126) para a foto do design: ampliada
   para 132.04% × 116.67% da caixa e deslocada 15.95% para a esquerda —
   o mesmo método do herói. */
.cartao-proyecto--figma img{position:absolute;left:-15.95%;top:0;width:132.04%;height:116.67%;max-width:none;object-fit:fill}
/* Degradê a subir do fundo (Figma: 52.31% → 100%), em preto a 70% em vez do
   vermelho do Figma (pedido do cliente) */
.cartao-proyecto::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:47.69%;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%);
  transition:opacity .25s ease;
}
/* Véu do hover (Figma: node 157:128 — rgba(217,0,13,.8) sobre o cartão todo) */
.cartao-proyecto::before{
  content:"";position:absolute;inset:0;z-index:1;background:rgba(217,0,13,.8);
  opacity:0;transition:opacity .25s ease;
}
.cartao-proyecto__info{position:absolute;left:16px;right:16px;bottom:24px;z-index:2;color:var(--blanco)}
.cartao-proyecto__titulo{font-size:var(--t-h3);font-weight:800;line-height:var(--lh)}
.cartao-proyecto__local{font-size:var(--t-small);font-weight:400}
.cartao-proyecto__desc{
  position:absolute;left:16px;right:16px;bottom:26px;z-index:2;
  color:var(--blanco);font-size:var(--t-small);opacity:0;transition:opacity .25s ease;
}
/* Estado de hover: nome a 30px do topo, descrição a 26px do fundo (Figma) */
.cartao-proyecto:focus-visible::before,.cartao-proyecto:focus-visible .cartao-proyecto__desc{opacity:1}
.cartao-proyecto:focus-visible::after{opacity:0}
.cartao-proyecto:focus-visible .cartao-proyecto__info{top:30px;bottom:auto}
@media (hover:hover){
  .cartao-proyecto:hover::before,.cartao-proyecto:hover .cartao-proyecto__desc{opacity:1}
  .cartao-proyecto:hover::after{opacity:0}
  .cartao-proyecto:hover .cartao-proyecto__info{top:30px;bottom:auto}
  .cartao-proyecto:hover img{transform:scale(1.04)}
}
/* Setas circulares brancas, centradas verticalmente sobre os cartões (também
   as das pistas de Novedades e Vídeos, ≤1100px) */
.proyectos__seta,.novedades__seta,.videos__seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background-color .18s ease;
}
/* Hover (Figma: node 160:154): fundo vermelho, seta branca */
:is(.proyectos__seta,.novedades__seta,.videos__seta):hover:not(:disabled){background:var(--rojo)}
:is(.proyectos__seta,.novedades__seta,.videos__seta):hover:not(:disabled) svg{color:var(--blanco)}
:is(.proyectos__seta,.novedades__seta,.videos__seta):disabled{cursor:default}
:is(.proyectos__seta,.novedades__seta,.videos__seta) svg{width:18px;height:16px;color:var(--rojo);transition:color .18s ease}
.proyectos__seta--ant,.novedades__seta--ant,.videos__seta--ant{left:16px}
.proyectos__seta--seg,.novedades__seta--seg,.videos__seta--seg{right:16px}
:is(.proyectos__seta--ant,.novedades__seta--ant,.videos__seta--ant) svg{transform:rotate(180deg)}

/* ============================================================================
   10 · NEWSLETTER  (cartão 1164×260 com imagem + véu vermelho)
   ========================================================================== */
.newsletter{margin-top:104px}
.newsletter__cartao{
  position:relative;min-height:260px;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:33px;
  padding:56px 24px;text-align:center;
}
.newsletter__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.newsletter__cartao::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(237,28,36,.75) 0%,rgba(217,0,13,.6) 100%);
}
.newsletter__titulo{position:relative;z-index:1;font-size:var(--t-h2);font-weight:700;color:var(--blanco)}
.newsletter__form{
  position:relative;z-index:1;width:min(770px,100%);background:var(--blanco);border-radius:var(--r);
  padding:10px 11px 10px 16px;display:grid;grid-template-columns:minmax(0,327px) minmax(0,1fr) auto;gap:16px;align-items:center;  /* Figma: "Email" a 343px do início */
}
.newsletter__form input{
  border:0;background:transparent;font-size:var(--t-small);color:var(--texto);
  padding:6px 0;min-width:0;width:100%;
}
.newsletter__form input::placeholder{color:var(--texto);opacity:1}
.newsletter__form button{
  padding:10px 16px;border-radius:var(--r);background:var(--rojo-osc);color:var(--blanco);
  font-size:var(--t-small);font-weight:800;transition:background-color .18s ease;
}
.newsletter__form button:hover{background:#b80010}
/* Aceitação da Política de Privacidad (RGPD; sem Figma): uma linha branca por
   baixo do formulário, alinhada com ele, a 12px. O cartão mantém os 260px: o
   padding inferior cede o espaço da linha, e o título e o formulário ficam nas
   coordenadas do Figma. */
.newsletter__cartao:has(.newsletter__privacidad){padding-bottom:28px}
.newsletter__privacidad{
  position:relative;z-index:1;width:min(770px,100%);margin-top:-21px;
  display:flex;align-items:flex-start;gap:8px;text-align:left;
  font-size:var(--t-xs);line-height:1.4;color:var(--blanco);
}
.newsletter__privacidad input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--blanco)}
.newsletter__privacidad a{color:var(--blanco);font-weight:700;text-decoration:underline}
.newsletter__privacidad :focus-visible{outline-color:var(--blanco)}
/* Mensagem de estado (sucesso ou erro, p.ex. falha de SMTP): assente no padding
   inferior do cartão, para não alterar a altura nem empurrar o formulário. */
.newsletter__aviso{
  position:absolute;left:24px;right:24px;bottom:18px;z-index:1;
  font-size:var(--t-xs);font-weight:700;color:var(--blanco);text-align:center;
}

/* ============================================================================
   RODAPÉ  (Figma: 314px; barra inferior #F4F5F5 a partir de 78.98%)
   ========================================================================== */
.rodape{margin-top:80px}
.rodape__topo{padding:0 0 37px}   /* Figma: bloco superior de 248px */
.rodape__grelha{
  display:grid;grid-template-columns:301fr 292fr 293fr 278fr;gap:0;align-items:start;
}
.rodape__logo img{width:195px;height:39px}
.rodape__redes{margin-top:35px;display:flex;gap:16px}
.rodape__redes a{
  width:32px;height:32px;border-radius:50%;background:var(--rojo-osc);   /* Figma: 32px */
  display:flex;align-items:center;justify-content:center;color:var(--blanco);
  transition:background-color .18s ease,transform .18s ease;
}
.rodape__redes a:hover{background:var(--rojo);transform:translateY(-2px)}
.rodape__redes svg{width:18px;height:18px}
.rodape__col{font-size:var(--t-small)}   /* passo de 32px entre itens, como no Figma */
.rodape__col h3{font-size:var(--t-small);font-weight:800;color:var(--rojo);margin-bottom:16px}
.rodape__col li + li{margin-top:16px}
.rodape__col a,.rodape__col p{font-size:var(--t-small);line-height:var(--lh);color:var(--negro)}
.rodape__col--menu a{font-weight:800}
.rodape__col--menu a:hover,.rodape__col--legal a:hover{color:var(--rojo)}
.rodape__contacto strong{display:block;font-weight:800;font-size:var(--t-small)}
.rodape__contacto a{text-decoration:underline}
.rodape__contacto div + div{margin-top:16px}
.rodape__barra{background:var(--gris);padding:25px 0}
.rodape__barra .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rodape__barra p{font-size:var(--t-small);color:var(--tinta)}

/* ============================================================================
   RESPONSIVO
   ========================================================================== */

/* ---- ≤1100px: navegação em painel, diagrama empilhado, passos 2×4 -------- */
@media (max-width:1100px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--rojo);padding:8px 0 20px;margin-left:0;
    box-shadow:0 18px 30px rgba(0,0,0,.18);
    display:none;
  }
  .nav[data-aberto="true"]{display:flex}
  .nav a,.nav button{padding:14px var(--gut);justify-content:flex-start;width:100%}
  .nav a:hover,.nav button:hover{background:rgba(0,0,0,.08)}
  .nav__rotulo::after{left:0;transform:none}   /* alinhado à esquerda, como a lista */

  /* No painel, o submenu abre por baixo do item, só por toque/clique */
  .nav__grupo{flex-direction:column;align-items:stretch}
  /* Com destino: o texto (ligação) e a seta (submenu) na mesma linha, o
     submenu por baixo, a toda a largura */
  .nav__grupo.nav__grupo--ligado{flex-direction:row;flex-wrap:wrap}
  .nav .nav__principal{flex:1;width:auto}
  .nav .nav__abrir{width:auto;margin-left:0;padding:14px var(--gut)}
  .nav__grupo--ligado > .nav__sub{flex-basis:100%}
  .nav__sub{
    position:static;width:auto;border-radius:0;background:rgba(0,0,0,.08);
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .nav__grupo:hover .nav__sub{display:none}
  .nav__grupo [aria-expanded="true"] + .nav__sub{display:block}
  .nav__grupo:hover .nav__chevron{transform:none}
  .nav__grupo [aria-expanded="true"] .nav__chevron{transform:rotate(180deg)}
  .nav .nav__sub a{color:var(--blanco);padding:12px var(--gut) 12px calc(var(--gut) + 16px);white-space:normal}
  .nav .nav__sub a:hover,.nav .nav__sub a:focus-visible,.nav .nav__sub a[aria-current="page"]{background:rgba(0,0,0,.12)}

  /* Diagrama: imagem num tamanho útil, etiquetas em lista por baixo (tocáveis) */
  .diagrama{margin-top:40px}
  .diagrama__painel{aspect-ratio:auto}
  .diagrama__palco{position:relative;left:auto;width:min(573px,100%);height:auto;aspect-ratio:573 / 367;margin-inline:auto}
  .diagrama__etiquetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin-top:24px}
  .diagrama__et{position:static;transform:none;width:auto;text-align:left}
  .diagrama__zona{
    display:block;width:100%;position:relative;padding:10px 12px 10px 28px;border-radius:12px;
    transition:background-color .2s ease,color .25s ease,opacity .25s ease;
  }
  .diagrama__zona::before{
    content:"";position:absolute;left:12px;top:calc(10px + .42em);width:8px;height:8px;border-radius:50%;background:var(--rojo);
  }
  .diagrama__zona--fixa::before{background:var(--texto)}
  .diagrama__zona[aria-pressed="true"]{background:var(--gris)}

  .proyectos__pista,.novedades__cartoes,.videos__grelha{grid-auto-columns:calc((100% - 16px) / 2)}
  /* Novedades e Vídeos passam à mesma pista de Proyectos: cartões lado a lado,
     scroll-snap, swipe e as setas (kit.js → pistas()), com qualquer número de
     cartões */
  .novedades__cartoes,.videos__grelha{
    grid-template-columns:none;grid-auto-flow:column;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  :is(.novedades__cartoes,.videos__grelha)::-webkit-scrollbar{display:none}
  .novedades__cartoes .cartao-noticia{scroll-snap-align:start}
  .novedades__palco .novedades__seta,.videos__palco .videos__seta{display:flex}
  /* Vídeos: o grande e os pequenos passam a cartões iguais na pista (a coluna
     dos pequenos deixa de ser caixa), todos na proporção do principal */
  .videos__col{display:contents}
  .videos__grelha .video{aspect-ratio:771 / 455;scroll-snap-align:start}
  /* Na pista o vídeo principal entra como os outros cartões, sem o zoom do
     desktop: com a escala, o scroll-snap alinhava pela caixa reduzida e a pista
     ficava uns píxeis deslocada (primeiro cartão cortado, seta «anterior» ativa) */
  .videos__grelha .video--grande{--revelar-escala:1;--revelar-y:18px}
}

/* ---- ≤900px: blocos alternados passam a coluna única --------------------- */
@media (max-width:900px){
  /* O herói deixa de ter altura fixa: cresce com o conteúdo e a faixa inferior
     passa a fluir a seguir ao texto, em vez de ficar sobreposta. */
  .heroi{height:auto;min-height:0}
  .heroi__titulo{margin-top:140px}
  .heroi__controlos{position:static;transform:none;margin:48px 0 0}
  .heroi__faixa{display:none}
  .heroi__faixa-texto{
    position:static;height:auto;margin-top:40px;
    background:rgba(43,43,43,.35);padding:24px 0;
  }
  /* Atalhos em linha, no canto inferior direito, fixos ao ecrã e fora da
     safe-area do iPhone — fora do caminho do título, da faixa e das migalhas. */
  .heroi__lateral{top:auto;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));flex-direction:row}
  /* Junto ao rodapé sobe a altura da barra final (kit.js: atalhosNoRodape) */
  .atalhos-laterais .heroi__lateral{transform:translateY(calc(-1 * var(--atalhos-rodape,0px)));transition:transform .3s ease}

  .sistema,.disenar,.unik{padding-top:120px}
  .novedades{margin-top:120px}
  .proyectos{padding-top:120px}
  .newsletter{margin-top:88px}
  .disenar__filas{margin-top:56px}
  .ayuda{margin-top:120px;padding-bottom:72px}
  .videos{margin-top:72px}

  /* Três cartões não cabem em 2 colunas sem deixar um órfão: coluna única, centrada */
  .unik__cartoes{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .cartao-unik__corpo{min-height:0}

  .rodape__grelha{grid-template-columns:1fr 1fr;gap:40px 24px}

  .entrada__lista :is(ul,ol){grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Fila empilhada: título → imagem → texto → botão. O bloco de texto deixa de
     ser caixa (display:contents) para a imagem entrar entre o título e o corpo,
     sem duplicar markup; 24px de cada lado da imagem (o do corpo já existe). */
  .fila,.fila--invertida{grid-template-columns:minmax(0,1fr);gap:0}
  .fila__texto{display:contents}
  .fila .fila__titulo{order:1}
  .fila .fila__media{order:2;margin-top:24px}
  .fila .fila__corpo{order:3}
  .fila .btn{order:4;justify-self:start;margin-top:32px}
  .fila--invertida .fila__media{padding-left:0}
  .fila__media img{height:auto;aspect-ratio:574 / 354}
  .disenar__filas{gap:72px}
}

/* ---- ≤700px: coluna única em tudo --------------------------------------- */
@media (max-width:700px){
  :root{--header-h:80px}
  .cabecalho__logo img{width:158px;height:31px}
  .heroi__titulo{margin-top:110px}
  .heroi__controlos{display:none}                /* sem os pontos do carrossel no telemóvel: muda-se por swipe */
  /* O indicador «scroll» também se mostra aqui, a 40px do herói como no desktop;
     o texto fica só a 37px dele (a margem do indicador) e não a 69 */
  .entrada__texto{margin-top:0}
  .entrada.entrada--scroll-no-heroi{padding-top:72px}   /* indicador no herói: o espaço de antes */
  .entrada__lista :is(ul,ol){grid-template-columns:minmax(0,1fr);row-gap:16px}
  .sistema,.disenar,.unik{padding-top:96px}
  .proyectos{padding-top:96px}
  .novedades{margin-top:96px}
  .ayuda{margin-top:64px}
  .proyectos__pista,.novedades__cartoes,.videos__grelha{grid-auto-columns:100%}
  .proyectos__seta--ant,.novedades__seta--ant,.videos__seta--ant{left:8px}
  .proyectos__seta--seg,.novedades__seta--seg,.videos__seta--seg{right:8px}
  .diagrama__etiquetas{grid-template-columns:1fr}
  .newsletter__form{grid-template-columns:1fr;gap:10px}
  .newsletter__form button{width:100%}
  /* O cartão cresce com a linha da privacidade: o aviso de estado, assente a
     18px do fundo, não lhe pode tocar */
  .newsletter__cartao:has(.newsletter__privacidad){padding-bottom:48px}
  .rodape__barra .wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .ayuda__marca{opacity:.55}
}

@media (max-width:460px){
  .rodape__grelha{grid-template-columns:1fr}
}

/* ---- Entrada ao fazer scroll — secção 3 (kit.js: IntersectionObserver) -----
   Dois grupos com um só gatilho cada: o cabeçalho (título + separadores) e o
   diagrama (imagem + etiquetas). O estado inicial aplica-se já no 1.º desenho
   (só com JS ativo: `scripting: enabled`), sem conteúdo a aparecer e a sumir.
   Se o kit.js nunca correr, a animação de segurança mostra tudo aos 3 s; com
   «reduzir movimento» nada fica escondido. Só opacity e transform. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .sistema [data-revelar-grupo]{--revelar-curva:cubic-bezier(.22,1,.36,1);--grupo-atraso:0ms}
  .sistema__cabeca .titulo-seccion,
  .sistema__cabeca .pilula,
  .diagrama .diagrama__palco,
  .diagrama .diagrama__et{
    transition-property:opacity,transform;
    transition-timing-function:var(--revelar-curva);
  }
  /* Título: sobe 12px (≈ fade-up do PT, com um décimo do percurso) */
  .sistema__cabeca .titulo-seccion{transition-duration:.9s;transition-delay:var(--grupo-atraso)}
  .sistema__cabeca:not(.is-visivel) .titulo-seccion{opacity:0;transform:translateY(12px)}
  /* Separadores: de lados opostos, 14px (≈ fade-right / fade-left do PT) */
  .sistema__cabeca .pilula{
    transition-property:opacity,transform,background-color,color;
    transition-duration:1.1s,1.1s,.18s,.18s;
    transition-timing-function:var(--revelar-curva),var(--revelar-curva),ease,ease;
    transition-delay:calc(var(--grupo-atraso) + 90ms),calc(var(--grupo-atraso) + 90ms),0s,0s;
  }
  .sistema__cabeca:not(.is-visivel) .pilula:first-child{opacity:0;transform:translateX(-14px)}
  .sistema__cabeca:not(.is-visivel) .pilula:last-child{opacity:0;transform:translateX(14px)}
  /* Diagrama: o zoom-in do PT, quase impercetível (.975 → 1) */
  .diagrama .diagrama__palco{transition-duration:1s;transition-delay:var(--grupo-atraso)}
  .diagrama:not(.is-visivel) .diagrama__palco{opacity:0;transform:scale(.975)}
  /* Etiquetas: só opacidade (o transform é o do posicionamento), a seguir à
     imagem e em cascata curta */
  .diagrama .diagrama__et{
    transition-property:opacity;transition-duration:.7s;
    transition-delay:calc(var(--grupo-atraso) + 260ms + var(--i,0) * 50ms);
  }
  .diagrama:not(.is-visivel) .diagrama__et{opacity:0}
  /* Rearme (kit.js, fora do ecrã): voltar ao estado inicial é instantâneo */
  .sistema__cabeca:not(.is-visivel) .titulo-seccion,
  .diagrama:not(.is-visivel) :is(.diagrama__palco,.diagrama__et){transition-duration:0s;transition-delay:0s}
  .sistema__cabeca:not(.is-visivel) .pilula{transition-duration:0s,0s,.18s,.18s;transition-delay:0s}
  /* Segurança: sem kit.js (html sem .js-revelar), mostra tudo aos 3 s */
  html:not(.js-revelar) .sistema__cabeca:not(.is-visivel) :is(.titulo-seccion,.pilula),
  html:not(.js-revelar) .diagrama:not(.is-visivel) :is(.diagrama__palco,.diagrama__et){
    animation:revelar-seguranca 0s linear 3s forwards;
  }
}
@keyframes revelar-seguranca{to{opacity:1;transform:none}}

/* ---- Linguagem de movimento: entrada ao fazer scroll ----------------------
   API (kit.js: dois IntersectionObservers partilhados, entrada e saída):
     data-revelar-grupo          grupo compacto: anima tudo como composição
                                 quando começa a entrar no ecrã (pode ser o
                                 próprio elemento: data-revelar-grupo +
                                 data-revelar, ex. um título)
     data-revelar-grupo="fluxo"  conteúdo alto (colunas, grelhas, pares que
                                 empilham): cada filho entra quando ele próprio
                                 se aproxima do ecrã; os que entram juntos
                                 fazem cascata por linha + coluna
     data-revelar="<tipo>"       filho que entra
     --revelar-indice            posição na cascata (o kit.js numera; num grupo
                                 compacto pode vir explícita no HTML)
   Repete (também a secção 3): quando a unidade sai totalmente do ecrã (+15%
   em cima, +32px em baixo) volta ao estado inicial — de imediato, fora da
   vista — e anima outra vez ao reentrar. Nenhum desvio vertical do estado
   inicial pode passar de 32px.
   Tipos: titulo · texto · botao · cartao · imagem (também diagramas) ·
          esquerda · direita (pares espelhados)
   Uma curva, só opacity + transform, cascata curta e limitada. Até 900px (pares
   empilhados) o movimento lateral passa a vertical; até 700px as distâncias
   descem para 60%. A secção 3 tem regras próprias (acima) e o herói da Home
   não usa. As páginas internas usam a mesma API: nos heróis curtos só as
   migalhas e os textos entram (a imagem de fundo fica parada); grelhas, menus
   da FAQ/Política e perguntas entram em fluxo; o texto legal é uma só unidade.
   Mesma segurança da secção 3: sem JS nada fica escondido; se o kit.js
   falhar, tudo aparece aos 3s; com «reduzir movimento» nada se mexe. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  [data-revelar]{
    --revelar-curva:cubic-bezier(.22,1,.36,1);
    --revelar-escala:1;--revelar-x:0px;--revelar-y:0px;--revelar-dur:.8s;
    transition-property:opacity,transform,background-color,color,border-color;
    transition-duration:var(--revelar-dur),var(--revelar-dur),.18s,.18s,.18s;
    transition-timing-function:var(--revelar-curva),var(--revelar-curva),ease,ease,ease;
    transition-delay:calc(var(--grupo-atraso,0ms) + min(var(--revelar-indice,0),6) * var(--revelar-passo,90ms)),
                     calc(var(--grupo-atraso,0ms) + min(var(--revelar-indice,0),6) * var(--revelar-passo,90ms)),0s,0s,0s;
  }
  [data-revelar="titulo"]  {--revelar-y:20px;--revelar-dur:.85s}
  [data-revelar="texto"]   {--revelar-y:14px;--revelar-dur:.8s}
  [data-revelar="botao"]   {--revelar-y:10px;--revelar-dur:.7s}
  [data-revelar="cartao"]  {--revelar-y:18px;--revelar-dur:.8s;--revelar-passo:70ms}
  [data-revelar="imagem"]  {--revelar-escala:.975;--revelar-dur:1s}
  [data-revelar="esquerda"]{--revelar-x:-24px;--revelar-dur:.9s}
  [data-revelar="direita"] {--revelar-x:24px;--revelar-dur:.9s}
  /* Estado inicial: filho de um grupo compacto, filho de um grupo de fluxo e
     elemento que é o seu próprio grupo. Voltar a ele é instantâneo (só
     acontece fora do ecrã). */
  [data-revelar-grupo]:not([data-revelar-grupo="fluxo"]):not(.is-visivel) [data-revelar],
  [data-revelar-grupo="fluxo"] [data-revelar]:not(.is-visivel),
  [data-revelar-grupo][data-revelar]:not(.is-visivel){
    opacity:0;
    transform:translate3d(var(--revelar-x),var(--revelar-y),0) scale(var(--revelar-escala));
    transition-duration:0s,0s,.18s,.18s,.18s;transition-delay:0s;
  }
  /* Segurança: sem kit.js (html sem .js-revelar), mostra tudo aos 3 s */
  html:not(.js-revelar) [data-revelar-grupo]:not([data-revelar-grupo="fluxo"]):not(.is-visivel) [data-revelar],
  html:not(.js-revelar) [data-revelar-grupo="fluxo"] [data-revelar]:not(.is-visivel),
  html:not(.js-revelar) [data-revelar-grupo][data-revelar]:not(.is-visivel){
    animation:revelar-seguranca 0s linear 3s forwards;
  }
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) and (max-width:900px){
  [data-revelar="esquerda"],[data-revelar="direita"]{--revelar-x:0px;--revelar-y:14px}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) and (max-width:700px){
  [data-revelar="titulo"]{--revelar-y:12px}
  [data-revelar="texto"],[data-revelar="esquerda"],[data-revelar="direita"]{--revelar-y:9px}
  [data-revelar="botao"]{--revelar-y:6px}
  [data-revelar="cartao"]{--revelar-y:11px}
}

/* ---- Acessibilidade: respeitar quem pediu menos movimento ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  /* Sem atrasos: o texto do slide troca no mesmo instante que a imagem */
  /* Sem autoplay e sem deslize (kit.js): trocar de slide pelos pontos é imediato */
}

/* ---- Página ainda sem design (front/pages/generic e inactive) --------------
   Vista técnica provisória: só afasta o título do cabeçalho e do rodapé até
   cada página ser implementada a partir do Figma. */
.pagina-generica__corpo{padding:80px 0 120px}

/* ============================================================================
   PÁGINAS DE SOLUÇÃO  (Figma: Aerotermia, node 180:86 — medidas a 1440px)
   ========================================================================== */
/* Imagem principal: 1440×700, degradê vermelho no topo (184:450); seta de
   voltar + migalhas a 10px do topo; o bloco central fica ao centro do herói
   (Figma: 336 → 563 num herói de 100 → 800). */
.sol-hero{position:relative;height:700px;display:flex;flex-direction:column;overflow:hidden;color:var(--blanco);background:var(--rojo)}
.sol-hero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.sol-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--rojo) 0%,rgba(237,28,36,0) 100%)}
.sol-hero__topo{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding-top:10px}
.sol-hero__volver{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);background:var(--blanco);color:var(--rojo)}
.sol-hero__volver svg{width:18px;height:16px;transform:scaleX(-1)}
.migas ol{display:flex;flex-wrap:wrap;font-size:var(--t-xs)}
.migas li+li::before{content:"/";margin:0 .3em}
.migas [aria-current]{font-weight:800}
.migas a:hover{text-decoration:underline}
.sol-hero__centro{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:50px;text-align:center}

/* ---- Cabeçalho sobre a imagem do herói (pedido do cliente, 16-10-2026) ------
   Quando a página abre com um herói COM imagem (o da Home ou um .sol-hero), o
   cabeçalho perde o vermelho e a imagem sobe por trás dele: o herói desenha a
   imagem, o véu e o degradê também na faixa do cabeçalho (clip-path com o topo
   alargado em --header-h), sem mudar de caixa — o cabeçalho, o logo, o menu, as
   migalhas, os títulos e o resto da página ficam nas mesmas coordenadas. O
   degradê vermelho passa a escuro e mais leve, e começa no topo do cabeçalho.
   Páginas que abrem sem imagem (FAQ, legais, faixa de migalhas) não mudam.
   Só em motores com `overflow: clip` E `:has()`: o iOS 15.4–15.x (Safari e
   Chrome, ambos WebKit) tem :has() mas não clip — o cabeçalho ficava
   transparente, o herói continuava overflow:hidden e a imagem não subia: logo e
   menu brancos sobre branco. Sem os dois, o topo fica com o cabeçalho vermelho
   (CabecalhoSobreHeroiTest). */
@supports (overflow:clip) and selector(:has(*)){
.cabecalho:has(~ #contenido > .heroi:first-of-type .heroi__img),
.cabecalho:has(~ #contenido > .sol-hero:first-of-type > .sol-hero__img){background:transparent}
#contenido > .heroi:first-of-type:has(.heroi__img),
#contenido > .sol-hero:first-of-type:has(> .sol-hero__img){overflow-x:clip;overflow-y:visible;clip-path:inset(calc(-1 * var(--header-h)) 0 0 0)}
#contenido > .heroi:first-of-type:has(.heroi__img){display:flow-root}   /* o overflow:hidden fazia-o um BFC */
/* Home sem clip-path: no Safari (26.5 medido), um clip-path sobre as imagens do
   carrossel — camadas compostas, movidas a translate3d — ignora o topo negativo
   e corta-as no topo do herói: cabeçalho branco, logo e menu invisíveis. Só a
   faixa UNIK (mix-blend-mode) o disfarçava, e ela some ≤900px ou sem texto. As
   imagens e o véu acabam no fundo do herói e o overflow-x:clip corta os lados:
   o clip-path não faz falta aqui. */
#contenido > .heroi:first-of-type:has(.heroi__img){clip-path:none}
/* Na horizontal continua cortado (o carrossel desliza slides para os lados) sem contar para a largura da página */
/* Home: as imagens e o véu sobem; o degradê PNG vermelho dá lugar a um escuro
   que cobre o cabeçalho (mais forte atrás do logo e do menu) e os 131px que o
   PNG cobria */
#contenido > .heroi:first-of-type .heroi__imagens{top:calc(-1 * var(--header-h))}
#contenido > .heroi:first-of-type:has(.heroi__img) .heroi__veu{
  top:calc(-1 * var(--header-h));
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.23) var(--header-h),rgba(0,0,0,0) calc(var(--header-h) + 131px)),rgba(0,0,0,.2);
}
#contenido > .heroi:first-of-type:has(.heroi__img) .heroi__degradado{display:none}
/* Restantes páginas: a imagem e o degradê sobem; o degradê, que era vermelho a
   100% → 0, passa a preto: 65% no topo do cabeçalho (o logo e o menu por cima),
   44% na base dele, 35% a meio (onde está o título) e 25% em baixo */
#contenido > .sol-hero:first-of-type > .sol-hero__img{top:calc(-1 * var(--header-h));height:calc(100% + var(--header-h))}
#contenido > .sol-hero:first-of-type:has(> .sol-hero__img)::before{
  top:calc(-1 * var(--header-h));
  background:linear-gradient(180deg,rgba(0,0,0,.65) 0,rgba(0,0,0,.44) var(--header-h),rgba(0,0,0,.35) 50%,rgba(0,0,0,.25) 100%);
}
/* Sombra suave por trás dos textos centrais: segura a leitura sobre imagens muito
   claras (ex.: uma planta branca), onde o degradê sozinho não chega a 3:1 */
#contenido > .sol-hero:first-of-type:has(> .sol-hero__img) :is(.sol-hero__ante,.sol-hero__titulo,.sol-hero__frase){
  text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.45);
}
}   /* @supports: cabeçalho sobre a imagem do herói */
.sol-hero__ante{font-size:var(--t-h3)}
.sol-hero__titulo{font-size:var(--t-h1);font-weight:700}
.sol-hero__frase{max-width:590px;margin-top:24px;font-size:var(--t-h3);font-weight:700}
.sol-hero__cta{margin-top:24px}

/* Imagens, texto e botão: coluna de 770 (188:463 → 190:465). Imagem 770×453
   r24; pontos 12px a 16px da imagem; 40px até ao texto e do texto ao botão. */
.sol-desc{padding:80px 0 160px}
.sol-desc__corpo{max-width:770px;display:flex;flex-direction:column;align-items:center}
.sol-galeria{width:100%;margin-bottom:40px}
/* As imagens ficam em absoluto na caixa: assim a altura é sempre a da caixa
   (770×453) e o ponto focal do CMS decide o enquadramento. */
.sol-galeria__imagens{position:relative;aspect-ratio:770 / 453;border-radius:var(--r);overflow:hidden}
.sol-galeria__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .6s ease}
.sol-galeria__img.is-ativa{opacity:1}
.sol-galeria__pontos{display:flex;justify-content:center;gap:8px;margin-top:16px}
.sol-galeria__ponto{width:12px;height:12px;border-radius:50%;background:var(--gris)}
.sol-galeria__ponto[aria-current="true"]{background:var(--rojo)}
.sol-desc__texto{width:100%;color:var(--negro)}   /* "Preto Textos" como o Figma o desenha (189:464) */
.sol-desc__texto p+p,.sol-desc__texto p+ul,.sol-desc__texto ul+p{margin-top:1.1667em}   /* a linha em branco do Figma */
.sol-desc__destaque{width:100%;margin-top:1.1667rem;font-size:var(--t-h3);font-weight:700;color:var(--negro)}
.sol-desc__cta{margin-top:40px}

/* Outras soluções: fundo cinzento (191:467), título H3 vermelho, cartões de
   279×260 r24 em 4 colunas com 16px, degradê vermelho em baixo e o título a
   16px da esquerda e 24px do fundo. 160px até ao rodapé: a margem colapsa com
   a do rodapé (80), por isso é a maior das duas que conta. */
.sol-otras{padding:58px 0 80px;margin-bottom:160px;background:var(--gris)}
.sol-otras__titulo{font-size:var(--t-h3);font-weight:700;color:var(--rojo);text-align:center}
.sol-otras__grelha{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cartao-sol{position:relative;display:flex;align-items:flex-end;height:100%;aspect-ratio:279 / 260;padding:0 16px 24px;border-radius:var(--r);overflow:hidden;background:var(--rojo)}
.cartao-sol__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* Degradê em preto a 70% no fundo, em vez do vermelho do Figma (pedido do cliente) */
.cartao-sol::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%)}
.cartao-sol__titulo{position:relative;z-index:1;font-size:var(--t-body);font-weight:800;color:var(--blanco)}
a.cartao-sol .cartao-sol__img{transition:transform .4s ease}
a.cartao-sol:hover .cartao-sol__img{transform:scale(1.04)}

@media (max-width:900px){
  .sol-desc{padding:56px 0 112px}
  .sol-otras{padding:48px 0 64px}
  .sol-otras__grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cartao-sol{aspect-ratio:16 / 10}   /* 2 colunas largas: cartões mais baixos */
}
@media (max-width:700px){
  .sol-hero{height:auto;min-height:560px}
  .sol-hero__centro{padding:48px 0 72px}
  .sol-hero__frase,.sol-hero__cta{margin-top:20px}
  .sol-otras__grelha{gap:12px}
  .cartao-sol{aspect-ratio:279 / 260;padding:0 12px 16px}
  .cartao-sol__titulo{font-size:var(--t-small)}
}
@media (prefers-reduced-motion:reduce){
  .sol-galeria__img,a.cartao-sol .cartao-sol__img{transition:none}
}

/* ============================================================================
   PÁGINAS INTERNAS  (Figma: Asistente Virtual, node 207:261 — medidas a 1440px)
   ========================================================================== */
/* Herói curto: 381px, o mesmo degradê e migalhas das soluções; 16px entre o
   antetítulo e o título (ExtraBold). As migalhas mostram o título como está. */
.sol-hero.sol-hero--curto{height:381px}
.sol-hero--curto .sol-hero__titulo{margin-top:16px;font-weight:800}
.migas.migas--literal ol{text-transform:none}

/* Blocos com 120px entre si (80px logo a seguir ao herói), numa coluna de 968 */
.pag-bloco{margin-top:120px}
.sol-hero + .pag-bloco{margin-top:80px}

/* Texto e imagem: 474 + 18 + 476, centrados na vertical; a 2.ª secção deste
   tipo troca os lados (imagem à esquerda). */
.pag-ti__grelha.wrap{width:min(968px,100% - 2 * var(--gut));display:grid;grid-template-columns:474fr 476fr;column-gap:18px;align-items:center}
.pag-ti--invertido .pag-ti__grelha.wrap{grid-template-columns:476fr 474fr}
.pag-ti--invertido .pag-ti__imagem{order:-1}
.pag-ti__texto{color:var(--negro)}   /* "Preto Textos" como o Figma o desenha */
.pag-ti__texto p+p,.pag-ti__texto p+ul,.pag-ti__texto ul+p{margin-top:1.1667em}
.pag-ti__imagem{position:relative;aspect-ratio:476 / 294;border-radius:var(--r);overflow:hidden}
.pag-ti__imagem img,.pag-imagen__caixa img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* Imagem larga: 968×354 r24 */
.pag-imagen__caixa{position:relative;max-width:968px;margin-inline:auto;aspect-ratio:968 / 354;border-radius:var(--r);overflow:hidden}

/* Faixa final: fundo cinzento, 80px acima e abaixo; frase H3 (a continuação a
   vermelho), botões a 24px, 16px entre eles; 160px até ao rodapé (a margem
   colapsa com a dele). */
.pag-cierre{padding:80px 0;margin-bottom:160px;background:var(--gris);text-align:center}
.pag-cierre__frase{max-width:770px;margin-inline:auto;font-size:var(--t-h3);font-weight:700;color:var(--negro)}
.pag-cierre__frase .vm{display:block;color:var(--rojo)}   /* a continuação abre a 2.ª linha */
.pag-cierre__botoes{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}

@media (max-width:900px){
  .pag-bloco{margin-top:80px}
  .sol-hero + .pag-bloco{margin-top:56px}
  .pag-ti__grelha.wrap,.pag-ti--invertido .pag-ti__grelha.wrap{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .pag-ti--invertido .pag-ti__imagem{order:0}
  .pag-cierre{padding:56px 0;margin-bottom:112px}
}
@media (max-width:700px){
  .sol-hero.sol-hero--curto{height:auto;min-height:380px}
  .pag-bloco{margin-top:56px}
}

/* ---- Páginas internas: Profesionales Elite (node 222:1693) ---------------- */
/* Herói curto sem antetítulo: o título fica onde estaria com ele (Figma) */
/* O herói curto ancora pelo topo, como o Figma: o antetítulo a 102px do topo do
   herói e o título a 146px (com ou sem antetítulo); a frase cresce para baixo. */
.sol-hero--curto .sol-hero__centro{justify-content:flex-start;padding:52px 0 0}
.sol-hero--curto .sol-hero__centro--sem-ante{padding-top:80px}

/* Título de bloco H2 vermelho e corpo de texto (as linhas em branco do Figma) */
.pag-titulo{font-size:var(--t-h2);font-weight:700;color:var(--rojo)}
.pag-titulo + .pag-texto{margin-top:1.1667rem}
.pag-texto{color:var(--negro)}
.pag-texto p+p,.pag-texto p+ul,.pag-texto ul+p{margin-top:1.1667em}

/* Introdução centrada (760) e imagem 770×470 a 40px */
.pag-intro .wrap{text-align:center}
.pag-intro__titulo,.pag-intro__texto{max-width:760px;margin-inline:auto}
.pag-intro__imagem{position:relative;max-width:770px;margin:40px auto 0;aspect-ratio:770 / 470;border-radius:var(--r);overflow:hidden}
.pag-intro__imagem img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* Texto (379) e ilustração (572) numa coluna de 968; 209px desde o bloco anterior */
.pag-bloco.pag-ilustracion{margin-top:209px}
.pag-ilustracion__grelha.wrap{width:min(968px,100% - 2 * var(--gut));display:grid;grid-template-columns:379fr 572fr;column-gap:17px;align-items:center}
.pag-ilustracion__img{width:100%;height:auto}

/* Valores: coluna de 968 (texto a 476), cartões 313×142 em 3 colunas;
   40px entre texto e cartões; 143px desde o bloco anterior */
.pag-bloco.pag-valores{margin-top:143px}
.pag-valores__coluna.wrap{width:min(968px,100% - 2 * var(--gut))}
.pag-valores__coluna > .pag-titulo,.pag-valores__coluna > .pag-texto:first-of-type{max-width:476px}
.pag-valores__coluna > * + *{margin-top:40px}
.pag-valores__coluna > .pag-titulo + .pag-texto{margin-top:1.1667rem}
.pag-valores__grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14.5px}
.valor{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:142px;padding:24px;border-radius:var(--r);background:var(--gris)}
.valor__icone{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--rojo);color:var(--blanco);flex:none}
.valor__icone svg{width:20px;height:20px}
.valor__titulo{max-width:246px;font-weight:700;color:var(--tinta)}

/* Faixa com degradê (#F4F5F5 → branco, 1222px no Figma) partilhada pelos
   testemunhos, pela frase grande e pelos cartões — cada um desenha a sua parte
   (0–36%, 36–58%, 58–100%) para o degradê ser contínuo. */
.pag-testimonios{margin-top:180px;padding:80px 0 0;background:linear-gradient(180deg,#F4F5F5 0%,#F8F9F9 100%)}
.pag-testimonios__titulo,.pag-testimonios__sub{text-align:center}
.pag-testimonios__sub{margin-top:1.1667rem;color:var(--negro)}
.pag-testimonios__grelha{width:min(968px,100%);margin:80px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14.5px}
.testemunho{min-height:204px;padding:24px 34px 24px 24px;border-radius:var(--r);background:var(--blanco)}
.testemunho__aspas{width:35px;height:40px;color:var(--rojo)}
.testemunho__texto{margin:24px 0 0;font-style:italic;color:var(--negro)}

.pag-lema{margin-top:120px}
.pag-lema__frase{max-width:770px;margin-inline:auto;font-size:var(--t-h2);font-weight:700;color:var(--negro);text-align:center}
.pag-lema__frase span{display:block}
.pag-lema__frase .vm{color:var(--rojo)}
.pag-testimonios + .pag-lema{margin-top:0;padding-top:180px;background:linear-gradient(180deg,#F8F9F9 0%,#FAFBFB 100%)}

.pag-tarjetas{margin-top:120px;margin-bottom:103px}
.pag-tarjetas__grelha{width:min(968px,100%);margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tarjeta{position:relative;display:flex;min-height:360px;border-radius:var(--r);overflow:hidden;background:var(--rojo);color:var(--blanco)}
.tarjeta__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.tarjeta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(237,28,36,0) 0%,var(--rojo) 100%)}
.tarjeta__corpo{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:24px 26px 40px 24px}
.tarjeta__titulo{max-width:255px;font-size:var(--t-h3);font-weight:800}
.tarjeta__texto{margin-top:16px}
.tarjeta__btn{margin-top:21px}
.pag-lema + .pag-tarjetas{margin-top:0;margin-bottom:0;padding:40px 0 103px}
.pag-testimonios + .pag-lema + .pag-tarjetas{background:linear-gradient(180deg,#FAFBFB 0%,#FFFFFF 100%)}

@media (max-width:900px){
  .pag-bloco.pag-ilustracion,.pag-bloco.pag-valores{margin-top:96px}
  .pag-ilustracion__grelha.wrap{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .pag-valores__grelha,.pag-testimonios__grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pag-testimonios{margin-top:96px;padding-top:64px}
  .pag-testimonios__grelha{margin-top:48px}
  .pag-testimonios + .pag-lema{padding-top:96px}
}
@media (max-width:700px){
  .pag-valores__grelha,.pag-testimonios__grelha,.pag-tarjetas__grelha{grid-template-columns:minmax(0,1fr)}
  .valor{min-height:0}
  .testemunho{min-height:0}
  .tarjeta{min-height:320px}
}

/* ---- Páginas internas: Proyectos (node 269:933) --------------------------- */
/* Grelha de projetos do Portefólio: cartões 377×260 em 3 colunas, 16px; 80px
   desde a introdução e até à faixa final (sem botões: 40px de margem interna) */
.pag-proyectos__grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pag-intro + .pag-proyectos,.pag-proyectos + .pag-cierre{margin-top:80px}
.pag-cierre.pag-cierre--sem-botoes{padding:40px 0}
.pag-cierre--sem-botoes .pag-cierre__frase{max-width:968px}

/* ---- Ficha de um trabalho do Portefólio (front/pages/portefolio-trabalho) ---
   Figma «Pagina de Proyectos» (node 269:1379): herói curto das páginas internas
   (título até 766px), a galeria e os textos numa coluna de 770 a 80px do herói,
   e a faixa «Otros proyectos» com a grelha da listagem (.pag-proyectos__grelha).
   Ritmo: pontos da galeria → título 40px (a margem da .sol-galeria), título →
   texto 24px, texto → título seguinte 80px, texto → faixa 180px, faixa →
   rodapé 180px. Campos vazios não desenham nada nem deixam espaço. */
.sol-hero--ficha .sol-hero__titulo{max-width:766px}
.ficha{margin-bottom:180px}
.sol-hero--ficha + .ficha-otras{margin-top:180px}   /* sem galeria nem textos */
.ficha__coluna.wrap{width:min(770px,100% - 2 * var(--gut))}
.ficha__coluna > :first-child{margin-top:0}
.ficha__titulo{font-size:var(--t-h3);font-weight:700;color:var(--rojo);text-align:center}
.ficha__titulo + .ficha__texto{margin-top:24px}
.ficha__texto + .ficha__titulo{margin-top:80px}
.sol-galeria + .ficha__texto{margin-top:0}
/* (29-10-2026) O carrossel passou para depois do resumo/texto: texto → carrossel
   segue o ritmo texto → bloco seguinte (80px); a galeria no fim da coluna não soma
   os seus 40px aos da .ficha. */
.ficha__coluna > :is(.ficha__titulo,.ficha__texto) + .sol-galeria{margin-top:80px}
.ficha__coluna > .sol-galeria:last-child{margin-bottom:0}
/* Galeria com 2+ imagens: a pista dos Proyectos da homepage com um cartão por
   imagem (as setas e o deslizar são os dela) e os pontos da .sol-galeria por
   baixo; cada ponto tem 24px de área de toque à volta dos 12px visíveis. */
.proyectos__palco.ficha-galeria__palco{margin-top:0}
.proyectos__pista.ficha-galeria__pista{grid-auto-columns:100%}
.ficha-galeria__img{width:100%;height:auto;aspect-ratio:770 / 453;object-fit:cover;border-radius:var(--r);scroll-snap-align:start}
.ficha-galeria .sol-galeria__ponto{position:relative}
.ficha-galeria .sol-galeria__ponto::after{content:"";position:absolute;inset:-6px;border-radius:50%}
/* Pontos por escolher: cinzento visível sobre o branco (3:1, o mínimo para
   controlos) — o #F4F5F5 da .sol-galeria quase não se via aqui. Só a ficha:
   as galerias das Notícias e das Soluções ficam como estão. */
.ficha-galeria .sol-galeria__ponto:not([aria-current="true"]){background:#8F9494}
/* Setas nas pontas: o kit.js põe [hidden] na que não tem para onde ir (só a ficha). */
.ficha-galeria .proyectos__seta[hidden]{display:none}
.ficha-otras .pag-proyectos__grelha{margin-top:40px}
.sol-otras.ficha-otras{margin-bottom:180px}
@media (max-width:900px){
  .ficha{margin-bottom:112px}
  .sol-hero--ficha + .ficha-otras{margin-top:112px}
  .ficha__texto + .ficha__titulo{margin-top:56px}
  .ficha__coluna > :is(.ficha__titulo,.ficha__texto) + .sol-galeria{margin-top:56px}
  .sol-otras.ficha-otras{margin-bottom:112px}
}
@media (max-width:900px){
  .pag-proyectos__grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pag-proyectos__grelha{grid-template-columns:minmax(0,1fr)}
}

/* ---- Páginas internas: Novedades (node 271:1502) -------------------------- */
/* Grelha de notícias do módulo: 3 colunas, 16px entre colunas e 24px entre
   linhas. A introdução e a grelha partilham o fundo em degradê do design
   (#F4F5F5 → branco, desde o fim do herói): cada uma desenha a sua parte. */
.pag-noticias__grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}
.pag-noticias__grelha > li{display:flex}
.pag-noticias__grelha .cartao-noticia{flex:1}
.pag-intro:has(+ .pag-noticias){margin-top:0;padding:80px 0 40px;background:linear-gradient(180deg,#F4F5F5 0%,#F7F7F7 100%)}
.pag-intro + .pag-noticias{margin-top:0;padding:40px 0 100px;background:linear-gradient(180deg,#F7F7F7 0%,#FFFFFF 100%)}
@media (max-width:900px){
  .pag-noticias__grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pag-noticias__grelha{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  /* herói curto em mobile: altura pelo conteúdo, com margem em baixo */
  .sol-hero--curto .sol-hero__centro{padding:40px 0 56px}
  .sol-hero--curto .sol-hero__centro--sem-ante{padding-top:40px}
}

/* ---- Notícia do módulo (Figma: «Pagina de Novedades», node 274:496) ------- */
/* Herói curto das páginas internas, com o título em Bold (os outros são
   ExtraBold) numa coluna de 766, à mesma altura (146px do topo); cresce com
   títulos longos em vez de os cortar. Galeria e corpo numa coluna de 770: a
   galeria é a das soluções (770×453, pontos a 16px) e o corpo começa 80px
   abaixo dos pontos; 180px até à faixa «Otras novedades» (ou ao rodapé), que é
   a .sol-otras com a grelha de Novedades (3 colunas). O corpo segue a regra
   geral dos textos (.legal__texto, como a ficha do Portefólio): uma linha entre
   blocos — a view tira as linhas em branco do editor (<p><br></p>) —, listas do
   Quill 2, subtítulos e ligações. */
.sol-hero.sol-hero--noticia{height:auto;min-height:381px}
.sol-hero--noticia .sol-hero__centro{padding-bottom:64px}
.sol-hero--noticia .sol-hero__titulo{max-width:766px;font-weight:700}
.noticia{margin-bottom:180px}
/* Sem galeria nem corpo (só a imagem principal, ou nenhuma) não há .noticia:
   a faixa «Otras novedades» segue o herói com o mesmo espaço que teria. */
.sol-hero--noticia + .noticia-otras{margin-top:180px}
.noticia__coluna.wrap{width:min(770px,100% - 2 * var(--gut))}
.noticia .sol-galeria{margin-bottom:0}
.noticia .sol-galeria + .noticia__texto{margin-top:80px}
.noticia__texto{color:var(--negro)}
.legal__texto.noticia__texto{margin-top:0}   /* sem galeria, colado ao topo da coluna, como antes */
.noticia__texto :is(h2,h3,h4){font-weight:700}
.noticia__texto h2{font-size:var(--t-h3)}
.noticia__texto a{color:var(--rojo);text-decoration:underline;overflow-wrap:anywhere}
.noticia__texto img{max-width:100%;height:auto;border-radius:var(--r)}
.noticia-otras .pag-noticias__grelha{margin-top:40px}
.sol-otras.noticia-otras{margin-bottom:180px}   /* 180 até ao rodapé neste frame (as soluções têm 160) */
@media (max-width:900px){
  .noticia{margin-bottom:112px}
  .sol-hero--noticia + .noticia-otras{margin-top:112px}
  .noticia .sol-galeria + .noticia__texto{margin-top:56px}
  .sol-otras.noticia-otras{margin-bottom:112px}
}
@media (max-width:700px){
  .sol-hero--noticia .sol-hero__centro{padding-bottom:56px}
}

/* ---- Faixa cinzenta com migalhas (FAQ 292:619, Formulário 292:630) -------- */
.faixa-migas{background:var(--gris)}
.faixa-migas__topo{display:flex;align-items:center;gap:8px;height:64px;padding-bottom:4px}
.faixa-migas .migas{color:var(--negro)}

/* O editor rico (Quill 2) deixa um <span class="ql-ui"> vazio em cada item de
   lista: é interface do editor, nunca conteúdo. */
.ql-ui{display:none}

/* ---- Listas do texto rico — camada comum ------------------------------------
   Uma lista chega ao site em dois formatos e os dois têm de se ver iguais:
     · o HTML semeado: <ul>/<ol> aninhadas (numeração nativa; «a, b» só com
       type="a");
     · o do editor Quill 2: QUALQUER lista num <ol> plano, cada item com
       data-list="bullet|ordered" e o nível na classe .ql-indent-N (sem ela,
       nível 0).
   Vale nos textos de prosa sem desenho próprio de listas: .legal__texto (a
   regra geral — Política, Términos, corpo das notícias, ficha do Portefólio),
   .pag-texto, .pag-ti__texto, .sol-desc__texto e .faq__resposta. As listas com
   desenho do Figma (.entrada__lista, .fila__corpo, .cartao-unik__corpo) têm as
   suas regras: são de um só nível e já tratam os dois formatos.
   Numeração: o contador nativo do <ol> plano contava os itens de todos os
   níveis seguidos (uma sublista depois de dois bullets saía «3., 4.»), por
   isso os itens «ordered» do Quill contam num contador por nível (lt0…lt3):
   cada <ol> cria-os (counter-reset); cada item põe a zero os dos níveis abaixo
   do seu (counter-set — uma sublista nova começa em 1); só os «ordered» contam,
   cada um no seu nível. É a estratégia do próprio Quill (quill.snow.css): um
   counter-reset num <li> irmão não recomeça o contador para os irmãos
   seguintes; só sem counter-set (Safari < 17.2) se usa o reset. O número vai
   no ::before, fora da caixa, onde estaria o marcador nativo (o Safari não
   aceita content no ::marker). Todos os níveis em decimal; até 3 de indentação.
   Espaço: 16px entre os bullets de uma mesma lista (no HTML semeado, ul > li +
   li; no Quill, os bullets do mesmo nível — no nível 0 mesmo com uma sublista
   pelo meio). Os itens numerados não o levam, como num <ol> semeado. */
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) :is(ul,ol){padding-left:1.5em}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) ul,:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="bullet"]{list-style:disc}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) ol{list-style:decimal;counter-reset:lt0 lt1 lt2 lt3}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) ol[type="a"]{list-style:lower-alpha}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) .ql-indent-1{margin-left:1.5em}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) .ql-indent-2{margin-left:3em}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) .ql-indent-3{margin-left:4.5em}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) ul > li + li,
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="bullet"]:not([class*="ql-indent-"]) ~ li[data-list="bullet"]:not([class*="ql-indent-"]),
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="bullet"].ql-indent-1 + li[data-list="bullet"].ql-indent-1,
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="bullet"].ql-indent-2 + li[data-list="bullet"].ql-indent-2,
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="bullet"].ql-indent-3 + li[data-list="bullet"].ql-indent-3{margin-top:16px}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list]{counter-set:lt1 lt2 lt3}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-1{counter-set:lt2 lt3}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-2{counter-set:lt3}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-3{counter-set:none}
@supports not (counter-set:none){
  :is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list]{counter-reset:lt1 lt2 lt3}
  :is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-1{counter-reset:lt2 lt3}
  :is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-2{counter-reset:lt3}
  :is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list].ql-indent-3{counter-reset:none}
}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"]{position:relative;list-style:none;counter-increment:lt0}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-1{counter-increment:lt1}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-2{counter-increment:lt2}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-3{counter-increment:lt3}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"]::before{content:counter(lt0) ".";position:absolute;right:100%;margin-right:.4em;white-space:nowrap}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-1::before{content:counter(lt1) "."}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-2::before{content:counter(lt2) "."}
:is(.legal__texto,.pag-texto,.pag-ti__texto,.sol-desc__texto,.faq__resposta) li[data-list="ordered"].ql-indent-3::before{content:counter(lt3) "."}

/* ---- Página FAQ (node 275:537) --------------------------------------------- */
/* Faixa cinzenta de 64px com a seta e as migalhas; título a 80px da faixa e,
   34px abaixo, as duas colunas: categorias (295) e perguntas (673) em 968.
   Perguntas: linhas de 59px (20 + texto + 20); a aberta é um cartão cinzento
   r24 com 20px de ar à volta; a resposta a 10px da pergunta. */
.faq__grelha.wrap{width:min(968px,100% - 2 * var(--gut));display:grid;grid-template-columns:295fr 673fr;column-gap:0;row-gap:34px;align-items:start;margin-top:80px}
.faq__titulo{max-width:295px;font-size:var(--t-h2);font-weight:700;color:var(--rojo)}
/* Posições explícitas: sem «Ver todo» (um só painel), o menu não pode subir à 1.ª linha */
.faq__menu{grid-column:1;grid-row:2}
.faq__paineis{grid-column:2;grid-row:2}
.faq__todos{justify-self:end;margin-top:6px;padding:10px 16px;border-radius:var(--r);background:var(--gris);color:var(--negro);font-size:var(--t-small);line-height:16px}
.faq__menu ul{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:24px}
.faq__cat{max-width:256px;padding:10px 16px;border:2px solid var(--gris);border-radius:var(--r);color:var(--negro);font-size:var(--t-small);line-height:16px;text-align:left}
.faq__cat:not(:disabled):hover{border-color:var(--rojo)}
.faq__todos:hover{box-shadow:inset 0 0 0 2px var(--rojo)}
.faq__cat[aria-pressed="true"],.faq__todos[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.faq__cat:disabled{color:rgba(16,18,17,.4);cursor:default}
.faq__painel + .faq__painel{margin-top:80px}
.faq[data-faq-js] .faq__painel:not(.is-ativo){display:none}
/* Com o menu ativo, o espaço entre painéis só existe entre os visíveis («Ver
   todo»): um painel escondido antes do escolhido não o empurra para baixo. */
.faq[data-faq-js] .faq__painel + .faq__painel{margin-top:0}
.faq[data-faq-js] .faq__painel.is-ativo ~ .faq__painel.is-ativo{margin-top:80px}
.faq__cat-titulo{max-width:448px;font-size:var(--t-h3);font-weight:700;color:var(--negro)}
.faq__frase{max-width:448px;margin-top:16px;color:var(--negro)}
.faq__lista{margin-top:37px;list-style:none}
.faq__item{border-radius:var(--r)}
.faq__item:has(details[open]){margin-block:20px;background:var(--gris)}
.faq__item:first-child:has(details[open]){margin-top:0}
.faq__pergunta{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 21px 20px 24px;font-weight:700;color:var(--negro)}
summary.faq__pergunta{cursor:pointer;list-style:none}
summary.faq__pergunta::-webkit-details-marker{display:none}
.faq__linha{max-width:550px}
.faq__num{margin-right:4px;color:var(--rojo)}
.faq__icone{flex:none;width:18px;height:18px;margin-top:1px;color:#FF0000}
details[open] .icono-mas__v{display:none}
.faq__resposta{max-width:598px;padding:0 24px 19px;margin-top:-10px;color:var(--negro)}
.faq__resposta > * + *{margin-top:0}
.faq__resposta a{color:var(--rojo);text-decoration:underline}
.faq + .pag-cierre{margin-top:160px;padding:40px 0}
@media (max-width:900px){
  .faq__grelha.wrap{grid-template-columns:minmax(0,1fr) auto;row-gap:24px;margin-top:56px}
  .faq__titulo{max-width:none}
  .faq__menu,.faq__paineis{grid-column:1 / -1;grid-row:auto}
  .faq__menu ul{flex-direction:row;flex-wrap:wrap;gap:8px;padding-right:0}
  .faq__paineis{margin-top:16px}
  .faq + .pag-cierre{margin-top:112px}
}
@media (max-width:700px){
  .faq__pergunta{gap:16px;padding:16px}
  .faq__resposta{padding:0 16px 16px}
  .faq__item:has(details[open]){margin-block:12px}
}

/* ---- Página Contactos (Formulário, node 292:629) --------------------------- */
/* Título a 80px da faixa, texto 16px abaixo (770 de largura), cartões a 40px
   do texto e o rodapé a 180px dos cartões. */
.pag-encabezado{margin-top:80px;text-align:center}
.pag-encabezado__titulo{max-width:770px;margin-inline:auto;font-size:var(--t-h2);font-weight:700;color:var(--negro)}
.pag-encabezado__texto{max-width:770px;margin:16px auto 0;color:var(--negro)}
.pag-encabezado + .pag-tarjetas{margin-top:40px;margin-bottom:180px}
@media (max-width:900px){
  .pag-encabezado{margin-top:56px}
  .pag-encabezado + .pag-tarjetas{margin-bottom:112px}
}

/* Três cartões de 377×290 em toda a largura (node 292:629: 137→1300, 16 de
   intervalo) — só nesta página; os cartões da Profesionales ELITE mantêm o
   desenho antigo, a duas colunas. */
body.pagina-contactos .pag-tarjetas__grelha{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  body.pagina-contactos .pag-tarjetas__grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  body.pagina-contactos .pag-tarjetas__grelha{grid-template-columns:minmax(0,1fr)}
}
/* Hover (node 566:912/573:939/575:986, variante «Variant2»): o cartão cresce de
   290 para 460 e revela o texto e o botão. A linha da grelha fica fixa em 290,
   por isso o cartão cresce por cima do espaço que se segue, sem empurrar nada.
   Mesmo método do cartão de projeto (.cartao-proyecto): hover onde há hover,
   `focus-within` para o teclado, e o texto continua no DOM — só deixa de ocupar
   espaço, para os leitores de ecrã o lerem na mesma. */
@media (hover:hover) and (min-width:901px){
  body.pagina-contactos .pag-tarjetas__grelha{grid-auto-rows:290px;align-items:start}
  body.pagina-contactos .tarjeta{min-height:0;height:290px}
  body.pagina-contactos .tarjeta__texto,
  body.pagina-contactos .tarjeta__btn{max-height:0;margin-top:0;opacity:0;overflow:hidden}
  body.pagina-contactos .tarjeta:hover,
  body.pagina-contactos .tarjeta:focus-within{height:460px;z-index:1}
  body.pagina-contactos .tarjeta:hover .tarjeta__texto,
  body.pagina-contactos .tarjeta:focus-within .tarjeta__texto{max-height:200px;margin-top:16px;opacity:1}
  body.pagina-contactos .tarjeta:hover .tarjeta__btn,
  body.pagina-contactos .tarjeta:focus-within .tarjeta__btn{max-height:48px;margin-top:21px;opacity:1}
}
@media (hover:hover) and (min-width:901px) and (prefers-reduced-motion:no-preference){
  body.pagina-contactos .tarjeta{transition:height .25s ease}
  body.pagina-contactos .tarjeta__texto,
  body.pagina-contactos .tarjeta__btn{transition:max-height .25s ease,margin-top .25s ease,opacity .25s ease}
}

/* ---- Política de Privacidad (node 497:665, nomeado «FAQs» no Figma) -------- */
/* Grelha, menu e painéis da FAQ. Texto a 16px do título do apartado, com uma
   linha em branco entre parágrafos e listas; o rodapé a 180px do fim.
   O .legal__texto é a regra geral dos textos ricos: vale também no corpo das
   notícias (.legal__texto.noticia__texto) e na ficha do Portefólio
   (.legal__texto.ficha__texto). As listas vêm da camada comum («Listas do
   texto rico», acima). */
.faq--legal{margin-bottom:180px}
.legal__texto{margin-top:16px;color:var(--negro)}
.legal__texto > * + *{margin-top:1.1667em}
.legal__texto a{text-decoration:underline;overflow-wrap:anywhere}
/* Subtítulos internos de um apartado (ex.: os conceitos de «Definiciones», os
   direitos de «Derechos del interesado», o 5.1 dos Términos) e o nível abaixo
   (h4: «a) Usuarios generales»): negrito do corpo, colados ao seu texto; o h3
   com mais ar por cima. */
.legal__texto :is(h3,h4){font-size:inherit;font-weight:700}
.legal__texto > * + h3{margin-top:2.3333em}
.legal__texto > :is(h3,h4) + *{margin-top:.5833em}
/* Tabelas das páginas legais (ex.: a «Información básica» da Política de
   Privacidad, as cookies da Política de Cookies). Só nas páginas legais: o
   .legal__texto também é o corpo das notícias e da ficha do Portefólio.
   O Quill não grava <th> nem <thead>: uma célula cujo conteúdo é só negrito é
   um cabeçalho — a 1.ª linha das cookies, a 1.ª coluna da Privacidad — e fica
   com o fundo cinzento do tema. Moldura com o raio do design, linhas finas,
   texto a 14px. Em ecrãs estreitos a tabela desliza na horizontal dentro da
   coluna (nunca alarga a página nem corta colunas). */
.faq--legal .legal__texto table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--gris-2);border-radius:16px;border-collapse:separate;border-spacing:0;
  font-size:var(--t-small);line-height:1.4286;
  /* sombra na margem só enquanto há colunas escondidas (a capa branca acompanha o conteúdo) */
  background:linear-gradient(to right,var(--blanco) 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,
    linear-gradient(to left,var(--blanco) 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,
    linear-gradient(to right,rgba(16,18,17,.12),rgba(16,18,17,0)) left/14px 100% no-repeat scroll,
    linear-gradient(to left,rgba(16,18,17,.12),rgba(16,18,17,0)) right/14px 100% no-repeat scroll}
.faq--legal .legal__texto tbody{display:table;width:100%;border-collapse:separate;border-spacing:0}
.faq--legal .legal__texto :is(td,th){padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gris-2)}
.faq--legal .legal__texto :is(td,th) + :is(td,th){border-left:1px solid var(--gris-2)}
.faq--legal .legal__texto tr:last-child > :is(td,th){border-bottom:0}
.faq--legal .legal__texto :is(th,td:has(> strong:only-child)){background:var(--gris);font-weight:700}
/* A tabela das cookies (Política de Cookies, «¿Qué cookies utilizamos…?»), a única
   com 6 colunas — reconhecida pela estrutura, não por uma classe: o Quill tira os
   atributos da tabela ao gravar. Largura fixa por coluna, medida pela palavra mais
   larga de cada uma (os cabeçalhos «TRANSFERENCIA», «CADUCIDAD»…, «CookieConsent»),
   e a «Descripción» fica com o resto: linhas mais baixas, sem palavras cortadas.
   Abaixo de 730px a tabela desliza dentro da coluna, como as outras. */
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tbody{table-layout:fixed;min-width:730px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) :is(td,th){padding:12px 10px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tr:first-child > td:nth-child(1){width:92px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tr:first-child > td:nth-child(2){width:120px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tr:first-child > td:nth-child(4){width:100px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tr:first-child > td:nth-child(5){width:104px}
.faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) tr:first-child > td:nth-child(6){width:136px}
@media (max-width:900px){
  .faq--legal{margin-bottom:112px}
}
@media (max-width:700px){
  .faq--legal .legal__texto :is(td,th){padding:12px;min-width:132px}
  .faq--legal .legal__texto table:has(tr:first-child > td:nth-child(6):last-child) :is(td,th){min-width:0}
}

/* ---- Consentimento de cookies (kit.js: consentimento) ---------------------- */
/* Sem Figma: construído com os tokens do tema (Raleway, vermelho Giacomini,
   cinzento #F4F5F5, raio 24, botões .btn). Aviso fixo em baixo (não empurra o
   conteúdo); «Aceptar» e «Rechazar» com o mesmo peso. As preferências são um
   <dialog> nativo (foco preso, Esc fecha sem gravar). Só opacity e transform. */
.aviso-cookies{
  position:fixed;left:0;right:0;bottom:16px;z-index:1000;padding:0 var(--gut);
  opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.aviso-cookies.is-visivel{opacity:1;transform:none}
.aviso-cookies__caixa{
  max-width:968px;margin-inline:auto;padding:24px;border-radius:var(--r);background:var(--blanco);color:var(--negro);
  box-shadow:0 12px 40px rgba(16,18,17,.18);pointer-events:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:end;
}
.aviso-cookies__tit{grid-column:1;font-size:var(--t-body);font-weight:700}
.aviso-cookies__txt{grid-column:1;font-size:var(--t-small);line-height:1.43}
.aviso-cookies__txt a,.prefs-cookies__intro a{color:var(--rojo);text-decoration:underline}
.aviso-cookies__botoes{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.aviso-cookies__cfg{padding:10px 4px;color:var(--rojo);font-size:var(--t-small);font-weight:700;text-decoration:underline}
.aviso-cookies__botoes .btn{white-space:nowrap}
/* Três ações na mesma camada: até 1000px passam para baixo do texto (a coluna
   do texto não aperta); até 700px empilham a toda a largura, pela mesma ordem */
@media (max-width:1000px){
  .aviso-cookies__caixa{grid-template-columns:minmax(0,1fr)}
  .aviso-cookies__botoes{grid-column:1;grid-row:auto;margin-top:8px}
}
@media (max-width:700px){
  .aviso-cookies{bottom:12px}
  .aviso-cookies__caixa{padding:20px}
  .aviso-cookies__botoes{flex-direction:column;align-items:stretch;gap:10px}
  .aviso-cookies__botoes .btn{white-space:normal}
}

.prefs-cookies{
  width:min(560px,100% - 2 * var(--gut));max-height:calc(100% - 32px);margin:auto;padding:32px;border:0;border-radius:var(--r);
  background:var(--blanco);color:var(--negro);box-shadow:0 20px 60px rgba(16,18,17,.25);overflow:auto;
}
.prefs-cookies::backdrop{background:rgba(16,18,17,.5)}
.prefs-cookies__topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.prefs-cookies h2{font-size:var(--t-h3);font-weight:700;color:var(--rojo)}
.prefs-cookies__x{flex:none;width:40px;height:40px;margin:-8px -8px 0 0;border-radius:50%;font-size:28px;line-height:1;color:var(--negro)}
.prefs-cookies__x:hover{background:var(--gris)}
.prefs-cookies__intro{margin-top:12px;font-size:var(--t-small);line-height:1.43}
.prefs-cookies__grupo{margin-top:16px;padding:16px;border-radius:16px;background:var(--gris);display:flex;align-items:center;justify-content:space-between;gap:16px}
.prefs-cookies__grupo h3{font-size:var(--t-body);font-weight:700}
.prefs-cookies__grupo p{margin-top:4px;font-size:var(--t-small);line-height:1.43}
.prefs-cookies__sempre{flex:none;font-size:var(--t-small);font-weight:700;color:var(--rojo)}
.prefs-cookies__nota{margin-top:12px;font-size:var(--t-xs);line-height:1.4}
.prefs-cookies__grupo p.prefs-cookies__servicos{margin-top:6px;font-size:var(--t-xs);font-weight:700}
.prefs-cookies__accoes{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.prefs-cookies__accoes .btn{flex:1 1 0;white-space:nowrap}   /* «Guardar preferencias» | «Aceptar todas», a meias */
.prefs-cookies__sw{position:relative;flex:none;width:48px;height:28px}
.prefs-cookies__sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.prefs-cookies__calha{position:absolute;inset:0;border-radius:14px;background:#C9CCCB;transition:background-color .2s ease}
.prefs-cookies__calha::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--blanco);transition:transform .2s ease}
.prefs-cookies__sw input:checked + .prefs-cookies__calha{background:var(--rojo)}
.prefs-cookies__sw input:checked + .prefs-cookies__calha::after{transform:translateX(20px)}
.prefs-cookies__sw input:focus-visible + .prefs-cookies__calha{outline:3px solid var(--rojo);outline-offset:3px}
@media (max-width:600px){
  .prefs-cookies{padding:24px 20px}
  .prefs-cookies__accoes .btn{flex:1 1 100%;white-space:normal}
}

/* ---- Espaços entre secções: máximo de 100px no desktop (pedido do cliente) --
   Só acima de 1100px: os espaços de mais de 100px entre secções principais
   (e até ao rodapé) descem para 100px; os de 100px ou menos ficam como estão.
   Tablet e telemóvel mantêm as regras próprias. Os mesmos seletores das regras
   originais, aqui no fim, para ganharem pela ordem. O padding interno das
   secções com fundo (faixas cinzentas, degradês) não muda; a Ayuda é a exceção. */
@media (min-width:1101px){
  /* Home */
  .ayuda{margin-top:100px;padding-bottom:60px}  /* 60 + 40 = 100 dos passos ao título do UNIK */
  .unik{padding-top:40px}
  .videos{margin-top:100px}
  .novedades{margin-top:100px}
  .proyectos{padding-top:100px}
  .newsletter{margin-top:100px}
  /* Soluções e índice de soluções */
  .sol-desc{padding-bottom:100px}
  .sol-otras{margin-bottom:100px}
  /* Páginas internas */
  .pag-bloco{margin-top:100px}
  .pag-bloco.pag-ilustracion,.pag-bloco.pag-valores{margin-top:100px}
  .pag-testimonios{margin-top:100px}
  .pag-lema{margin-top:100px}
  .pag-testimonios + .pag-lema{padding-top:100px}
  .pag-tarjetas{margin-top:100px;margin-bottom:100px}
  .pag-cierre{margin-bottom:100px}
  .faq + .pag-cierre{margin-top:100px}
  .pag-encabezado + .pag-tarjetas{margin-bottom:100px}
  .faq--legal{margin-bottom:100px}
  /* Ficha do Portefólio e notícia */
  .ficha,.noticia{margin-bottom:100px}
  .sol-hero--ficha + .ficha-otras,.sol-hero--noticia + .noticia-otras{margin-top:100px}
  .sol-otras.ficha-otras,.sol-otras.noticia-otras{margin-bottom:100px}
}