/* ── style.css ── */
/*
Theme Name: Suba
Theme URI: https://suba.pt/
Author: SUBA — The Growth Agency
Author URI: https://suba.pt/
Description: Tema de blocos autónomo desenhado para a Terralva. Tokens do Figma «Terralva v0 Interno», secções presas comandadas pelo scroll e conteúdo todo editável no editor de blocos.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suba
Tags: one-column, full-site-editing, block-patterns, custom-colors, custom-logo

Este ficheiro é a camada PARTILHADA: tokens, base, tipografia, layout, botões,
reveals e o cromo global. O que é de uma secção vive no CSS do bloco respectivo
(blocks/<nome>/style.css). A ordem das regras acompanha a do home.php original,
para a cascata dar o mesmo resultado.
*/

/* ==========================================================================
   POPPINS AUTO-HOSPEDADO — só os dois pesos que a página usa (200 e 300).
   O original pedia 200;300;400;500;1,200 ao Google Fonts; medido no CSS de
   origem, nenhum 400, 500 ou itálico é chamado. Menos três ficheiros, e sem
   pedido a servidor terceiro (RGPD).
   ========================================================================== */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap;
  src:url(https://terralva.samoraiscastro.pt/wp-content/themes/suba/assets/fonts/poppins-200-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;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:200; font-display:swap;
  src:url(https://terralva.samoraiscastro.pt/wp-content/themes/suba/assets/fonts/poppins-200-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:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url(https://terralva.samoraiscastro.pt/wp-content/themes/suba/assets/fonts/poppins-300-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;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap;
  src:url(https://terralva.samoraiscastro.pt/wp-content/themes/suba/assets/fonts/poppins-300-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;
}

/* --------------------------------------------------------------------------
   TOKENS — extraídos de Figma › Terralva v0 Interno › página "Estilos"
   Cores, tipografia, espaçamentos, raios e sombras são os do design system.
   Espelhados em theme.json para o editor oferecer os mesmos valores.
   -------------------------------------------------------------------------- */
:root{
  /* cores/base + cores/preto */
  --c-preto:#000000;      --c-branco:#ffffff;     --c-cinza:#EEEBE4;
  --c-principal:#E4C866;  --c-secundaria:#F2E3B0;
  --c-preto-00:#E6E6E6;   --c-preto-20:#CCCCCC;   --c-preto-40:#999999;
  --c-preto-60:#666666;   --c-preto-80:#333333;

  /* space/* — desktop; a margem lateral é fluida entre mobile e o valor Figma (156) */
  --space-xxs:8px; --space-xs:16px; --space-s:24px; --space-m:32px;
  --space-l:48px;  --space-xl:80px; --space-xxl:160px;
  --gutter:clamp(1.5rem,8.1vw,156px);

  /* border-radius/* — S 6 · M 12 · L 18 */
  --r-s:6px; --r-m:12px; --r-l:18px; --pill:999px;

  /* drop-shadow/* — níveis 1 a 4, todos a #00000033 */
  --sh-1:0 5px 10px rgba(0,0,0,.2);
  --sh-2:0 10px 20px rgba(0,0,0,.2);
  --sh-3:0 15px 30px rgba(0,0,0,.2);
  --sh-4:0 40px 40px rgba(0,0,0,.2);

  /* botoes/* */
  --btn-py:18px; --btn-px:32px; --btn-h:47px;
  --nav-px:clamp(10px,.92vw,18px); --nav-ls:clamp(1.5px,.13vw,3px);

  --sans:'Poppins',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-back:cubic-bezier(.34,1.4,.44,1);
  --maxw:1600px;
  --idxw:clamp(10.5rem,14vw,15rem);

  /* escala tipográfica — interpola entre o modo mobile e o modo desktop do Figma
     S1 32→80 · S2 28→52 · S3 22→32 · S4 18→22 · P 16 · S5 12→14 · S6 10→12 */
  --fs-s1:clamp(2rem,.89rem + 4.57vw,5rem);
  --fs-s2:clamp(1.75rem,1.19rem + 2.29vw,3.25rem);
  --fs-s3:clamp(1.375rem,1.14rem + .95vw,2rem);
  --fs-s4:clamp(1.125rem,1.03rem + .38vw,1.375rem);
  --fs-p:1rem;
  --fs-s5:clamp(.75rem,.70rem + .19vw,.875rem);
  --fs-s6:clamp(.625rem,.58rem + .19vw,.75rem);
  --fs-btn:1rem;
  --fs-nav:clamp(.75rem,.50rem + .417vw,1rem);

  /* altura da barra de administração, quando existe */
  --suba-admin-bar:0px;
}

/* ---------- PALETA SEMÂNTICA POR TEMA ---------- */
:root{
  --bg:0,0,0;
  --fg:255,255,255;
  --muted:153,153,153;   /* preto/40 */
  --faint:102,102,102;   /* preto/60 */
  --hair:51,51,51;       /* preto/80 */
  --veil:20,20,20;
  --accent:242,227,176;  /* secundária */
}
[data-tema="light"]{
  background:var(--c-cinza);
  --bg:238,235,228;
  --fg:0,0,0;
  --muted:102,102,102;
  --faint:102,102,102;
  --hair:204,204,204;
  --veil:230,226,218;
  --accent:132,104,22;   /* dourado escurecido: 5.0:1 sobre #EEEBE4 (o #E4C866 dá 1.8:1) */
}
[data-tema]{color:rgb(var(--fg))}
/* a barra fixa mantém-se sempre em vidro escuro, seja qual for a secção */
.rail{--fg:255,255,255; --faint:102,102,102; --veil:20,20,20; --hair:51,51,51; --accent:242,227,176}
.au{color:rgb(var(--accent))}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:#080807; color:rgb(var(--fg));
  font-family:var(--sans); font-weight:300;
  font-size:var(--fs-p); line-height:1.6; letter-spacing:0;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-loading,body.is-locked{overflow:hidden}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,figure,dl,fieldset{margin:0}
fieldset{border:0; padding:0}
ul,ol{margin:0; padding:0; list-style:none}
svg{display:block}
::selection{background:var(--c-principal); color:var(--c-preto)}
:focus-visible{outline:1px solid var(--c-principal); outline-offset:5px}
.sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   ANDAIMES DO WORDPRESS — a parte que mais depressa parte este site
   1. O .ensaio__fixos e o .rail são position:fixed. Um ancestral com transform,
      filter, backdrop-filter, perspective, contain ou will-change passa a ser o
      bloco contentor e a abertura inteira colapsa para dentro do wrapper.
   2. Quatro painéis são position:sticky; top:0. Um overflow diferente de
      visible em qualquer ancestral desliga o sticky, sem erro nenhum. Vários
      temas de blocos põem overflow-x:clip no .wp-site-blocks — chegava para
      matar o legado, a gama, os reconhecimentos e os parceiros de uma vez.
   Estas regras são defensivas, não decorativas. Não apagar.
   ========================================================================== */
.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-post-content,
main.suba-main{
  overflow:visible;
  transform:none; filter:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  perspective:none; contain:none; will-change:auto;
  margin-block:0; padding:0; max-width:none;
}
/* o wrapper do template part desaparece da caixa: o <header class="rail"> e o
   <footer class="rodape"> ficam filhos directos do .wp-site-blocks */
.wp-block-template-part{display:contents}
/* o editor injecta espaçamento entre blocos de topo; aqui as secções encostam-se
   umas às outras de propósito */
.wp-site-blocks > * + *{margin-block-start:0}

/* barra de administração: 32px (46 em ecrã estreito) que deslocam o rail fixo e
   os topos dos painéis presos */
body.admin-bar{--suba-admin-bar:32px}
@media screen and (max-width:782px){ body.admin-bar{--suba-admin-bar:46px} }
body.admin-bar .rail{top:var(--suba-admin-bar)}
body.admin-bar .legado__fixo,
body.admin-bar .gama__fixo,
body.admin-bar .premios__fixo,
body.admin-bar .razoes__fixo{top:var(--suba-admin-bar)}

/* ==========================================================================
   SISTEMA TIPOGRÁFICO — 1:1 com os estilos de parágrafo do Figma
   S1 hero · S2 título de secção · S3 sub-bloco · S4 lead/cartão · P corpo
   S5 apoio · S6 eyebrow · Botão
   ========================================================================== */
.t-hero{font-size:var(--fs-s1); font-weight:200; line-height:1.3; letter-spacing:-.02em}
.t-1{font-size:var(--fs-s2); font-weight:200; line-height:1.3; letter-spacing:-.015em}
.t-2{font-size:var(--fs-s3); font-weight:200; line-height:1.4; letter-spacing:-.01em}
.t-3{font-size:var(--fs-s4); font-weight:300; line-height:1.6; letter-spacing:0}
.lead{font-size:var(--fs-s4); font-weight:300; line-height:1.6; color:rgb(var(--muted))}
.small{font-size:var(--fs-s5); font-weight:300; line-height:1.6; color:rgb(var(--muted))}
.eyebrow{color:rgb(var(--accent)); display:inline-flex; align-items:center; gap:.6rem; font-size:var(--fs-s6); font-weight:300;
  text-transform:uppercase; letter-spacing:.24em; line-height:1.6}
/* currentColor e nao --c-secundaria: no tema claro o texto resolve para o dourado
   escurecido (132,104,22) e a bola ficava creme palido, quase invisivel */
.eyebrow::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
/* distancia uniforme tag -> titulo: 32px (gap do contentor + esta margem) */
.cabeca > .eyebrow,.premios__esq > .eyebrow,.parceria__esq > .eyebrow{margin-bottom:var(--space-xxs)}
.legado__topo > .eyebrow{margin-bottom:var(--space-xs)}
.gama__tit > .eyebrow{margin-bottom:var(--space-s)}
.num{font-weight:200; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.mw-20{max-width:20ch} .mw-26{max-width:26ch} .mw-34{max-width:34ch}
.mw-44{max-width:44ch} .mw-52{max-width:52ch}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.acto{position:relative; padding-block:clamp(4.5rem,8vw,7rem)}
.acto--fit{padding-block:clamp(3.2rem,5vw,5rem)}
.cabeca{margin-bottom:clamp(1.8rem,3.4vw,2.8rem); display:grid; gap:var(--space-s); justify-items:start}
.skip{position:absolute; left:var(--gutter); top:-100px; z-index:300; background:var(--c-principal); color:var(--c-preto); padding:.7rem 1.3rem; border-radius:var(--pill); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; transition:top .2s}
.skip:focus{top:calc(1rem + var(--suba-admin-bar))}
.prog{position:relative; flex:1; min-width:90px; height:1px; background:rgb(var(--hair))}
.prog i{position:absolute; inset:0 auto 0 0; width:0; background:var(--c-secundaria)}

/* ---------- CURSOR / MEDIDOR ---------- */
.cursor{position:fixed; top:0; left:0; z-index:350; width:7px; height:7px; border-radius:50%; background:var(--c-principal); pointer-events:none; mix-blend-mode:difference; opacity:0; transition:width .35s var(--ease), height .35s var(--ease), opacity .3s}
.cursor.is-on{opacity:1}
.cursor.is-big{width:54px; height:54px; background:rgba(228,200,102,.2)}
@media (pointer:coarse){.cursor{display:none}}
.medidor{position:fixed; inset:var(--suba-admin-bar) 0 auto 0; height:1px; z-index:200; pointer-events:none}
.medidor__barra{height:100%; width:0; background:linear-gradient(90deg,transparent,var(--c-principal))}

/* ---------- AÇÕES — componente Botão (Figma › Botões) --------------------
   primário  : pílula #F2E3B0, texto preto, 16px/300, tracking 3px, 18×32
   secundário: contorno dourado, preenche a dourado no hover
   ------------------------------------------------------------------------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h); padding:0 var(--btn-px); box-sizing:border-box;
  border:1px solid var(--c-secundaria); border-radius:var(--pill);
  cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  font-size:var(--fs-btn); font-weight:300; line-height:1; letter-spacing:3px; text-transform:uppercase;
  color:var(--c-preto); background:var(--c-secundaria);
  transition:background .4s var(--ease-soft), color .4s var(--ease-soft), border-color .4s var(--ease-soft), transform .45s var(--ease-back)}
.btn:hover{background:var(--c-branco); border-color:var(--c-branco); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--forte{height:var(--btn-h)}
/* secundário (Figma 8701:270): vidro a 10% sobre fundo escuro, texto branco */
.btn--quiet{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); color:var(--c-branco)}
.btn--quiet:hover{background:var(--c-secundaria); border-color:var(--c-secundaria); color:var(--c-preto)}
[data-tema="light"] .btn--quiet{background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.1); color:var(--c-preto)}
[data-tema="light"] .btn--quiet:hover{background:var(--c-preto); border-color:var(--c-preto); color:var(--c-cinza)}
.icobtn{display:grid; place-items:center; width:44px; height:44px; flex:none; aspect-ratio:1; border:0; border-radius:50%;
  background:rgb(var(--veil)); color:rgb(var(--fg)); cursor:pointer;
  transition:background .4s, color .4s, transform .45s var(--ease-back)}
.icobtn:hover{background:var(--c-secundaria); color:var(--c-preto); transform:scale(1.06)}
.icobtn svg{width:16px; height:16px}
/* segmento (switch) — herda os tokens do botão */
.seg{display:inline-flex; gap:4px; background:rgb(var(--veil)); border-radius:var(--pill); padding:4px; width:auto; flex:none}
.seg button{border:0; border-radius:var(--pill); background:none; color:rgb(var(--muted));
  padding:12px 22px; font-size:var(--fs-s5); font-weight:300; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:background .4s, color .4s}
.seg button[aria-selected="true"],.seg button[aria-current="true"]{background:var(--c-secundaria); color:var(--c-preto)}

/* ---------- REVEALS ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease)}
.rv.in-view,.in-view>.rv{opacity:1; transform:none}
[data-stagger]>*{opacity:0; transform:translateY(20px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
[data-stagger].in-view>*{opacity:1; transform:none}
/* máscara de palavra para títulos */
.w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em}
.w>i{display:inline-block; font-style:inherit; transform:translateY(112%); transition:transform 1.05s var(--ease)}
.in-view .w>i{transform:translateY(0)}
/* sem JS nada se revela: o conteúdo tem de ficar visível na mesma */
.no-js .rv,.no-js [data-stagger]>*{opacity:1; transform:none}

/* ---------- PÁGINAS CORRENTES (política de privacidade e afins) ---------- */
.suba-pagina{padding-block:clamp(7rem,12vw,10rem) clamp(4.5rem,8vw,7rem)}
.suba-pagina h1{font-size:var(--fs-s2); font-weight:200; line-height:1.3; letter-spacing:-.015em; margin-bottom:var(--space-m)}
.suba-pagina h2{font-size:var(--fs-s3); font-weight:200; line-height:1.4; margin:var(--space-l) 0 var(--space-xs)}
.suba-pagina p{margin-bottom:var(--space-s); color:rgb(var(--muted))}
.suba-pagina ul{list-style:disc; padding-left:1.4rem; margin-bottom:var(--space-s); color:rgb(var(--muted))}
.suba-pagina a{text-decoration:underline; text-underline-offset:3px}

/* ---------- RESPONSIVO PARTILHADO ----------
   Só o que pertence a esta camada. O responsivo de cada secção viaja com o CSS
   do bloco respectivo, carregado depois deste ficheiro. */
@media (max-width:1441px){
  /* portateis: o --gutter a 8.1vw dava ~117px de margem e comia a largura util.
     Mexe-se no token, por isso seccoes, header e rodape descem todos juntos. */
  :root{--gutter:clamp(1.5rem,5.6vw,80px)}
}
@media (max-width:1366px){
  :root{--gutter:clamp(1.5rem,4.4vw,60px)}
}
@media (max-width:799px){
  /* 16px de margem, e so 16. O --gutter dava 30px a 375px e encolhia o conteudo
     sem necessidade. Como todas as seccoes, o header e o rodape o usam, mexer no
     token mantem-nas alinhadas — foi por isso que nao se tocou caso a caso. */
  :root{--gutter:16px}

  /* A tag e o titulo sao um par. Entre eles havia 32px (gap 24 + margem 8), o que
     no telemovel os separava mais do que os separa das seccoes vizinhas. */
  .cabeca{gap:8px; margin-bottom:clamp(.9rem,3vw,1.4rem)}
  .cabeca > .eyebrow,.premios__esq > .eyebrow,.parceria__esq > .eyebrow{margin-bottom:0}

  /* 47px de altura e 32 de padding lateral ao lado de titulos de 28px davam
     botoes com mais presenca do que o conteudo. */
  .btn,.btn--forte{height:40px; padding-inline:20px; font-size:.82rem; letter-spacing:2px}

  /* O SWITCH vinho/azeite tinha 51px de altura — mais alto que os proprios
     botoes (40px). */
  .seg button{padding:8px 15px; font-size:.68rem}
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-delay:0s!important; transition-duration:.001ms!important}
  .rv,[data-stagger]>*,.enter,.linha{opacity:1!important; transform:none!important}
  .w>i{transform:none!important}
  .cursor{display:none}
}

/* ── blocks/site-header/style.css ── */
/* ==========================================================================
   CABEÇALHO DO SITE — a barra fixa, o menu e o burger
   Extraído do home.php (linhas 160-193, 747-777, 891). A paleta do rail vive na
   folha partilhada, com o resto da paleta semântica.
   ========================================================================== */

.rail{position:fixed; inset:var(--suba-admin-bar,0) 0 auto 0; z-index:190; display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--space-s);
  padding:var(--space-s) var(--gutter); transition:transform .6s var(--ease), background .5s, backdrop-filter .5s, padding .5s}
.rail.is-solid{background:rgba(0,0,0,.78); backdrop-filter:blur(20px) saturate(150%)}
.rail.is-hidden{transform:translateY(-110%)}
.marca{display:grid; justify-items:start; line-height:1}
.marca img{display:block; height:clamp(30px,2.75vw,48px); width:auto}
.marca__texto{font-size:var(--fs-s3); font-weight:200; letter-spacing:.08em; text-transform:uppercase}
.marca__endosso{font-size:.625rem; font-weight:300; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55)}
/* pilula de navegacao — Figma 14717:1403 */
.nav{justify-self:center; display:flex; align-items:center; padding:2px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); border-radius:var(--pill)}
.nav__link{display:inline-flex; align-items:center; justify-content:center; height:43px; white-space:nowrap;
  padding:0 var(--nav-px); border-radius:var(--pill);
  font-size:var(--fs-nav); font-weight:300; line-height:1; letter-spacing:var(--nav-ls); text-transform:uppercase;
  color:var(--c-branco); transition:color .35s, background .45s}
.nav__link:first-child{padding-left:calc(var(--nav-px) + 14px)}
.nav__link:last-child{padding-right:calc(var(--nav-px) + 14px)}
.nav__link:hover{background:rgba(255,255,255,.14)}
.nav__link[aria-current="true"]{background:var(--c-secundaria); color:var(--c-preto)}
.rail__actions{justify-self:end; display:flex; align-items:center; gap:var(--space-xs)}
/* o CTA do header segue a escala da pilula — mesma font, mesmo tracking */
.rail__actions .btn{font-size:var(--fs-nav); letter-spacing:var(--nav-ls)}
/* seletor de lingua — so texto, sem fundo nem filete; segue a escala da pilula */
.lang{display:inline-flex; align-items:center; height:43px; padding:0 0 0 .35rem;
  background:none; border:0; text-decoration:none;
  font-size:var(--fs-nav); font-weight:300; line-height:1; letter-spacing:var(--nav-ls); text-transform:uppercase;
  color:var(--c-branco); cursor:pointer; transition:color .35s}
.lang:hover,.lang:focus-visible{color:var(--c-branco)}
.burger{display:none; width:44px; height:44px; border:0; border-radius:50%; background:rgb(var(--veil)); cursor:pointer; position:relative}
.burger span{position:absolute; left:12px; width:20px; height:1px; background:rgb(var(--fg)); transition:transform .35s var(--ease)}
.burger span:nth-child(1){top:19px} .burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

@media (max-width:1160px){
  .rail{grid-template-columns:minmax(0,1fr) auto; padding-block:var(--space-xs)}
  /* justify-self:stretch e o que corrige o painel: a regra base tem
     justify-self:center (o nav e um item da grelha do header) e isso encolhia o
     painel fixo a 263px num ecra de 375, centrado em vez de a cobrir. */
  .nav{position:fixed; inset:0; z-index:-1; justify-self:stretch; align-self:stretch;
    flex-direction:column; justify-content:center; gap:var(--space-s);
    padding:0; border:0; border-radius:0;
    /* .98 tornava o blur invisivel: a .62 le-se o site por tras */
    background:rgba(8,8,7,.62);
    -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%);
    opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s}
  .nav.is-open{opacity:1; visibility:visible; z-index:5}
  .nav__link{height:auto; font-size:1.05rem; letter-spacing:.2em; padding:.85rem 1.7rem!important;
    border-radius:0}
  .nav__link:hover{background:none}
  /* a seccao activa marca-se com um sublinhado, nao com a pilula de fundo */
  .nav__link[aria-current="true"]{background:none; color:var(--c-branco);
    text-decoration:underline; text-decoration-color:var(--c-secundaria);
    text-decoration-thickness:1px; text-underline-offset:7px}
  .burger{display:grid; place-items:center; z-index:6}
  /* O <nav> e filho do <header>, e tanto backdrop-filter como transform fazem do
     header o bloco contentor dos seus descendentes position:fixed. Com .is-solid
     (scroll > 40px) o painel do menu passava a medir a altura da barra — 76px em
     vez dos 667 do ecra — e com .is-hidden saia do ecra. Enquanto o menu esta
     aberto o header nao aplica nenhum dos dois, e o inset:0 volta a resolver
     contra a janela. A transicao tambem tem de ir: a meio dela o filtro ainda
     nao e "none" e o bloco contentor mantem-se. */
  body.is-locked .rail{-webkit-backdrop-filter:none; backdrop-filter:none;
    transform:none; background:transparent; transition:none}
}

@media (max-width:560px){ .rail__actions .btn{display:none} }

/* ---------- PRÉ-VISUALIZAÇÃO NO EDITOR ----------
   Versão inerte: sem posição fixa, sem IDs, sem cliques. Só o botão de editar
   fica fora da área inerte, que é o único sítio onde tem de continuar a
   funcionar. */
.suba-previa{background:#0b0b0a; color:#fff; padding:var(--space-s); border-radius:var(--r-m)}
.suba-previa__nota{font-size:var(--fs-s6); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:var(--space-xs)}
.suba-previa__palco{position:relative; overflow:hidden; border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-s)}
.suba-previa__palco *{pointer-events:none!important}
.rail--previa,.rodape--previa{position:static!important; transform:none!important; inset:auto!important}
.rail--previa{background:rgba(0,0,0,.5)}
.burger--previa{display:grid; place-items:center}
.suba-previa__accoes{display:flex; gap:var(--space-xxs); margin-bottom:var(--space-xs)}
.suba-aviso{margin-top:var(--space-xs); padding:var(--space-xxs) var(--space-xs); border-left:2px solid var(--c-principal); font-size:var(--fs-s5)}

/* ── blocks/site-footer/style.css ── */
/* ==========================================================================
   RODAPÉ — vídeo de fundo e barra legal
   Extraído do home.php (linhas 639-656, 738, 886-889).
   ========================================================================== */

.rodape{position:relative; min-height:min(72svh,620px); display:grid; align-items:end;
  overflow:hidden; isolation:isolate; background:var(--c-preto)}
.rodape__media{position:absolute; inset:0; z-index:-1}
.rodape__media video,.rodape__media img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
/* rampa preta longa por cima do vídeo: o topo funde com a secção preta acima e
   só a partir de ~45% da altura é que a imagem se lê */
.rodape__veu{position:absolute; inset:0;
  background:linear-gradient(180deg,
    #000 0%, rgba(0,0,0,.97) 14%, rgba(0,0,0,.86) 26%, rgba(0,0,0,.6) 38%,
    rgba(0,0,0,.34) 50%, rgba(0,0,0,.26) 66%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.82) 100%)}
.rodape__bar{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-m);
  padding-block:var(--space-m); font-size:var(--fs-s5); color:rgba(255,255,255,.62)}
.rodape__bar p{display:flex; flex-wrap:wrap; gap:var(--space-m); align-items:baseline; margin:0}
.rodape__bar em{font-style:normal}
.rodape__bar b{font-weight:300}
.rodape__bar a{transition:color .35s}
.rodape__bar a:hover{color:rgb(var(--fg))}

@media (min-width:800px) and (max-width:1100px){
  /* 620px de video sao meio ecra num tablet */
  .rodape{min-height:400px; max-height:400px}
}

@media (max-width:799px){
  /* o video do rodape ocupava 72svh */
  .rodape{min-height:300px; max-height:300px}
  /* as duas linhas legais estavam a 32px uma da outra */
  .rodape__bar{gap:10px; padding-block:20px}
  .rodape__bar p{gap:14px}
}

/* pré-visualização no editor: sem altura de ecrã inteiro dentro do iframe */
.rodape--previa{min-height:0; max-height:none; height:auto}
.rodape--previa .rodape__media{position:relative; height:180px}

/* ── blocks/hero-scroll-canvas/style.css ── */
/* ==========================================================================
   ABERTURA · ENSAIO DA ENTRADA NA VINHA
   Extraído do home.php (linhas 236-409, 740-745, 793-815).

   Uma diferença face ao original: o terreno, a planície e o grão do crepúsculo
   já não estão escritos aqui como caminhos para media/. Vivem na biblioteca e o
   PHP injecta os endereços em --ev-terreno, --ev-planicie e --ev-dither, no
   :root (ver inc/assets.php). Por isso este ficheiro NÃO as pode declarar: um
   valor no .ensaio ganharia ao do :root e voltava a prender o site a caminhos
   fixos.

   A página precisa de http: a <canvas> pinta fotogramas do mp4 e em file:// a
   tela conta como contaminada; o vídeo também precisa de respostas Range.
   ========================================================================== */

@property --warm{syntax:'<number>';inherits:false;initial-value:.22}
@property --world-shadow{syntax:'<number>';inherits:false;initial-value:.72}
@property --crepusculo{syntax:'<number>';inherits:false;initial-value:.55}
@property --horizon-opacity{syntax:'<number>';inherits:false;initial-value:.36}
@property --hero-word-opacity{syntax:'<number>';inherits:false;initial-value:0}
@property --hero-word-scale{syntax:'<number>';inherits:false;initial-value:.94}
@property --clarao-halo{syntax:'<number>';inherits:false;initial-value:0}
@property --clarao-s{syntax:'<number>';inherits:false;initial-value:.3}
@property --hero-base-s{syntax:'<number>';inherits:false;initial-value:1.05}
@property --hero-far-s{syntax:'<number>';inherits:false;initial-value:1.05}
@property --hero-middle-s{syntax:'<number>';inherits:false;initial-value:1.05}
@property --hero-plain-s{syntax:'<number>';inherits:false;initial-value:1.05}
@property --hero-word-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --clarao-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-base-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-far-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-far-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-middle-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-middle-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-plain-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --hero-plain-y{syntax:'<length>';inherits:false;initial-value:0px}

.ensaio{
  --ink:#171b13; --paper:#ede9e0; --white:#fffdf8;
  --ev-ease:cubic-bezier(.22,.72,.18,1);
  position:relative; z-index:1;
  color:var(--white); font-family:var(--sans); font-weight:300;
}
/* as camadas fixas só existem enquanto o percurso do ensaio está no ecrã */
.ensaio__fixos{position:fixed; inset:0; z-index:1; pointer-events:none;
  transition:opacity .5s linear, visibility .5s}
.ensaio.is-past .ensaio__fixos,.ensaio.is-past .ev-beat,.ensaio.is-past .ev-momento{
  opacity:0!important; visibility:hidden}

.ev-world{position:absolute; inset:0; overflow:hidden; background:var(--ink); isolation:isolate}
.ev-sky{position:absolute; inset:-8%}
.ev-sky--night{z-index:0; background:radial-gradient(ellipse at 27% 79%,rgba(176,89,62,.14),transparent 23%),linear-gradient(178deg,#0b1520 0%,#17231f 49%,#1a1c13 100%)}
.ev-sky--dawn{z-index:1; will-change:opacity; opacity:var(--warm); mix-blend-mode:screen;
  background:radial-gradient(ellipse at 25% 70%,rgba(255,188,105,.65),transparent 27%),linear-gradient(180deg,#435a5c 0%,#9f775a 48%,#5c402d 100%)}
.ev-terrain{position:absolute; inset:-7%; width:114%; height:114%}
.ev-terrain > *{position:absolute; inset:0; background-size:cover; background-position:center 54%; background-repeat:no-repeat}
.ev-terrain__base,.ev-plane--far,.ev-plane--middle{background-image:var(--ev-terreno,none)}
.ev-plane--plain{background-image:var(--ev-planicie,none)}
.ev-terrain__base{z-index:1; transform:translate3d(0,var(--hero-base-y,1vh),0) scale(var(--hero-base-s,1.05))}
.ev-plane--far{z-index:4; -webkit-mask-image:linear-gradient(180deg,transparent 39%,#000 47% 56%,transparent 64%); mask-image:linear-gradient(180deg,transparent 39%,#000 47% 56%,transparent 64%); transform:translate3d(var(--hero-far-x,0),var(--hero-far-y,1vh),0) scale(var(--hero-far-s,1.05))}
.ev-plane--middle{z-index:5; -webkit-mask-image:linear-gradient(180deg,transparent 48%,#000 56% 68%,transparent 77%); mask-image:linear-gradient(180deg,transparent 48%,#000 56% 68%,transparent 77%); transform:translate3d(var(--hero-middle-x,0),var(--hero-middle-y,1vh),0) scale(var(--hero-middle-s,1.05))}
.ev-plane--plain{z-index:6; -webkit-mask-image:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.55) 65%,#000 74%); mask-image:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.55) 65%,#000 74%); transform:translate3d(var(--hero-plain-x,0),var(--hero-plain-y,1vh),0) scale(var(--hero-plain-s,1.05))}
.ev-horizon{position:absolute; z-index:3; left:-12%; right:-12%; top:64%; height:24vh; border-radius:50%; opacity:var(--horizon-opacity,.36);
  background:radial-gradient(ellipse at 29% 50%,rgba(237,163,91,.5),rgba(176,89,62,.12) 31%,transparent 63%)}
.ev-window{position:absolute; z-index:8; inset:0; overflow:hidden;
  clip-path:polygon(0 82px,100% 82px,100% 49%,92% 49.5%,84% 48.5%,76% 50%,68% 49%,60% 51%,52% 50%,44% 51%,36% 49.5%,28% 51%,20% 49.5%,12% 50.5%,0 49.5%)}
.ev-clarao{position:absolute; pointer-events:none}
.ev-clarao--halo{left:50%; top:50%; width:158vh; height:62vh; margin:-31vh 0 0 -79vh; opacity:var(--clarao-halo,0);
  transform:translate3d(0,var(--clarao-y,13vh),0) scale(var(--clarao-s,.3));
  background:radial-gradient(ellipse at 50% 50%,rgba(255,226,180,.46) 0% 14%,rgba(255,201,140,.32) 30%,rgba(216,132,76,.14) 52%,rgba(142,78,50,.04) 72%,transparent 88%)}
.ev-word img{width:min(58vw,860px); height:auto; margin-inline:auto; display:block}
.ev-word{position:absolute; left:50%; top:50%; width:100%; display:grid; place-items:center;
  opacity:var(--hero-word-opacity,0); transform:translate3d(-50%,var(--hero-word-y,7vh),0) scale(var(--hero-word-scale,.94));
  transform-origin:center; text-shadow:0 0 44px rgba(255,222,170,.5),0 12px 60px rgba(0,0,0,.14); will-change:transform,opacity}
/* o grão vem de --ev-dither; separado em background-image/-repeat/-size para o
   atalho não morrer inteiro quando a variável ainda não existe */
.ev-crepusculo{position:absolute; z-index:7; inset:0; opacity:var(--crepusculo,.55);
  background-image:var(--ev-dither,none),linear-gradient(180deg,rgba(26,33,68,.42) 0%,rgba(58,50,94,.56) 14%,rgba(126,73,92,.7) 26%,rgba(196,107,78,.68) 36%,rgba(243,152,80,.76) 43%,rgba(255,196,124,.82) 47%,rgba(226,136,70,.28) 50.5%,rgba(70,48,32,0) 55%);
  background-repeat:repeat,no-repeat;
  background-size:128px 128px,auto}
.ev-shadow{position:absolute; z-index:7; inset:0; opacity:var(--world-shadow,.72);
  background:linear-gradient(180deg,rgba(7,13,12,.23),rgba(14,11,7,.07) 48%,rgba(9,12,8,.42)),radial-gradient(circle at 25% 59%,transparent 0 20%,rgba(8,13,10,.22) 58%,rgba(6,9,7,.62))}

.ev-flight{position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; opacity:0}
.ev-shade{position:absolute; inset:0; z-index:3; opacity:0;
  background:linear-gradient(180deg,rgba(4,9,16,.18),rgba(4,9,16,.08) 35%,rgba(4,9,16,.5) 72%,rgba(4,9,16,.48))}

.ev-journey{position:relative; height:calc(var(--vinha-course,9.2)*100svh)}
.ev-opening{height:125svh}

/* ── momento 1 · abertura (sobre o terreno, antes do voo) ── */
.ev-beat{position:fixed; z-index:20; inset:0; display:grid; align-content:end; pointer-events:none; will-change:opacity,transform;
  padding:clamp(118px,14vh,160px) var(--gutter) clamp(54px,8vh,96px);
  opacity:0}
.ev-beat > *{margin:0}
.ev-h1{margin-top:var(--space-m)!important; max-width:17ch; font-size:var(--fs-s1); font-weight:200;
  line-height:1.1; letter-spacing:-.025em; text-wrap:balance; text-shadow:0 4px 40px rgba(0,0,0,.45)}
.ev-lead{margin-top:var(--space-s)!important; max-width:60ch; font-size:var(--fs-s4); font-weight:300;
  line-height:1.6; text-wrap:pretty; color:rgba(255,255,255,.86); text-shadow:0 2px 18px rgba(0,0,0,.55)}
.ev-ctas{display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-m)!important;
  pointer-events:auto}
.ev-ctas .btn--quiet{backdrop-filter:blur(8px)}

/* ── momentos 2 e 3 · sobre o travelling ── */
.ev-momentos{position:absolute; top:140svh; left:0; right:0}
.ev-momento{position:fixed; z-index:20; inset:0; display:grid; align-content:center; will-change:opacity,transform;
  padding:clamp(110px,13vh,150px) var(--gutter) clamp(54px,8vh,96px);
  opacity:0; pointer-events:none}
.ev-momento > *{margin:0; position:relative}
/* véu por trás do texto: sem ele o poema cai sobre a banda clara do horizonte
   e a folhagem, e o text-shadow sozinho não chega */
.ev-momento::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 44% at 50% 50%, rgba(4,9,16,.66), rgba(4,9,16,.34) 52%, transparent 78%)}
.ev-momento--legado::before{
  background:radial-gradient(66% 54% at 24% 50%, rgba(4,9,16,.76), rgba(4,9,16,.44) 48%, transparent 78%)}
.ev-momento .eyebrow{margin-bottom:var(--space-m)!important}
.ev-momento--manifesto{justify-items:center; text-align:center}
/* Quatro estrofes de dois versos mais o selo. As quebras de verso são <br>; o
   intervalo entre estrofes é margem e não uma linha vazia — uma linha vazia
   custa 1,5em cada e as quatro não cabiam no painel em portáteis (medido: faltavam
   6px a 1440x768 e 64px a 1366x700). O corpo desce de --fs-s3 (32px) para ~25px.
   text-wrap:balance saiu: com quebras forçadas não faz nada e atrapalha quando
   um verso precisa de dobrar. */
.ev-poema{max-width:56ch; font-size:clamp(1.05rem,.88rem + .68vw,1.6rem); font-weight:200; line-height:1.5;
  letter-spacing:-.012em; text-shadow:0 2px 26px rgba(0,0,0,.66)}
.ev-poema p{margin:0}
.ev-poema p + p{margin-top:.62em}
.ev-poema__selo{margin-top:1.05em!important}
.ev-momento--legado{justify-items:start; max-width:none}
.ev-h2{max-width:19ch; font-size:var(--fs-s2); font-weight:200; line-height:1.2;
  letter-spacing:-.02em; text-wrap:balance; text-shadow:0 3px 32px rgba(0,0,0,.58)}
.ev-texto{margin-top:var(--space-m)!important; max-width:58ch; font-size:16px; font-weight:300;
  line-height:1.75; text-wrap:pretty; color:rgba(255,255,255,.9); text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* O poema tem 9 versos. Em ecrãs baixos (portátil de 768px, telemóvel em pé com
   a barra do browser) o painel não tem altura para o padding cheio nem para o
   corpo cheio. Só o manifesto muda; o legado fica como está. */
@media (max-height:780px){
  .ev-momento--manifesto{padding-top:clamp(68px,9.5vh,110px); padding-bottom:clamp(40px,5.5vh,64px)}
  .ev-poema{font-size:clamp(14px,.82rem + .48vw,20px); line-height:1.42}
  .ev-poema p + p{margin-top:.5em}
  .ev-poema__selo{margin-top:.85em!important}
}

@media (min-width:800px) and (max-width:1100px){
  /* o veu dos momentos: o radial apertado desenha uma elipse visivel e deixa a
     banda do horizonte atravessar o texto */
  .ev-momento::before{
    background:linear-gradient(180deg, rgba(4,9,16,.42) 0%, rgba(4,9,16,.54) 42%, rgba(4,9,16,.54) 62%, rgba(4,9,16,.42) 100%)}
  .ev-momento--legado::before{
    background:linear-gradient(90deg, rgba(4,9,16,.60) 0%, rgba(4,9,16,.50) 55%, rgba(4,9,16,.38) 100%)}
}

@media (max-width:799px){
  .ev-beat,.ev-momento{padding-inline:16px}
  .ev-h1{font-size:clamp(38px,11vw,52px)}
  .ev-h2{font-size:clamp(30px,8.5vw,44px)}
  /* Vem depois do bloco de altura de proposito: num telemovel as duas regras
     aplicam-se e esta tem de ganhar. A 375px os versos dobram de qualquer forma
     (o mais longo tem 56 caracteres), por isso vale mais o texto ler-se. */
  .ev-poema{font-size:clamp(16px,4.6vw,20px); line-height:1.5}
  .ev-poema p + p{margin-top:.55em}
  .ev-momento--manifesto{align-content:center}
  /* os botoes acompanham o texto, nao a largura do ecra */
  .ev-ctas{flex-direction:column; align-items:flex-start}

  .ev-momento .eyebrow{margin-bottom:8px!important}
  /* a abertura e o momento do legado nao usam .cabeca: os seus intervalos
     internos eram 32/24/32px, o mesmo problema noutro sitio */
  .ev-h1{margin-top:14px!important}
  .ev-lead{margin-top:12px!important}
  .ev-ctas{margin-top:20px!important}
  .ev-texto{margin-top:14px!important}

  /* O LOGOTIPO da abertura: 58vw davam 218px num ecra de 375, muito mais estreito
     que o resto do conteudo. Passa a acompanhar a medida das seccoes. */
  .ev-word img{width:calc(100% - 32px)}

  /* OVERLAY dos momentos: o radial apertado (62% x 44%) desenhava uma elipse
     visivel a meio do ecra. Alarga-se muito para alem da caixa e nunca chega a
     transparente, para ler como um escurecimento uniforme em vez de um foco. */
  .ev-momento::before{
    background:linear-gradient(180deg, rgba(4,9,16,.46) 0%, rgba(4,9,16,.56) 42%, rgba(4,9,16,.56) 62%, rgba(4,9,16,.46) 100%)}
  /* o legado tem o texto a esquerda: a queda e horizontal, nao concentrica */
  .ev-momento--legado::before{
    background:linear-gradient(90deg, rgba(4,9,16,.62) 0%, rgba(4,9,16,.52) 52%, rgba(4,9,16,.40) 100%)}
}

/* Telemovel baixo (iPhone SE com a barra do browser: ~375x600). Medido: o poema
   transbordava 13px. Aperta o padding do painel e a entrelinha, sem tocar no
   corpo — o que o utilizador queria era precisamente letra maior. */
@media (max-height:640px){
  .ev-momento--manifesto{padding-top:clamp(44px,7vh,80px); padding-bottom:clamp(28px,4vh,48px)}
  .ev-poema{line-height:1.42}
  .ev-poema p + p{margin-top:.4em}
  .ev-poema__selo{margin-top:.75em!important}
}

@media (prefers-reduced-motion:reduce){
  .ev-journey{height:auto}
  .ev-opening{height:100svh}
  .ev-flight,.ev-shade{display:none}
  .ev-beat{position:absolute}
  .ev-momentos{position:relative; top:auto}
  .ev-momento{position:relative; inset:auto; opacity:1; min-height:100svh;
    padding:15vh 8vw; background:rgba(4,9,16,.78)}
}
.no-js .ev-journey{height:auto}
.no-js .ev-beat{position:absolute; opacity:1}
.no-js .ev-momentos{position:relative; top:auto}
.no-js .ev-momento{position:relative; inset:auto; opacity:1; padding:15vh 8vw; background:rgba(4,9,16,.78)}

/* ── blocks/timeline-sticky/style.css ── */
/* ==========================================================================
   HISTÓRIA — trilho alto, painel preso, carrossel de marcos
   Extraído do home.php (linhas 411-436, 712-719, 894, 900-937).
   ========================================================================== */

.legado{position:relative}
.legado__trilho{height:420vh}
.legado__fixo{position:sticky; top:0; height:100svh; display:grid; grid-template-rows:auto 1fr auto;
  padding-block:clamp(4.5rem,9vh,6.5rem) clamp(1.2rem,3.5vh,2.2rem); overflow:hidden}
.legado__topo,.legado__base{max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--gutter)}
.legado__topo{display:grid; gap:var(--space-xs); justify-items:start}
.janela{overflow:hidden; display:grid; align-items:center}
.pista{display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); padding-inline:var(--gutter); will-change:transform}
.cap{position:relative; flex:none; width:clamp(240px,29vw,400px); aspect-ratio:3/4; max-height:55vh; overflow:hidden;
  cursor:pointer; transition:filter .9s var(--ease-soft), transform .9s var(--ease)}
.cap:not(.is-focus):hover{filter:brightness(.62) saturate(.75); transform:scale(.97)}
.cap:focus-visible{outline:2px solid var(--c-secundaria); outline-offset:3px}
.cap img{width:100%; height:100%; object-fit:cover; transform:scale(1.09); transition:transform 1.8s var(--ease)}
.cap__veu{position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,7,.1),rgba(8,8,7,.04) 38%,rgba(8,8,7,.93))}
.cap__corpo{position:absolute; inset:auto 0 0 0; padding:clamp(1.2rem,2.2vw,1.8rem)}
.cap__ano{font-size:clamp(1.9rem,3.4vw,3rem); font-weight:200; letter-spacing:-.05em; line-height:1}
.cap__t{margin:.8rem 0 .5rem; color:#FAF8F4}
.cap__p{font-size:.89rem; color:rgba(250,248,244,.66); line-height:1.6; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .9s var(--ease), opacity .6s var(--ease-soft)}
.cap:not(.is-focus){filter:brightness(.42) saturate(.5); transform:scale(.95)}
.cap.is-focus img{transform:scale(1)}
.cap.is-focus .cap__p{max-height:12rem; opacity:1}
.legado__base{display:flex; align-items:center; gap:var(--space-m); flex-wrap:wrap}

@media (max-width:1100px){
  .legado__trilho{height:420vh}
}

@media (min-width:800px) and (max-width:1100px){
  /* O card cai no minimo do clamp (240px de clamp(240px,29vw,400px), porque 29vw
     de 820 sao 238) e a linha 1fr acumulava 570px de vazio no meio — o mesmo que
     corrigimos no telemovel, dez vezes pior. Card a acompanhar a largura do ecra,
     intervalos fixos, e a sobra para fora do grupo. */
  .legado__fixo{padding-block:clamp(32px,4.5vh,48px); row-gap:clamp(32px,4.5vh,48px);
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center}
  .cap{width:clamp(320px,46vw,440px); max-height:calc(100svh - 320px)}
}

@media (max-width:860px){
  .legado__trilho{height:340vh}
}

/* Entre 521 e 799 (telemovel ao alto grande, iPad Mini ao alto) o card continuava
   a cair no minimo do clamp do desktop — 240x320 num ecra de 768, com 462px de
   vazio. Esta banda cobre a faixa toda, com as medidas a escalar com a largura. */
@media (max-width:799px){
  /* A seccao gastava 253px em cromo (padding do painel 95 + cabecalho 121 + barra
     dos anos 84), o que num ecra de 560px nao deixava nada para a fotografia.
     48px fixos entre cabecalho, carrossel e paginador, e 48 de padding no painel:
     a sobra vai toda para a altura do card em vez de virar vazio. */
  .legado__fixo{padding-block:48px; row-gap:48px; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto}
  /* min-height:0 e obrigatorio nos dois: por omissao um item de grelha ou de flex
     nao encolhe abaixo do conteudo, e o card ficava preso a altura natural da
     fotografia (724x1086 -> 484px), transbordando a linha em 184px. */
  .janela{padding-block:0; align-items:stretch}
  .pista{align-items:stretch; height:100%; min-height:0}
  .legado__topo{gap:8px}
  .legado__topo > .eyebrow{margin-bottom:4px}
  /* 7vw = metade da sobra entre o ecra (100vw) e o card (86vw). Tem de ser vw: a
     percentagem resolvia contra a coluna implicita da .janela, que e auto e se
     dimensiona ao max-content da pista (~1330px), dando 504px de padding. */
  .pista{padding-inline:7vw; gap:14px}
  .cap{width:86vw; aspect-ratio:auto; height:100%; max-height:none; min-height:0}
  .cap__corpo{padding:clamp(15px,2.4vw,24px)}
  /* o titulo estava a 8px da descricao: ritmo mais regular entre os tres blocos */
  .cap__t{margin:.85rem 0 .7rem}
  .cap__p{font-size:clamp(.95rem,1.5vw,1.05rem)}
}

@media (prefers-reduced-motion:reduce){
  .cap:not(.is-focus){filter:none; transform:none}
  .cap__p{max-height:none; opacity:1; overflow:visible}
}

/* ── blocks/product-showcase/style.css ── */
/* ==========================================================================
   GAMA — garrafa empurra o painel; tabela entra pela esquerda
   Extraído do home.php (linhas 438-501, 670-678, 721-734, 842-881).
   ========================================================================== */

.gama{position:relative; background:var(--c-preto)}
.gama__trilho{height:600vh}
.gama__fixo{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto;
  padding-block:clamp(4.5rem,9vh,6.5rem) clamp(1.2rem,3.5vh,2.2rem)}
.gama__topo,.gama__base{max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--gutter)}
.gama__topo{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-m); flex-wrap:wrap}
.gama__tit{display:grid; gap:var(--space-xxs); justify-items:start}

.cena{--gap-cena:clamp(1.5rem,4vw,3.5rem);
  --colw:calc((100% - var(--gutter)*2 - var(--gap-cena)*2 - var(--idxw,10rem)) * .475);
  --gavw:calc(var(--colw) * 1.34);
  position:relative; max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:.95fr 1.05fr auto; gap:var(--gap-cena); align-items:center;
  /* a garrafa passa por cima do titulo em vez de ser cortada em cima */
  overflow-x:clip; overflow-y:visible}
.frasco{position:absolute; inset:-12% auto 6% var(--gutter); z-index:4; width:var(--colw);
  display:grid; place-items:center; pointer-events:none;
  transition:transform .55s var(--ease-soft)}
.frasco__aura{position:absolute; width:min(52vh,480px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(228,200,102,.22), transparent 62%); transition:opacity .8s}
.frasco__it{position:absolute; inset:0; opacity:0;
  transition:opacity .7s var(--ease-soft); will-change:transform}
.frasco__it.is-on{opacity:1}
/* fotografia real de produto, PNG com alfa — nada de rótulo em CSS */
.frasco__it img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
.info{grid-column:2; grid-row:1; align-self:center; display:grid; gap:var(--space-s); justify-items:start; align-content:center;
  transition:opacity .3s var(--ease-soft), transform .5s var(--ease-soft)}
/* Um bloco de texto por produto, todos no HTML, só o activo visível.
   É o que permite ao TranslatePress traduzi-los: texto escrito por JavaScript,
   ou escondido num <script>, é invisível para qualquer plugin de tradução. */
.info__it{display:none}
.info__it.is-on{display:grid; gap:var(--space-s); justify-items:start}
.gaveta__titulos{position:relative; min-width:0; flex:1}
.gaveta__t{display:none}
.gaveta__t.is-on{display:block; overflow-wrap:anywhere}
.gaveta__ficha{display:none}
.gaveta__ficha.is-on{display:grid; gap:var(--space-xs)}
/* a legenda tem as duas frases no HTML; a classe diz qual se lê */
.gama__leg__aberto{display:none}
.gama__leg.is-aberto .gama__leg__fechado{display:none}
.gama__leg.is-aberto .gama__leg__aberto{display:inline}
.info__p{color:rgb(var(--muted)); max-width:44ch}
.tags{display:flex; flex-wrap:wrap; gap:var(--space-xxs)}
.tag{padding:5px 12px; border-radius:var(--pill); background:rgb(var(--veil)); font-size:.6875rem; font-weight:300; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--muted))}
.gaveta{position:absolute; inset:0 auto 0 var(--gutter); z-index:6; width:var(--gavw); display:grid; gap:var(--space-xs); align-content:center; overflow-y:auto;
  opacity:0; transform:translateX(-20px); pointer-events:none;
  transition:opacity .38s var(--ease-soft), transform .5s var(--ease-soft)}
/* flex:none no botao: sem ele um nome comprido esmaga o x ate o cortar */
.gaveta__topo{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-s)}
.gaveta__topo > .icobtn{flex:none}
.gaveta__topo > .gaveta__titulos{min-width:0}
.linha{display:grid; grid-template-columns:minmax(6.5rem,auto) 1fr; gap:.4rem 1.4rem; padding:.7rem 0; align-items:baseline;
  opacity:0; transform:translateX(14px)}
.linha+.linha{box-shadow:0 -1px 0 rgb(var(--hair))}
.linha dt{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--faint))}
.linha dd{margin:0; font-size:.93rem; line-height:1.55}
.gaveta__nota{font-size:.82rem; color:rgb(var(--faint)); line-height:1.7}
.gaveta__nota:empty{display:none}
/* 134% = a largura da propria garrafa x 1.34, o mesmo factor da gaveta */
.cena.is-open .frasco{transform:translateX(calc(134% + var(--gap-cena)))}
.cena.is-open .frasco__aura{opacity:.3}
.cena.is-open .info{opacity:0; transform:translateX(28%); pointer-events:none}
.cena.is-open .gaveta{opacity:1; transform:none; pointer-events:auto}
.cena.is-open .linha{opacity:1; transform:none; transition:opacity .4s var(--ease-soft), transform .45s var(--ease-soft)}
/* índice dos produtos, à direita — situa o utilizador no scroll */
.gama__idx{grid-column:3; grid-row:1; align-self:center; display:grid; gap:.72rem; width:var(--idxw,13rem)}
.gama__idx a{display:flex; align-items:center; justify-content:flex-end; gap:.55rem; white-space:nowrap;
  font-size:var(--fs-s6); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.34); transition:color .4s var(--ease-soft)}
.gama__idx a:hover{color:rgba(255,255,255,.7)}
.gama__idx a[aria-current="true"]{color:rgb(var(--fg))}
.gama__idx i{justify-self:end; width:12px; height:1px; background:rgba(255,255,255,.22); transition:width .5s var(--ease), background .4s}
.gama__idx a[aria-current="true"] i{width:26px; background:var(--c-secundaria)}
.gama__base{display:flex; align-items:center; gap:var(--space-m); flex-wrap:wrap}
.gama__leg{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--faint))}

@media (max-width:1100px){
  .cena{grid-template-columns:1fr}
  .info{grid-column:1; grid-row:1}
  .gama__idx{display:none}
  .frasco{inset:0 var(--gutter) 54% var(--gutter)}
  .cena.is-open .frasco{transform:translateY(-118%)}
  .gaveta{inset:auto var(--gutter) 0 var(--gutter); max-height:70%; transform:translateY(20px)}
  .cena.is-open .info{transform:translateY(30%)}
  .gama__trilho{height:520vh}
}

@media (min-width:800px) and (max-width:1100px){
  /* Mesmo bug do telemovel: --colw desconta --idxw (168px) mesmo com o indice
     escondido, e o width ganha sobre o inset direito — a gaveta ficava a 35% do
     ecra. A cena passa a duas linhas, com a garrafa em cima e a ficha encostada
     em baixo, em vez de se sobreporem. */
  .frasco{position:relative; inset:auto; width:auto; min-height:0; align-self:center;
    height:min(100%,420px); grid-column:1; grid-row:1;
    transition:transform .55s var(--ease-soft), opacity .45s var(--ease-soft)}
  .gaveta{width:auto; align-content:start; scrollbar-width:none}
  .gaveta::-webkit-scrollbar{display:none}
  .cena{grid-template-rows:minmax(0,1fr) auto}
  .info{grid-column:1; grid-row:2; align-self:end}
  .gama__fixo{row-gap:24px}
  /* o translateY(-118%) herdado atirava a garrafa para cima do titulo */
  .cena.is-open .frasco{opacity:1; transform-origin:100% 50%; transform:translateY(-26%) scale(.88)}
}

@media (max-width:799px){
  /* Dois bugs de largura: --colw desconta --idxw (168px) mesmo com o indice
     escondido no mobile, e como o width ganha sobre o inset direito, a garrafa
     ficava com 53px e a gaveta com 71 (20% do ecra). Os insets e as linhas da
     grelha e que devem mandar aqui. */
  /* a altura e explicita porque todos os filhos do .frasco sao absolutos: sem ela
     ficava com altura zero. Travada para sobrar sempre altura ao conteudo. */
  .frasco{position:relative; inset:auto; width:auto; min-height:0; align-self:center;
    height:min(100%,280px); grid-column:1; grid-row:1;
    transition:transform .55s var(--ease-soft), opacity .45s var(--ease-soft)}
  /* o halo tambem conta como "imagem": 52vh davam um circulo de 347px sobre um
     frasco de 99 */
  .frasco__aura{width:min(34vh,240px)}
  /* Na vista de tabela a garrafa fica visivel mas pequena e encostada a direita,
     a subir por cima do titulo. O transform-origin a direita e o que a faz
     encolher para esse lado em vez de para o centro. */
  .cena.is-open .frasco{opacity:1; transform-origin:100% 50%;
    transform:translateY(-34%) scale(.95)}
  .gaveta{width:auto}
  /* a garrafa fica centrada no espaco de cima; o conteudo encosta em baixo, ao
     paginador, em vez de se sobreporem */
  .cena{grid-template-rows:minmax(0,1fr) auto}
  .info{grid-column:1; grid-row:2; align-self:end; gap:12px}
  /* o row-gap maior rouba altura a garrafa: compensa-se no padding do painel e
     nos gaps internos */
  .gama__fixo{padding-block:24px 12px; row-gap:24px}
  .gama__topo{gap:12px}
  /* a legenda mais discreta e colada a barra de progresso */
  .gama__base{gap:10px}
  .gama__leg{font-size:.6rem}
  /* as tres tags somavam 429px contra 328 disponiveis e passavam para duas linhas */
  .tag{font-size:.5rem; padding:4px 8px; letter-spacing:.06em}
  /* align-content:center numa caixa com overflow-y empurra o excedente para cima
     do topo, onde o scroll nao chega: o nome e o botao x ficavam inalcancaveis.
     Com start, o topo fica sempre visivel e o resto scrolla. */
  .gaveta{align-content:start; scrollbar-width:none}
  .gaveta::-webkit-scrollbar{display:none}
  .gama__tit > .eyebrow{margin-bottom:4px}
}

/* ── blocks/media-band/style.css ── */
/* ==========================================================================
   BANDA DE MEDIA — full-bleed com deriva
   Extraído do home.php (linhas 503-510, 737, 884).
   ========================================================================== */

.banda{position:relative; height:min(78svh,720px); overflow:hidden; isolation:isolate; display:grid; align-items:end}
.banda__media{position:absolute; inset:-14% 0; z-index:-2; will-change:transform}
.banda__media img,.banda__media video{width:100%; height:100%; object-fit:cover; object-position:50% 68%; display:block}
.banda__veu{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 40%)}

@media (min-width:800px) and (max-width:1100px){
  /* 720px de imagem sao meio ecra num tablet */
  .banda{max-height:420px}
}

@media (max-width:799px){
  /* a imagem entre a Gama e os Reconhecimentos ocupava 78svh do ecra */
  .banda{max-height:300px}
}

/* ── blocks/awards-sticky/style.css ── */
/* ==========================================================================
   RECONHECIMENTOS — secção presa, vitrine a rodar com o scroll
   Extraído do home.php (linhas 512-542, 686-704). Cartões desenhados a partir
   do frame 14713:1031 do Figma: fundo translúcido, o cartão em foco mais claro,
   com filete e a alargar para os dois lados.
   ========================================================================== */

.premios-sec{position:relative}
.premios__trilho{height:400vh}
.premios__fixo{position:sticky; top:0; height:100svh; display:grid; align-items:center; overflow:hidden}
.premios{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,var(--space-xxl)); align-items:center}
.premios__esq{display:grid; gap:var(--space-s); justify-items:start}
.premios__esq .btn{margin-top:var(--space-xs)}
.premios__vitrine{position:relative; height:min(78svh,660px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.premios__lista{display:grid; gap:var(--space-xs); padding:38svh var(--space-m);
  will-change:transform}
.premio{display:grid; gap:var(--space-xs); justify-items:start; border-radius:0; padding:var(--space-m);
  border:1px solid #303030; background:#191919; opacity:.42;
  transition:background .55s var(--ease-soft), opacity .55s var(--ease-soft),
             margin .55s var(--ease), border-color .55s}
.premio.is-focus{background:#1f1f1f; border-color:#3d3d3d; opacity:1;
  margin-inline:calc(var(--space-m) * -1)}
.premio > *{margin:0}
.premio__ano{font-size:var(--fs-btn); font-weight:300; line-height:1; letter-spacing:3px;
  text-transform:uppercase; color:#999}
.premio__nome{font-size:var(--fs-s4); font-weight:300; line-height:1.6; color:var(--c-branco)}
.premio__p{font-size:var(--fs-s5); font-weight:300; line-height:1.6; color:#999; max-width:44ch}
.premio__em{font-size:var(--fs-s6); font-weight:300; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.3)}
.premio__em:empty{display:none}
/* barra de progresso: so existe onde a vitrine e um carrossel horizontal nativo */
.premios__prog{display:none}

@media (max-width:1100px){
  .premios-sec{padding-block:clamp(3.2rem,5vw,5rem)}
  .premios__trilho{height:auto}
  .premios__fixo{position:relative; height:auto; display:block}
  .premios{grid-template-columns:1fr; gap:var(--space-l)}
  /* Carrossel horizontal com swipe nativo e snap, em vez de uma pilha vertical
     alta. Sangra ate as margens do ecra (margem negativa) e o padding da lista
     repoe o recuo do primeiro e do ultimo cartao. O modulo ja desliga o
     transform abaixo de 1100px, e todos os cartoes ficam no estado "em foco"
     — a distincao so faz sentido quando e o scroll a comandar. */
  .premios__vitrine{height:auto; -webkit-mask-image:none; mask-image:none;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin-inline:calc(var(--gutter) * -1)}
  .premios__vitrine::-webkit-scrollbar{display:none}
  .premios__lista{display:flex; gap:var(--space-xs); padding:0 var(--gutter);
    transform:none!important}
  .premio{flex:0 0 min(78vw,340px); scroll-snap-align:center; opacity:1;
    padding:18px; background:#1f1f1f; border-color:#3d3d3d}
  .premio.is-focus{margin-inline:0}
  .premios__prog{display:block; width:100%; margin-top:var(--space-s)}
}

/* ── blocks/feature-accordion/style.css ── */
/* ==========================================================================
   PARCEIROS — secção presa, os acordeões a abrir com o scroll
   Extraído do home.php (linhas 544-597, 663, 679-684, 821-829, 948-951).
   Mesmo padrão do legado, da gama e dos reconhecimentos: trilho alto, painel
   preso, e o progresso do trilho a percorrer as razões por sua ordem.
   ========================================================================== */

.razoes-sec{position:relative}
.razoes__trilho{height:400vh}
.razoes__fixo{position:sticky; top:0; min-height:100svh; display:grid; align-items:center;
  padding-block:clamp(1.5rem,3vw,2.5rem)}
/* o .wrap e um grid item do painel, e com margin-inline:auto as margens automaticas
   desactivam o justify-self:stretch — o bloco encolhe para o conteudo e sai do eixo
   das outras seccoes. width:100% e o mesmo remedio que .legado__topo ja usa. */
.razoes__fixo > .wrap{width:100%}
.razoes__fixo .razoes{min-height:min(56svh,500px)}
.razoes{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,4rem); align-items:stretch}
/* row-gap:0 e essencial. A .razao__p ocupa a 2a linha mesmo fechada (altura 0), e o
   gap entre linhas somava-se ao padding de baixo: 12px em cima contra 24 em baixo.
   O afastamento no estado aberto passa a vir so do padding-top da propria
   descricao, que e onde se pode controlar. */
/* O <button> é só a superfície clicável: sem grelha, sem aparência nativa.
   A grelha está no .razao__linha, por causa do Safari — ver o comentário no
   render.php do bloco. */
.razao{position:relative; display:block; width:100%;
  -webkit-appearance:none; appearance:none;
  border:0; background:none; text-align:left; cursor:pointer; color:inherit; font:inherit;
  padding:clamp(.75rem,1.4vw,1.15rem) .4rem;
  box-shadow:0 1px 0 rgb(var(--hair)); transition:background .4s}
.razao__linha{display:grid; grid-template-columns:auto 1fr auto;
  column-gap:clamp(.9rem,1.8vw,1.4rem); row-gap:0; align-items:center; width:100%}

.razao:hover{background:rgb(var(--veil))}
.razao__ico{display:grid; place-items:center; width:40px; height:40px; flex:none}
.razao__ico svg{width:27px; height:27px; stroke:rgb(var(--accent)); fill:none; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .6s var(--ease)}
.razao[aria-expanded="true"] .razao__ico svg{transform:scale(1.12)}
.razao__t{font-weight:200; letter-spacing:-.028em; transition:transform .6s var(--ease)}
/* 2 / -1: alinhada pelo titulo mas a atravessar tambem a coluna do botao, em vez
   de parar nele. O max-width de 44ch continua a governar a medida de leitura. */
.razao__p{grid-column:2 / -1; font-size:.93rem; color:rgb(var(--muted)); max-width:44ch; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .8s var(--ease), opacity .5s, padding .5s}
.razao__mais{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgb(var(--veil));
  transition:background .4s, color .4s, transform .6s var(--ease)}
.razao__mais svg{width:20px; height:20px}
.razao__mais .v{transform-origin:10px 10px; transition:transform .45s var(--ease), opacity .3s}
.razao[aria-expanded="true"] .razao__mais .v{transform:scaleY(0); opacity:0}
/* o titulo ganha 5px ao abrir; a descricao acompanha, senao os dois deixam de
   estar alinhados a esquerda — que e como se lem um por baixo do outro */
.razao[aria-expanded="true"] .razao__t,
.razao[aria-expanded="true"] .razao__p{transform:translateX(5px)}
.razao[aria-expanded="true"] .razao__p{max-height:11rem; opacity:1; padding-top:.7rem}
.razao[aria-expanded="true"] .razao__mais{background:rgb(var(--fg)); color:rgb(var(--bg))}
.razoes__media{position:relative; min-height:100%; overflow:hidden; background:var(--c-preto); margin-left:calc(var(--space-l) * 1.7)}
.razoes__media figure{position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.06); transition:opacity 1s var(--ease-soft), transform 1.7s var(--ease)}
.razoes__media figure.is-on{opacity:1; transform:scale(1)}
.razoes__media img{width:100%; height:100%; object-fit:cover}
/* em responsivo o vídeo corre sozinho quando a razão abre, e enche a caixa
   exactamente como a fotografia que substitui (ver assets/js/razoes.js) */
.razoes__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* No desktop manda a canvas. Se alguém vier do responsivo a redimensionar a
   janela, o elemento de vídeo já existe no DOM e taparia a canvas — aqui deixa
   de contar. O JavaScript pausa-o; isto garante que nem se vê. */
@media (min-width:1101px){
  .razoes__media video{display:none}
}
/* <figure data-video>: a canvas percorre os quadros por cima da fotografia, que
   fica de poster e de recurso se o decode falhar. Mesma caixa, mesmo cover, mesmo
   crossfade do .is-on — nada no layout se move. */
.razoes__media canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s var(--ease-soft)}
.razoes__media canvas.is-pintada{opacity:1}

@media (max-width:1441px){
  .razoes__media{margin-left:calc(var(--space-l) * 1.35)}
}

@media (max-width:1100px){
  .razoes-sec{padding-block:clamp(3.2rem,5vw,5rem)}
  .razoes__trilho{height:auto}
  .razoes__fixo{position:relative; min-height:0; display:block; padding-block:0}
  .razoes__fixo .razoes{min-height:0; padding-bottom:clamp(3.2rem,5vw,5rem)}
  .razoes{grid-template-columns:1fr}
  /* Altura em pixéis, e NÃO aspect-ratio.
     As figuras desta caixa são todas position:absolute, portanto não há
     conteúdo em fluxo de onde tirar medida. O aspect-ratio precisa de uma das
     duas dimensões resolvida para calcular a outra; com min-height:0 e nada em
     fluxo, o Safari do iPhone resolvia a caixa a zero — e a secção desaparecia.
     Um min-height explícito não depende de medir nada. */
  .razoes__media{position:relative; top:0; min-height:320px; max-width:100%;
    order:-1; margin-left:0; margin-bottom:var(--space-s)}

  /* A lista das razões declara o seu próprio layout: um <div> sem display, com
     filhos que são <button>, fica à mercê do que o Safari resolver medir. Só no
     responsivo — no desktop a secção nunca teve problema e não se mexe. */
  .razoes > [data-stagger]{display:flex; flex-direction:column; min-width:0}

  /* Rede de segurança. Desprendida do scroll, esta secção não tem razão para
     depender de um reveal: o acordeão e a imagem ficam visíveis desde o início.
     Se num Safari qualquer a classe in-view não chegar a fazer efeito, o
     conteúdo aparece de qualquer maneira. Ganha ao [data-stagger]>* por
     especificidade, sem !important. */
  .razoes [data-stagger] > *,
  .razoes .rv{opacity:1; transform:none}
}

@media (max-width:799px){
  /* o acordeao usa a largura toda do ecra — sem padding lateral, e com o icone e
     o botao +/- mais discretos, sobra medida para o texto */
  /* column-gap, nao gap: o atalho repunha o row-gap e devolvia a assimetria */
  .razao{padding-inline:0; column-gap:12px}
  .razao__ico{width:32px; height:32px}
  .razao__ico svg{width:23px; height:23px}
  .razao__mais{width:34px; height:34px}
  .razao__mais svg{width:15px; height:15px}
  .razao[aria-expanded="true"] .razao__p{padding-top:.5rem}
}

@media (prefers-reduced-motion:reduce){
  .razao__p{max-height:none; opacity:1; overflow:visible}
  .razoes-sec{padding-block:clamp(3.2rem,5vw,5rem)}
  .razoes__trilho{height:auto}
  .razoes__fixo{position:relative; min-height:0; display:block; padding-block:0}
  .razoes__fixo .razoes{min-height:0}
}

/* ── blocks/cta-form-split/style.css ── */
/* ==========================================================================
   TORNE-SE PARCEIRO
   Extraído do home.php (linhas 599-637, 685, 834-836, 893, 952). O CSS que veste
   o markup do WPForms (.campo, .consent, .acao, .aviso, o ecrã de sucesso e o
   selector de bandeira do Smart Phone) entra na fase 3, neste mesmo ficheiro.
   ========================================================================== */

.parceria{position:relative; overflow:hidden; background:var(--c-preto)}
.parceria__aurora{position:absolute; inset:-30% -12%; pointer-events:none; opacity:.45; filter:blur(14px);
  background:radial-gradient(38% 40% at 22% 26%, rgba(228,200,102,.24), transparent 62%),
             radial-gradient(34% 36% at 78% 70%, rgba(122,97,24,.3), transparent 62%),
             radial-gradient(30% 30% at 55% 10%, rgba(228,200,102,.12), transparent 60%);
  animation:aurora 28s var(--ease-soft) infinite alternate}
@keyframes aurora{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.14)}100%{transform:translate3d(-2%,4%,0) scale(1.05)}}
.parceria .wrap{position:relative}
.parceria__grid{display:grid; grid-template-columns:1fr minmax(0,.82fr); gap:clamp(2rem,6vw,5.5rem); align-items:start}
.parceria__esq{display:flex; flex-direction:column; gap:var(--space-s); align-items:flex-start}
/* contactos em texto: o email e o telefone fecham o grupo do titulo, sem botao */
.parceria__contactos{display:flex; flex-direction:column; flex-wrap:wrap; align-items:baseline; gap:var(--space-m); margin-top:var(--space-s)}
.contacto{font-size:var(--fs-p); line-height:1.3; color:var(--c-branco); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:2px; transition:color .35s, border-color .35s}
.contacto:hover,.contacto:focus-visible{color:var(--c-secundaria); border-color:var(--c-secundaria)}

/* ---- campos (a vestir o markup do WPForms na fase 3) ---- */
.campos{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-l) var(--space-m); max-width:34rem}
.campo{display:flex; flex-direction:column; gap:.35rem}
.campo--full{grid-column:1/-1}
.campo label{font-size:var(--fs-s6); letter-spacing:.2em; text-transform:uppercase; color:rgb(var(--faint))}
.campo input,.campo textarea{background:transparent; border:0; border-bottom:1px solid rgb(var(--hair)); border-radius:0;
  padding:.7rem 0; min-height:46px; font-size:var(--fs-p); transition:border-color .35s}
.campo textarea{min-height:64px; resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none; border-color:var(--c-principal)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(var(--fg),.34)}
.consent{grid-column:1/-1; display:flex; gap:.8rem; align-items:flex-start; cursor:pointer;
  font-size:var(--fs-s5); color:rgb(var(--muted)); line-height:1.6}
.consent input{width:17px; height:17px; min-height:0; accent-color:var(--c-principal); margin-top:.2rem; flex:none}
.consent a{text-decoration:underline; text-underline-offset:3px}
.acao{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-m)}
.aviso{font-size:var(--fs-s5); color:var(--c-secundaria)}
.sucesso{display:grid; gap:var(--space-s); justify-items:start}
.sucesso[hidden]{display:none}
.sucesso__ico{display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:rgba(228,200,102,.16)}
.sucesso__ico svg{width:24px; height:24px; stroke:var(--c-secundaria); fill:none; stroke-width:1.3; stroke-dasharray:60; stroke-dashoffset:60; animation:tick 1s var(--ease) .15s forwards}
@keyframes tick{to{stroke-dashoffset:0}}

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

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

@media (max-width:799px){
  /* os contactos fecham o grupo do titulo e do texto, e o grupo todo afasta-se
     do formulario (56px) */
  .parceria__grid{gap:56px}
  .parceria__contactos{margin-top:var(--space-xs); gap:var(--space-s)}
  .premios__esq,.parceria__esq{gap:11px}
}

@media (prefers-reduced-motion:reduce){
  .parceria__aurora{animation:none}
}

/* ==========================================================================
   O FORMULÁRIO DO WPFORMS, VESTIDO COMO O ORIGINAL

   Escrito contra o HTML que o site serve, não contra o que a documentação
   sugere. O que está lá (WPForms 1.8.5, modo «modern»):

     div.wpforms-container.suba-form.wpforms-render-modern#wpforms-42
       form.wpforms-form
         .wpforms-field-container
           .wpforms-field.wpforms-field-name.campo.campo--full
           .wpforms-field.wpforms-field-layout.campo--full
             .wpforms-field-layout-columns.wpforms-field-layout-preset-50-50
               .wpforms-layout-column.wpforms-layout-column-50 > .wpforms-field
           .wpforms-field.wpforms-field-textarea.campo.campo--full
           .wpforms-field.wpforms-field-gdpr-checkbox.consent.campo--full
             ul > li > input[type=checkbox] + label
             .wpforms-field-description
         .wpforms-submit-container > button.wpforms-submit.btn.btn--quiet

   Três coisas que só se souberam a ler isto:

   1. A linha de colunas chama-se .wpforms-field-layout-columns. O
      .wpforms-layout-row que eu tinha escrito não existe — por isso o
      espaçamento das duas colunas continuava do plugin, com o padding lateral
      dele, e não da nossa grelha.
   2. O modo «modern» define as --wpforms-* no :root: campos brancos, texto a
      rgba(0,0,0,.7), erros a #d63637. Nada disso serve sobre preto. Redefini-las
      no nosso contentor é mais limpo do que combater regra a regra, e trata de
      tudo o que o plugin pinte a partir delas.
   3. O container NÃO tem a classe wpforms-container-full neste modo. As regras
      do plugin vêm de .wpforms-container, por isso o prefixo
      `.parceria div.wpforms-container` (0,4,1) ganha com folga.
   ========================================================================== */

/* ---- as variáveis do modo «modern», postas na nossa paleta ----
   Ficam no contentor e não no :root: assim só este formulário muda, e qualquer
   outro que venha a existir no site continua com o desenho do plugin. */
.parceria div.wpforms-container{
  --wpforms-field-background-color:transparent;
  --wpforms-field-border-color:rgb(var(--hair));
  --wpforms-field-border-size:1px;
  --wpforms-field-border-radius:0;
  --wpforms-field-text-color:rgb(var(--fg));
  --wpforms-label-color:rgb(var(--faint));
  --wpforms-label-sublabel-color:rgb(var(--faint));
  --wpforms-label-error-color:var(--c-secundaria);
  --wpforms-field-size-checkbox-size:17px;
  --wpforms-field-size-input-height:46px;
  --wpforms-field-size-padding-h:0px;
  --wpforms-field-size-font-size:16px;
  margin:0; padding:0; color:inherit; font-size:inherit}
.parceria div.wpforms-container .wpforms-form{margin:0}

/* ---- a grelha dos campos ----
   UMA coluna: cada campo é uma linha inteira. Quem divide em duas colunas é o
   campo Layout, com a sua própria grelha lá dentro.

   Isto dependia das classes campo/campo--full que a definição do formulário põe
   em cada campo. Foi um erro: essas classes desaparecem se alguém gravar o
   formulário no construtor do WPForms — e desapareceram. O campo Layout ficou
   sem campo--full e encolheu para meia largura. O desenho não pode depender de
   algo que se perde numa gravação no backoffice, por isso agora os alvos são os
   tipos de campo, que o plugin garante.

   O espaçamento vem TODO do gap. Os campos ficam a zero de padding, senão
   somam-se duas fontes de espaço e o formulário abre mais do que o desenho. */
.parceria div.wpforms-container .wpforms-form .wpforms-field-container{
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-l); max-width:34rem}
.parceria div.wpforms-container .wpforms-form .wpforms-field{
  grid-column:1/-1; min-width:0; padding:0; margin:0; clear:none; border:0}
/* rótulo em cima, campo em baixo — em tudo menos no Layout (que é um
   contentor) e no consentimento (que é uma lista) */
.parceria div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-layout):not(.wpforms-field-gdpr-checkbox){
  display:flex; flex-direction:column; gap:.35rem}

/* ---- rótulos ---- */
.parceria div.wpforms-container .wpforms-form .wpforms-field-label{
  display:block; margin:0; padding:0;
  font-size:var(--fs-s6); font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:rgb(var(--faint))}
.parceria div.wpforms-container .wpforms-form .wpforms-field-label.wpforms-label-hide{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* o asterisco do plugin é vermelho sobre preto: 3,2:1. Dourado dá 15:1 */
.parceria div.wpforms-container .wpforms-form .wpforms-required-label {
    color: var(--c-principal);
    border: 0;
    margin-left: .25em;
    text-decoration: none;
    display: none;
}
.parceria div.wpforms-container .wpforms-form .wpforms-field-sublabel{
  margin:0; font-size:var(--fs-s6); color:rgb(var(--faint)); letter-spacing:.12em; text-transform:uppercase}
.parceria div.wpforms-container .wpforms-form .wpforms-field-description{
  margin:.45rem 0 0; font-size:var(--fs-s5); color:rgb(var(--muted)); line-height:1.6}
.parceria div.wpforms-container .wpforms-form .wpforms-field-description:empty{display:none}

/* ---- campos de texto: filete em baixo e mais nada ---- */
.parceria div.wpforms-container .wpforms-form .wpforms-field input[type="text"],
.parceria div.wpforms-container .wpforms-form .wpforms-field input[type="email"],
.parceria div.wpforms-container .wpforms-form .wpforms-field input[type="tel"],
.parceria div.wpforms-container .wpforms-form .wpforms-field input[type="url"],
.parceria div.wpforms-container .wpforms-form .wpforms-field input[type="number"],
.parceria div.wpforms-container .wpforms-form .wpforms-field textarea{
  width:100%; max-width:none; box-sizing:border-box;
  background:transparent; border:0; border-bottom:1px solid rgb(var(--hair)); border-radius:0;
  padding:.7rem 0; min-height:46px; height:auto; margin:0;
  font:inherit; font-size:var(--fs-p); color:rgb(var(--fg));
  box-shadow:none; transition:border-color .35s}
.parceria div.wpforms-container .wpforms-form .wpforms-field textarea{min-height:64px; resize:vertical}
.parceria div.wpforms-container .wpforms-form .wpforms-field input:focus,
.parceria div.wpforms-container .wpforms-form .wpforms-field textarea:focus{
  outline:none; border-color:var(--c-principal); box-shadow:none}
.parceria div.wpforms-container .wpforms-form .wpforms-field input::placeholder,
.parceria div.wpforms-container .wpforms-form .wpforms-field textarea::placeholder{
  color:rgba(var(--fg),.34); opacity:1}
.parceria div.wpforms-container .wpforms-form .wpforms-field-small,
.parceria div.wpforms-container .wpforms-form .wpforms-field-medium,
.parceria div.wpforms-container .wpforms-form .wpforms-field-large{max-width:100%; width:100%}

/* preenchimento automático: o Chrome pinta o campo de azul-claro */
.parceria div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill{
  -webkit-text-fill-color:rgb(var(--fg));
  -webkit-box-shadow:0 0 0 1000px #0b0b0a inset;
  caret-color:rgb(var(--fg))}

/* ---- campo Layout: o email e o contacto lado a lado ----
   A linha de colunas passa a grelha, com o mesmo gap da grelha principal, e as
   colunas ficam sem largura calculada nem padding lateral — era daí que vinha o
   desalinhamento dos filetes em relação aos campos de linha inteira. */
.parceria div.wpforms-container .wpforms-form .wpforms-field-layout{padding:0}
.parceria div.wpforms-container .wpforms-form .wpforms-field-layout > .wpforms-field-label{display:none}
.parceria div.wpforms-container .wpforms-form .wpforms-field-layout-columns{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-l) var(--space-m);
  width:100%; margin:0; padding:0}
.parceria div.wpforms-container .wpforms-form .wpforms-layout-column{
  width:auto; max-width:none; flex:none; padding:0; margin:0; float:none;
  display:flex; flex-direction:column; min-width:0}
.parceria div.wpforms-container .wpforms-form .wpforms-layout-column > .wpforms-field{width:100%; padding:0}

/* ---- consentimento RGPD ----
   A caixa é uma escolha do campo: <ul><li><input type=checkbox> <label>.
   O modo «modern» desenha os checkboxes com appearance:none e pinta-os a partir
   das --wpforms-*; aqui devolve-se o controlo nativo com accent-color, que é o
   que o desenho original usava e o que garante que se vê sobre preto. */
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox{grid-column:1/-1}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul,
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ol{
  margin:0; padding:0; list-style:none}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li{
  display:flex; gap:.75rem; align-items:flex-start; margin:0; padding:0;
  font-size:var(--fs-s5); color:rgb(var(--muted)); line-height:1.6}

/* A caixa, desenhada de raiz.
   Antes devolvia-se o controlo nativo com accent-color, porque o desenho do
   plugin ficava invisível sobre preto. Nativo funciona mas é o do sistema
   operativo — azul no Windows, quadrado duro, sem relação nenhuma com o resto.
   Aqui é um quadrado de filete fino que enche a dourado ao marcar, com o visto
   em SVG de fundo: nada de pseudo-elementos, que em inputs dependem do browser.
   A transição é a mesma dos botões, para o gesto ler como o resto da página. */
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; min-width:18px; min-height:0; flex:none;
  margin:2px 0 0; padding:0;
  background-color:transparent; background-repeat:no-repeat; background-position:center;
  background-size:11px 8px;
  border:1px solid rgb(var(--hair)); border-radius:0;
  box-shadow:none; cursor:pointer;
  transition:background-color .35s var(--ease-soft), border-color .35s var(--ease-soft)}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]:hover{
  border-color:var(--c-secundaria)}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]:focus-visible{
  outline:1px solid var(--c-principal); outline-offset:3px}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]:checked{
  background-color:var(--c-principal); border-color:var(--c-principal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 4.4 8 11 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* com erro, o filete acompanha a mensagem */
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"].wpforms-error{
  border-color:var(--c-secundaria)}
/* a linha inteira é clicável pelo <label>, por isso ganha estado de foco */
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox li:hover .wpforms-field-label-inline{
  color:rgb(var(--fg))}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox label,
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline{
  margin:0; font-size:var(--fs-s5); font-weight:300; letter-spacing:0; text-transform:none;
  color:rgb(var(--muted)); line-height:1.6; cursor:pointer}
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox a{
  color:rgb(var(--fg)); text-decoration:underline; text-underline-offset:3px}
/* com erro, o campo ganha a mensagem por baixo da caixa: precisa de empilhar,
   e a regra de base exclui o consentimento do flex-column por ser uma lista */
.parceria div.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox.wpforms-has-error{
  display:flex; flex-direction:column}

/* ---- botão e avisos ---- */
.parceria div.wpforms-container .wpforms-form .wpforms-submit-container{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-m);
  padding:0; margin:var(--space-l) 0 0}
.parceria div.wpforms-container .wpforms-form button[type="submit"].wpforms-submit{
  width:auto; max-width:none; margin:0}
.parceria div.wpforms-container .wpforms-form .wpforms-submit-spinner{width:18px; height:18px}

/* erros: o plugin usa #d63637, que sobre preto dá 3,2:1 */
.parceria div.wpforms-container .wpforms-form label.wpforms-error,
.parceria div.wpforms-container .wpforms-form em.wpforms-error,
.parceria div.wpforms-container .wpforms-form .wpforms-error-container,
.parceria div.wpforms-container .wpforms-error-container,
.parceria div.wpforms-container .wpforms-error-noscript{
  display:block; margin-top:.4rem; padding:0;
  font-size:var(--fs-s5); color:var(--c-secundaria); background:none}
.parceria div.wpforms-container .wpforms-form .wpforms-field input.wpforms-error,
.parceria div.wpforms-container .wpforms-form .wpforms-field textarea.wpforms-error{
  border-bottom-color:var(--c-secundaria)}

/* ---- ecrã de sucesso ----
   A confirmação já traz o markup do .sucesso; aqui só se apaga a caixa que o
   plugin desenha à volta. */
.parceria div.wpforms-confirmation-container,
.parceria div.wpforms-confirmation-container-full,
.parceria div.wpforms-container .wpforms-confirmation-container-full{
  margin:0; padding:0; background:none; border:0; color:inherit}

/* ---- Smart Phone: o selector de bandeira do intl-tel-input 18.2 ----
   Traz folha própria e desenha uma caixa clara à esquerda do campo. Fica um
   bloco transparente, alinhado com o filete, e a lista de países em escuro. Os
   nomes mudaram no intl-tel-input 19 (selected-flag → selected-country); estão
   aqui os dois, para não depender da versão que o plugin empacotar. */
.parceria div.wpforms-container .wpforms-field-phone .iti{width:100%; display:block}
.parceria div.wpforms-container .wpforms-field-phone .iti__flag-container,
.parceria div.wpforms-container .wpforms-field-phone .iti__country-container{padding:0}
.parceria div.wpforms-container .wpforms-field-phone .iti--allow-dropdown input[type="tel"]{padding-left:52px}
.parceria div.wpforms-container .wpforms-field-phone .iti__selected-flag,
.parceria div.wpforms-container .wpforms-field-phone .iti__selected-country{
  padding:0 6px 0 0; background:none!important; border:0; border-radius:0; outline-offset:2px}
.parceria div.wpforms-container .wpforms-field-phone .iti__arrow{
  border-top-color:rgb(var(--faint)); margin-left:6px}
.parceria div.wpforms-container .wpforms-field-phone .iti__arrow--up{border-bottom-color:rgb(var(--faint))}
.parceria div.wpforms-container .wpforms-field-phone .iti__country-list,
.parceria div.wpforms-container .wpforms-field-phone .iti__dropdown-content{
  background:#111110; border:1px solid rgb(var(--hair)); border-radius:var(--r-s);
  box-shadow:var(--sh-2); color:rgb(var(--fg)); font-size:var(--fs-s5); max-height:240px}
.parceria div.wpforms-container .wpforms-field-phone .iti__country{padding:8px 12px}
.parceria div.wpforms-container .wpforms-field-phone .iti__country.iti__highlight,
.parceria div.wpforms-container .wpforms-field-phone .iti__country.iti__active{background:rgb(var(--veil))}
.parceria div.wpforms-container .wpforms-field-phone .iti__dial-code{color:rgb(var(--faint))}
.parceria div.wpforms-container .wpforms-field-phone .iti__divider{border-bottom-color:rgb(var(--hair))}
.parceria div.wpforms-container .wpforms-field-phone .iti__search-input{
  background:transparent; color:rgb(var(--fg)); border-bottom:1px solid rgb(var(--hair))}

@media (max-width:860px){
  .parceria div.wpforms-container .wpforms-form .wpforms-field-container,
  .parceria div.wpforms-container .wpforms-form .wpforms-field-layout-columns{
    grid-template-columns:1fr; gap:var(--space-m)}
  /* com os campos em coluna única, 48px acima do botão era espaço a mais */
  .parceria div.wpforms-container .wpforms-form .wpforms-submit-container{margin:var(--space-m) 0 0}
}