/* ==========================================================================
   MOTOCICLISMO
   A folha de estilo do tema, montada a partir da maqueta.

   NAO SE ESCREVE AQUI A MAO. Este ficheiro e' gerado por
   `maqueta/gerar_css_do_tema.py`, que junta os blocos de CSS dos seis
   geradores da maqueta, pela mesma ordem por que a maqueta os junta.

   Mexer aqui e' perder a alteracao no build seguinte. Mexe-se na maqueta,
   corre-se o gerador, e reempacota-se o tema.
   ========================================================================== */

/* ================= as letras, servidas pelo proprio site =================

   Ate' 8 de setembro de 2026 estas tres familias vinham do
   `fonts.googleapis.com`. Isso obrigava o browser a falar com dois dominios
   de fora (googleapis e gstatic) ANTES de poder desenhar uma linha de texto,
   e no AutoGear essa espera media 780 ms.

   Os ficheiros aqui sao os MESMOS BYTES que o Google servia, descarregados
   do `gstatic` e postos em `assets/fontes/`. Nao se reduziu nenhum eixo nem
   nenhum peso, de proposito: a Fraunces tem os eixos `opsz`, `SOFT` e `WONK`
   usados em quinze sitios da folha, e mexer neles mudava o desenho.

   As `unicode-range` sao as originais, portanto o browser continua a buscar
   so' o subconjunto de que precisa: em portugues, o `latin`.
   ========================================================================== */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/anton-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/anton-normal-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:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/anton-normal-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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/archivo-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/archivo-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/archivo-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/archivo-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fontes/archivo-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fontes/archivo-normal-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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fontes/archivo-normal-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:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-italico-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-italico-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:'Fraunces';font-style:italic;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-italico-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:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-normal-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-normal-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:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;src:url(fontes/fraunces-normal-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}

/* ================= base, cabecalho, rodape, cartoes, anuncios, revista ================= */
:root{
  /* preto quente, como no AutoGear. A variante de preto puro esta' no
     seletor html.puro, para o cliente comparar ao vivo. */
  --ink:#0C0A0A; --ink-2:#141010; --ink-3:#1C1717;
  --line:rgba(244,240,240,.10); --line-2:rgba(244,240,240,.18);
  --text:#F4F0F0; --muted:#9C9091; --muted-2:#75696A;
  --marca:#E30613; --marca-lt:#FF2233; --marca-dk:#7A0009;
  --marca-txt:#F0242F;           /* vermelho legivel sobre o escuro */
  --marca-sec:#B8434C;           /* vermelho esbatido dos titulos de seccao */
  --skew:-14deg;                 /* inclinacao medida no logotipo real */
  --nav-bg:rgba(12,10,10,.82);
  --grad-claro:none;
  --shell:100%;
  --ease:cubic-bezier(.2,.7,.2,1);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --punch:"Anton","Archivo Black",Impact,"Haettenschweiler",sans-serif;
}
/* tons claros: fundo esbatido, laranja no canto superior esquerdo a diagonal */
html.claro{
  --ink:#F7F5F4; --ink-2:rgba(30,18,18,.05); --ink-3:rgba(30,18,18,.085);
  --line:rgba(30,16,18,.13); --line-2:rgba(30,16,18,.24);
  --text:#161011; --muted:#6B5A5C; --muted-2:#948083;
  --marca-txt:#C40510;
  --marca-sec:#A83840;
  --nav-bg:rgba(250,247,247,.86);
  /* O laranja do AutoGear diluido da' creme. O vermelho puro diluido da'
     ROSA, que nao serve. Por isso o degrade usa um vermelho escurecido e
     bem mais transparente: fica um tom quente de grafite, nao um rosa. */
  --grad-claro:linear-gradient(135deg,
    rgba(120,10,18,.13) 0%, rgba(120,10,18,.075) 24%,
    rgba(120,10,18,.04) 50%, rgba(120,10,18,.015) 74%,
    rgba(120,10,18,0) 100%);
}
/* preto puro, como nos materiais da marca. Alterna pelo seletor do cabecalho. */
html.puro{
  --ink:#000000; --ink-2:#0A0A0A; --ink-3:#141414;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --text:#FFFFFF; --muted:#9A9A9A; --muted-2:#6E6E6E;
}
html.claro body{
  background-image:var(--grad-claro);   /* preenche o corpo todo, do topo ao rodape */
  min-height:100vh;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background-color:var(--ink); color:var(--text);
  transition:background-color .45s var(--ease),color .45s var(--ease);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 clamp(18px,3.4vw,72px)}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--serif); font-weight:600;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
  line-height:.98; letter-spacing:-.015em; margin:0;
}
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--marca-txt);
}
.meta{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- barra utilitaria ---------- */
.util{border-bottom:1px solid var(--line);background:var(--ink)}
.util-in{display:flex;align-items:center;justify-content:space-between;height:44px;gap:20px}
.util-date{font-size:12px;color:var(--muted-2);letter-spacing:.02em}
.live{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);padding:5px 12px 5px 10px;border-radius:100px;
  background:linear-gradient(100deg,var(--marca) 0%,var(--marca-dk) 130%);
}
.dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.util-right{display:flex;align-items:center;gap:22px}
.util-link{font-size:12px;color:var(--muted);transition:color .3s var(--ease)}
.util-link:hover{color:var(--text)}

/* ---------- cabecalho ---------- */
.head{padding:26px 0 20px;background:var(--ink)}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;justify-self:center}
/* O logotipo desta marca e' uma caixa larga (4,5:1), nao um simbolo. A 38px
   ficava perdido no cabecalho. O ficheiro novo do cliente tem 3275px de
   largura, portanto aguenta crescer sem perder nitidez. */
.brand img.wordmark{height:58px;width:auto}
.wordmark.p-claro{display:none}
html.claro .wordmark.p-escuro{display:none}
html.claro .wordmark.p-claro{display:block}
.head-right{justify-self:end;display:flex;align-items:center;gap:10px}
.opcoes{display:flex;align-items:center;gap:7px}
.grupo{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:100px;
  background:var(--ink-3)}
.grupo button{
  height:28px;padding:0 11px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:0;border-radius:100px;color:var(--muted-2);
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.grupo button:hover{color:var(--text)}
.grupo button.on{background:var(--marca);color:#fff}
.grupo.tema button{width:32px;padding:0}
.grupo svg{width:15px;height:15px;display:block}

.head-cta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.head-cta:hover{border-color:var(--marca);color:var(--marca-txt)}
/* `search` e' uma classe que o WordPress poe no <body> das paginas de
   resultados. Chamar `search` a caixa de procura fez, no AutoGear a 7 de
   setembro de 2026, a pagina de pesquisa ficar em branco no telemovel: a
   regra que escondia a caixinha acertou no corpo inteiro da pagina.
   Aqui ja' nasce com prefixo. NAO voltar a chamar-lhe `search`. */
.cab-busca{
  justify-self:start;display:flex;align-items:center;gap:9px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;min-width:210px;color:var(--muted-2);font-size:13px;
}

/* ==========================================================================
   PECAS QUE SO' EXISTEM NO TEMA
   A maqueta resolvia estas com estilos escritos na propria etiqueta. Num tema
   isso nao serve: repetia-se em cinco moldes e um dia divergia. Ficam aqui,
   com nome, para o tema as usar. Acrescentadas a 7 de setembro de 2026.
   ========================================================================== */

/* a esquerda da barra utilitaria: a data e o selo do directo */
.util-esq{display:flex;align-items:center;gap:18px}

/* o paragrafo do rodape, por baixo do logotipo */
.foot-sobre{color:var(--muted);font-size:13.5px;max-width:34ch;margin:0 0 18px}

/* AS REDES SOCIAIS DO RODAPE.
   A maqueta esqueceu-se delas. No AutoGear isso quase pos um tema no ar sem
   tres das quatro redes que o site tinha, e so' se apanhou porque o cliente
   perguntou. Aqui ja' nascem com lugar. */
.foot-redes{display:flex;gap:10px}
.foot-redes a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.foot-redes a:hover{border-color:var(--marca);color:var(--marca-txt)}
.foot-redes svg{width:16px;height:16px}

/* a nota por baixo da grelha de video */
.tv-nota{margin-top:26px;color:var(--muted-2);text-transform:none;
  letter-spacing:0;font-size:12px;line-height:1.6}

/* o mes, ao lado do numero da edicao */
.revista-mes{color:var(--muted-2);font-weight:400;margin-left:8px}

/* uma edicao sem capa: nao se deixa um buraco, escreve-se o numero */
.capa-falta{display:grid;place-items:center;width:132px;height:186px;
  border:1px dashed var(--line-2);border-radius:4px;color:var(--muted-2);
  font-family:var(--sans);font-size:12px;text-align:center;padding:8px}

/* AS PAGINAS FIXAS: ficha tecnica, estatuto editorial, termos, privacidade.
   Sem isto saiam com aspecto de lista de artigos, e sao paginas com valor
   legal. */
.pag-fixa{max-width:74ch;margin:0 auto;padding:10px 0 40px}

/* O TEXTO DESTAS PAGINAS NAO E' NOSSO, e pode trazer o que quiser.
   A ficha tecnica do motociclismo tem enderecos de correio escritos de
   seguida, e um endereco nao tem por onde partir: `vitor.sousa@motociclismo.pt`
   mede 380px e nao cabe num telemovel de 390. Sem esta regra empurra a pagina
   inteira para o lado. Medido a 7 de setembro de 2026, e era a unica pagina
   das oito a transbordar. */
.pag-fixa .corpo{overflow-wrap:break-word; word-break:break-word}
.pag-fixa .corpo h2{margin-top:1.8em}
.pag-fixa .corpo ul{margin:0 0 1.2em;padding-left:0;list-style:none}
.pag-fixa .corpo li{position:relative;padding-left:22px;margin:0 0 .5em}
.pag-fixa .corpo li::before{content:"";position:absolute;left:0;top:.65em;
  width:6px;height:6px;border-radius:50%;background:var(--marca)}

/* OS BLOCOS CRUS DA CAMADA EDITORIAL NAO SE VEEM.
   O plugin escreve "O essencial" e a ficha tecnica com um estilo de reserva,
   para funcionarem com qualquer tema. Aqui o tema retira-os do texto e
   redesenha-os. Estas duas linhas sao a rede: se um deles escapar a' retirada,
   nao aparece a dobrar. */
.agcam-essencial,.agcam-ficha{display:none}

/* o topo da pagina de erro */
.erro-topo{padding-top:48px}
.erro-topo h1{font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,3.4vw,3.6rem);line-height:1.08;margin:12px 0 16px}

/* Texto que existe para os leitores de ecra e para a Google, e que nao se ve.
   Nao se usa `display:none`, que o esconderia tambem deles. */
.so-leitores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- navegacao ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(14px);border-block:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:4px;height:52px;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{
  white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:8px 15px;border-radius:100px;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--ink-3)}
.nav a.on{color:var(--ink);background:var(--text)}

/* ---------- hero ---------- */
.sec-topo{padding-top:26px}
.hero{display:grid;grid-template-columns:1.62fr 1fr;gap:18px;align-items:stretch}

.lead-wrap{position:relative;min-height:clamp(470px,33vw,700px);border-radius:6px;overflow:hidden}
.lead{
  position:absolute;inset:0;display:flex;align-items:flex-end;isolation:isolate;
  opacity:0;visibility:hidden;transition:opacity .55s var(--ease);
}
.lead.on{opacity:1;visibility:visible}
.lead > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.4s var(--ease)}
.lead.on:hover > img.bg{transform:scale(1.03)}
.lead::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,8,7,1) 3%,rgba(10,8,7,.95) 38%,rgba(10,8,7,.6) 66%,rgba(10,8,7,.16) 100%),
    linear-gradient(105deg,rgba(232,78,15,.18) 0%,rgba(14,11,9,0) 55%);
}
.lead-body{padding:0 clamp(22px,3vw,54px) clamp(30px,3.2vw,48px);max-width:min(900px,74%)}
.lead-body .eyebrow{color:#CFC4B9}
.lead-t{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  /* Os titulos do motociclismo.pt tem 93 caracteres de media, contra 69 no
     AutoGear. O tamanho maximo desce e o numero de linhas passa a ter
     travao, senao a manchete transborda da fotografia. */
  font-size:clamp(1.6rem,2.55vw,3.05rem);
  line-height:1.09;               /* nunca abaixo de 1.08: corta os acentos maiusculos */
  letter-spacing:.004em;
  color:#fff;margin:12px 0 18px;text-shadow:0 2px 22px rgba(10,8,7,.5);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.byline{display:flex;align-items:center;gap:11px}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2)}
.sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}

.dots{position:absolute;right:clamp(18px,2.2vw,34px);bottom:clamp(22px,2.4vw,36px);z-index:5;
  display:flex;gap:9px}
.dots button{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;
  color:#D8CEC4;background:rgba(14,11,9,.5);backdrop-filter:blur(8px);
  border:1px solid rgba(245,240,234,.22);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.dots button:hover{color:#fff;border-color:rgba(245,240,234,.5)}
.dots button.on{background:var(--marca);border-color:transparent;color:#fff}

/* coluna direita: quatro fotografias em 2x2, na mesma linguagem dos cartoes */
.rail{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.rail > .card{min-height:0}
.rail > .card .thumb{aspect-ratio:auto;height:100%;margin-bottom:0}

/* ---------- espaco publicitario ---------- */
.adslot{margin:34px 0;border:1px dashed var(--line-2);border-radius:6px;background:var(--ink-2);
  display:grid;place-items:center;min-height:132px;text-align:center;gap:6px;padding:22px}
.adslot .meta{color:var(--muted-2)}
.adslot small{color:var(--muted-2);font-size:11.5px;max-width:52ch;line-height:1.5}

/* ---------- seccoes ---------- */
.sec{padding-block:46px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sec-title{display:flex;align-items:center;gap:14px}
.sec-title::before{content:"";width:28px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--marca),var(--marca-dk))}
.sec-title h2{font-family:var(--serif);font-weight:600;font-size:30px;margin:0;letter-spacing:-.01em;
  font-variation-settings:"opsz" 60;transition:color .3s var(--ease)}

/* proposta: manchete Anton em laranja vivo, a voz das notícias também nas secções */
html.sec-anton .sec-title h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,2vw,36px);line-height:1.12;letter-spacing:.012em;
  color:var(--marca-lt);font-variation-settings:normal;
}
html.claro.sec-anton .sec-title h2{color:var(--marca)}
html.sec-anton .sec-title::before{width:34px;height:4px}

/* variante: mesma fonte, laranja esbatido, e tamanho que nao compete com as manchetes */
html.sec-esbatido .sec-title h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,1.65vw,30px);line-height:1.12;letter-spacing:.014em;
  color:var(--marca-sec);font-variation-settings:normal;
}
html.sec-esbatido .sec-title::before{width:30px;height:3px;
  background:linear-gradient(90deg,var(--marca-sec),var(--marca-sec))}

/* variante: mesma fonte, sem o laranja no texto */
html.sec-anton-neutro .sec-title h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(24px,2vw,36px);line-height:1.12;letter-spacing:.012em;
  font-variation-settings:normal;
}
html.sec-anton-neutro .sec-title::before{width:34px;height:4px}
.sec-more{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease)}
.sec-more:hover{color:var(--marca-txt)}

/* ultimas: 1 destaque + grelha */
.ultimas{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:26px}
.big{grid-row:span 2}
.big .thumb{aspect-ratio:3/2;border-radius:5px;overflow:hidden;margin-bottom:16px}
.big p{margin-top:0}
.big .thumb > img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.big:hover .thumb > img{transform:scale(1.04)}
.big h3{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.12;margin:11px 0 10px;
  font-variation-settings:"opsz" 72}
.big p{color:var(--muted);font-size:14.5px;margin:0 0 12px;max-width:62ch}
.card .thumb{aspect-ratio:4/3;border-radius:5px;overflow:hidden;margin-bottom:0}
.card .thumb > img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .thumb > img{transform:scale(1.05)}
.card h3{font-family:var(--serif);font-weight:600;font-size:17.5px;line-height:1.2;margin:9px 0 8px;
  font-variation-settings:"opsz" 32}

/* titulo de manchete sobre a fotografia */
.thumb{position:relative;container-type:inline-size}
.punch{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:5.5%;
  background:linear-gradient(to top,rgba(10,8,7,.94) 0%,rgba(10,8,7,.72) 30%,rgba(10,8,7,.18) 66%,rgba(10,8,7,0) 100%);
}
.punch .eyebrow{font-size:clamp(8.5px,2.5cqi,11px);letter-spacing:.15em;color:#CFC4B9}
.punch-t{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(11px,6.0cqi,21px);line-height:1.10;letter-spacing:.006em;color:#fff;
  text-shadow:0 2px 16px rgba(10,8,7,.55);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hora{
  position:absolute; top:10px; left:10px; z-index:3;
  font-family:var(--sans); font-size:10.5px; font-weight:800;
  letter-spacing:.1em; color:#fff;
  background:rgba(12,10,10,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  padding:4px 9px; border-radius:100px;
}
/* As seccoes de TEMPO (Em destaque, Últimas) nao sao gavetas: nao levam o
   traco de cor das seccoes de ASSUNTO, para nao se confundirem com elas. */
/* "Em destaque" e "Últimas" sao janelas e nao gavetas, mas ficam a VERMELHO
   como as categorias: decisao do cliente em 5 de setembro de 2026, depois de
   ver a versao em cinzento. A classe .sec-tempo mantem-se no HTML, para quem
   vier a seguir saber quais sao as seccoes sem pagina propria. */
.hl{font-style:normal;color:var(--marca-lt)}
html.sem-realce .hl{color:inherit}
/* A assinatura NUNCA se parte em duas linhas.
   Numa coluna estreita, um nome comprido empurrava o tempo de leitura para
   uma segunda linha e o cartao ficava desalinhado dos vizinhos. Apanhado no
   AutoGear a 7 de setembro de 2026 e corrigido aqui antes de acontecer.
   Abaixo de 260px sai o tempo de leitura, que e' a peca menos importante
   das tres; acima disso o nome corta-se com reticencias. */
.pmeta > span{white-space:nowrap}
.pmeta > span:first-of-type{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pmeta .pav,.pmeta i{flex:none}
@container (max-width:260px){.pmeta .pmeta-ler{display:none}}
.pmeta{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0;
  font-family:var(--sans);font-size:clamp(8px,2.3cqi,10.5px);font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#C6BAAF}
.pmeta .pav{width:clamp(15px,4.6cqi,22px);height:clamp(15px,4.6cqi,22px);border-radius:50%;
  object-fit:cover;border:1px solid rgba(245,240,234,.28)}
.pmeta i{width:2.5px;height:2.5px;border-radius:50%;background:#7D7269;display:inline-block}
.big .punch-t{font-size:clamp(16px,5.4cqi,36px);-webkit-line-clamp:4}
.rail-top .punch-t{font-size:clamp(12px,5.8cqi,22px)}

/* modos de titulo: o controlo da maqueta troca a classe na raiz */


/* desporto: banda escura */
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* dentro de uma coluna com lateral so' cabem duas por linha */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.num{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;
  color:var(--marca-lt);font-variation-settings:"opsz" 90;margin-bottom:10px}
html.claro .num{color:var(--marca)}   /* sobre fundo claro o tom vivo perde contraste */

/* tv */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.play{position:relative}
.play::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(14,11,9,.55);backdrop-filter:blur(3px);
  border:1.5px solid rgba(245,240,234,.7);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.play::before{
  content:"";position:absolute;left:calc(50% + 2px);top:50%;transform:translate(-50%,-50%);
  width:0;height:0;z-index:2;
  border-left:13px solid var(--text);border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.card:hover .play::after{background:var(--marca);transform:translate(-50%,-50%) scale(1.08)}

/* autogear tv: mesma organizacao do topo */
.tv{display:grid;grid-template-columns:1.62fr 1fr;grid-template-rows:auto auto;gap:18px;align-items:stretch}
.tv-frame{grid-column:1;grid-row:1}
/* os videos mantêm 16:9: a miniatura do YouTube ja traz texto gravado e nao pode ser cortada */
.tv .rail{grid-column:2;grid-row:1;grid-template-columns:1fr 1fr;grid-template-rows:auto;
  align-content:space-between;height:100%;gap:14px}
.tv .rail > .card .thumb{aspect-ratio:16/9;height:auto}
/* veu mais forte, para a nossa manchete ganhar ao texto gravado na miniatura */
.vcard .punch{background:linear-gradient(to top,rgba(10,8,7,.96) 0%,rgba(10,8,7,.86) 34%,rgba(10,8,7,.3) 70%,rgba(10,8,7,0) 100%)}
.vcard .punch-t{font-size:clamp(11px,5.6cqi,18px);-webkit-line-clamp:2}
.vcard .pmeta{font-size:clamp(7.5px,2cqi,9.5px)}
.tv-sub{grid-column:1 / -1;grid-row:2}
.tv-frame .thumb.grande{aspect-ratio:16/9;border-radius:6px;overflow:hidden}
.tv-frame .thumb.grande > img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tv-frame:hover .thumb.grande > img{transform:scale(1.03)}
.tv-frame .punch-t{font-size:clamp(19px,4.6cqi,44px);-webkit-line-clamp:3}
.vcard .thumb{border-radius:6px}

/* botao de reproducao sobre a miniatura */
.thumb.play::after{
  content:"";position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);z-index:3;
  width:var(--pw,52px);height:var(--pw,52px);border-radius:50%;
  background:rgba(14,11,9,.5);backdrop-filter:blur(4px);border:1.5px solid rgba(245,240,234,.72);
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.thumb.play::before{
  content:"";position:absolute;left:calc(50% + 2px);top:36%;transform:translate(-50%,-50%);z-index:4;
  width:0;height:0;border-left:calc(var(--pw,52px) * .25) solid var(--text);
  border-top:calc(var(--pw,52px) * .155) solid transparent;
  border-bottom:calc(var(--pw,52px) * .155) solid transparent;
}
.vcard .thumb.play{--pw:44px}
a:hover > .thumb.play::after{background:var(--marca);border-color:transparent;
  transform:translate(-50%,-50%) scale(1.08)}

.novo{position:absolute;left:14px;top:14px;z-index:5;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding:6px 12px;border-radius:100px;
  background:linear-gradient(100deg,var(--marca),var(--marca-dk) 130%)}

.tv-sub{display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:100px;padding:16px 24px;color:#fff;
  background:linear-gradient(100deg,var(--marca) 0%,var(--marca-dk) 145%);
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .3s var(--ease),filter .3s var(--ease)}
.tv-sub:hover{transform:translateY(-1px);filter:brightness(1.08)}

/* newsletter */
.news{
  margin:56px 0;border-radius:8px;padding:52px 46px;
  background:linear-gradient(118deg,var(--marca) 0%,#C13A08 42%,#3A1305 100%);
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
}
.news h2{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.03;margin:0 0 12px;
  letter-spacing:-.02em;font-variation-settings:"opsz" 100,"WONK" 1}
.news p{margin:0;color:rgba(255,244,238,.85);font-size:15.5px;max-width:48ch}
.news-form{display:flex;gap:10px}
.news-form input{
  flex:1;background:rgba(14,11,9,.35);border:1px solid rgba(255,240,234,.3);border-radius:100px;
  padding:14px 20px;color:var(--text);font-family:var(--sans);font-size:14px;
}
.news-form input::placeholder{color:rgba(255,240,234,.55)}
.news-form button{
  background:var(--ink);color:var(--text);border:0;border-radius:100px;padding:14px 26px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:transform .3s var(--ease)}
.news-form button:hover{transform:translateY(-1px)}

/* rodape */
.foot{border-top:1px solid var(--line);padding:48px 0 34px;background:var(--ink-2)}
.foot-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
.foot h5{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{font-size:13.5px;color:var(--muted);transition:color .3s var(--ease)}
.foot a:hover{color:var(--marca-txt)}
.foot-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--muted-2)}

.flag{position:fixed;right:14px;bottom:14px;z-index:90;background:rgba(30,25,23,.72);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:100px;
  padding:7px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted-2);opacity:.75;transition:opacity .3s var(--ease)}
.flag:hover{opacity:1}

/* em ecras estreitos os controlos saem por ordem de importancia; o tema fica sempre */
@media (max-width:1700px){.g-largura{display:none}}
@media (max-width:1000px){.g-nomes{display:none}}

@media (min-width:1700px){
  .ultimas{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .tv{grid-template-columns:1.6fr 1fr}
}
/* O AutoGear escondia daqui para a frente porque so' tinha 7 cartoes e a
   grelha era de 4 colunas. Aqui a coluna editorial tem de acompanhar a
   altura da torre de publicidade da lateral, por isso mostram-se todos. */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .rail{grid-template-rows:auto auto}
  .rail > .card .thumb{aspect-ratio:4/3;height:auto}
  .ultimas{grid-template-columns:1fr 1fr}
  .big{grid-row:auto;grid-column:span 2}
  .grid4{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr 1fr}
  .next{grid-template-columns:1fr 1fr}
  .tv{grid-template-columns:1fr}
  .tv-frame,.tv .rail,.tv-sub{grid-column:1;grid-row:auto}
  .tv .rail > .card .thumb{aspect-ratio:16/9;height:auto}
  .news{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .shell{padding:0 18px}
  .head-in{grid-template-columns:1fr}
  .brand img.wordmark{height:46px}
  .search,.head-cta{display:none}
  .head-right{justify-self:center}
  .lead-body{padding:0 22px 30px}
  .lead h1{font-size:2.15rem}
  .byline{flex-wrap:wrap;gap:6px 9px}
  .byline .sep{display:none}
  /* os numeros sobem para o topo, para nao taparem a linha do autor */
  .dots{top:14px;bottom:auto;right:14px;gap:6px}
  .dots button{width:34px;height:34px;font-size:12px}
  /* barra de topo so com o essencial */
  .util-date,.util-right{display:none}
  .util-in{justify-content:flex-start}
  .lead{min-height:430px}
  .ultimas,.grid4,.grid3,.next,.tv{grid-template-columns:1fr}
  .tv-frame,.tv .rail,.tv-sub{grid-column:1;grid-row:auto}
  .big{grid-column:auto}
  .news{padding:36px 26px}
  .news h2{font-size:30px}
  .news-form{flex-direction:column}
  .foot-in{grid-template-columns:1fr}
}

/* ==========================================================================
   PUBLICIDADE
   Os anunciantes do motociclismo.pt compram a POSICAO, nao as impressoes.
   Nada muda de lugar. O que muda e' a moldura: caixa arredondada, etiqueta
   discreta, e espaco reservado com altura fixa para a pagina nao saltar
   quando o anuncio carrega.
   ========================================================================== */
.ad{
  --ad-w:300px; --ad-h:250px;
  position:relative; display:block; margin-inline:auto;
  width:100%; max-width:var(--ad-w);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.ad::before{
  content:""; display:block;
  padding-top:calc(var(--ad-h) / var(--ad-w) * 100%);
}
.ad > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
}
.ad:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ad-lbl{
  display:block; text-align:center;
  font-family:var(--sans); font-size:9px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); opacity:.6;
  margin:0 0 7px;
}
.ad-wrap{margin:0 0 26px}
.ad-wrap:last-child{margin-bottom:0}

.ad.bill{--ad-w:970px; --ad-h:250px; max-width:970px; border-radius:20px}
.adband{padding-block:30px; background:var(--ink-2); border-block:1px solid var(--line)}
.adband .ad{background:var(--ink)}

.ad.half{--ad-h:600px}

/* ==========================================================================
   `.ad-real`: O ANUNCIO A SERIO, NO TEMA. So' o tema poe esta classe.
   ==========================================================================

   Na maqueta cada `.ad` sabe o tamanho do anuncio que la' vai, porque o
   gerador escreve `--ad-w` e `--ad-h` com as medidas certas. O `::before`
   reserva exactamente esse espaco e a imagem preenche-o. Encaixa ao pixel.

   NO TEMA NAO SE SABE O TAMANHO. Quem escolhe o anuncio e' o Advanced Ads, na
   hora, de um grupo com criativos de medidas diferentes: 300x250, 300x600,
   970x250, 600x500. O `--ad-h` fica no valor por omissao, 250px, e o
   `::before` reserva 250px que **se somam** a' altura do anuncio, porque o
   anuncio real vem dentro de um `<div>` e nao e' um `<img>` filho directo.

   Resultado, visto pelo cliente a 7 de setembro de 2026: **uma faixa preta
   de 250px por cima de cada anuncio**, em todos eles.

   Aqui nao ha' nada a reservar: o anuncio ja' vem escrito no HTML da pagina,
   pelo servidor, e nao chega depois. A caixa passa a ter a altura do anuncio
   que la' esta', seja ele qual for. */
.ad-real::before{content:none}
.ad-real > *{position:static}
.ad-real img{max-width:100%;height:auto;margin-inline:auto}

/* `line-height:0` na caixa, e nao `display:block` na imagem.
   O Advanced Ads escreve `style="display: inline-block"` na propria imagem, e
   um estilo escrito no elemento ganha sempre a uma folha de estilo. Sendo em
   linha, a imagem assenta na linha de base e sobra o espaco do "rabo" das
   letras: **oito pixeis pretos por baixo de cada anuncio**, medidos. */
.ad-real{line-height:0;font-size:0}

.tower{position:sticky; top:78px; display:flex; flex-direction:column}
.tower-h{
  font-family:var(--sans); font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
/* Nome proprio de proposito: o build_artigo.py ja' usa .corpo para a
   coluna de texto do artigo, e os dois partilham esta folha de estilo. */
.pag-corpo{
  display:grid; grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(28px,3vw,56px); align-items:start;
}
.pag-corpo > .col-main{min-width:0}
.pag-corpo > aside{min-width:0}

/* etiqueta inclinada 14 graus, medidos no logotipo real da revista */
.tag-skew{
  display:inline-block; transform:skewX(var(--skew));
  background:var(--marca); color:#fff;
  font-family:var(--sans); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 15px; border-radius:4px;
}
.tag-skew > span{display:inline-block; transform:skewX(calc(var(--skew) * -1))}

/* ==========================================================================
   EM TELEMOVEL A COLUNA DE PUBLICIDADE NAO SE ESCONDE: FLUI

   Isto mudou a 7 de setembro de 2026, e a razao e' dinheiro.

   A maqueta punha os anuncios em DOIS sitios: na coluna lateral, para
   computador, e intercalados no texto, para telemovel. O CSS escondia um dos
   dois. **Numa maqueta e' inofensivo. Em producao inflaciona a factura.**

   Lido o `tracking.js` do `advanced-ads-tracking`: ele recolhe os elementos
   com `data-motoc-trackid` e conta-os, **sem uma unica verificacao de
   visibilidade**. Um anuncio escondido pelo CSS conta na mesma. A torre
   duplicada fazia o site declarar as impressoes a dobrar.

   Agora cada grupo aparece UMA vez. Em telemovel a coluna deixa de ser uma
   coluna e passa a fluir na pagina, a seguir ao bloco a que pertence, com os
   anuncios lado a lado enquanto couberem.
   ========================================================================== */
@media (max-width:1100px){
  .pag-corpo{grid-template-columns:minmax(0,1fr)}
  .pag-corpo > aside{margin-top:34px}
  .pag-corpo > aside .tower{
    position:static;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:22px; align-items:start;
  }
  .pag-corpo > aside .tower-h{grid-column:1 / -1; margin-bottom:0}
}
@media (max-width:680px){
  .pag-corpo > aside .tower{grid-template-columns:1fr}
}

/* `.ad-cela`: O ANUNCIO COMO SE FOSSE UM CARTAO, dentro da grelha.
   ==========================================================================

   `.ad-inline` ocupa a largura toda e por isso **obriga a abrir linha nova**.
   Numa grelha de tres colunas com seis cartoes antes dele isso encaixa; numa
   de quatro nao, e ficam duas celulas vazias antes do anuncio e outras duas no
   fim. **Foi o cliente a ver os buracos**, a 7 de setembro de 2026, no ecra
   largo dele.

   A conta e' simples e vale a pena escreve-la: a grelha das Ultimas tem 1, 2,
   3 ou 4 colunas conforme a largura, e por isso o numero de coisas la' dentro
   tem de ser divisivel por todos. **Doze.** Onze cartoes mais um anuncio.

   Com `.ad-cela` o anuncio ocupa uma celula como qualquer cartao, e ai' nao ha'
   linha para abrir nem buraco para deixar, seja qual for o numero de colunas.
   `align-self:start` para nao esticar a caixa a' altura de um cartao com
   fotografia. */
.ad-cela{align-self:start}

/* `.ad-inline` e `.ad-resto` ficaram sem uso quando a duplicacao saiu.
   Ficam definidos porque a maqueta ainda os produz, e sem regra ficariam a
   atravessar a grelha de maneira estranha. NAO USAR NO TEMA. */
.ad-inline{grid-column:1 / -1}
.ad-resto{margin-top:34px}


/* ==========================================================================
   REVISTA MOTOCICLISMO
   O player Flipsnack da revista, que sai todas as semanas e e' gratuita.
   No site real vive a 1947px, logo a seguir aos destaques, com 720px de
   altura. E' peca de topo, nao de rodape.
   ========================================================================== */
.revista{
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--ink-2); margin-top:6px;
}
.revista-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding:18px 22px; border-bottom:1px solid var(--line);
}
.revista-topo .esq{display:flex;align-items:center;gap:14px}
.revista-nota{
  font-family:var(--sans); font-size:12.5px; color:var(--muted);
  margin:0; max-width:52ch; line-height:1.5;
}
.revista-cta{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--marca); border-radius:100px;
  padding:9px 18px; white-space:nowrap;
  transition:background .3s var(--ease);
}
.revista-cta:hover{background:var(--marca-lt)}
.revista-ed{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--marca-txt);
  white-space:nowrap;
}
.revista-botoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* o segundo botao pesa menos que o principal, mas continua a ler-se */
.revista-cta.fantasma{
  background:transparent; color:var(--text);
  border:1px solid var(--line-2);
}
.revista-cta.fantasma:hover{background:var(--ink-3);border-color:var(--marca)}
@media (max-width:680px){ .revista-botoes{width:100%} .revista-cta{flex:1;text-align:center} }
.revista-frame{position:relative; background:#000}
.revista-frame > iframe{display:block; width:100%; height:720px; border:0}
@media (max-width:1100px){ .revista-frame > iframe{height:560px} }
@media (max-width:680px){ .revista-frame > iframe{height:430px}
  .revista-topo{padding:15px 16px} }


/* ---------- fila de capas, estilo prateleira ---------- */
.capas-wrap{position:relative; margin-top:26px}
.capas{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  padding:4px 2px 18px; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.capas::-webkit-scrollbar{height:6px}
.capas::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:100px}
.capas::-webkit-scrollbar-track{background:transparent}
.capa{
  /* Cresce para preencher a largura disponivel em vez de deixar um vazio a'
     direita, e volta a encolher e a arrastar quando o ecra nao chega. */
  flex:1 1 150px; min-width:132px; max-width:230px;
  scroll-snap-align:start;
  transition:transform .35s var(--ease);
  cursor:pointer;
}
.capa:hover{transform:translateY(-6px)}
.capa{appearance:none;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit}
.capa .fig{
  position:relative; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-2);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.capa .fig::before{content:"";display:block;padding-top:141.3%}   /* A4, reserva a altura */
.capa .fig > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.capa .fig::after{                       /* leve escurecido no fundo, para o numero ler-se */
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  opacity:0; transition:opacity .35s var(--ease);
}
.capa:hover .fig::after{opacity:1}
.capa .num{
  position:absolute; left:9px; bottom:8px; z-index:2;
  font-family:var(--sans); font-weight:800; font-size:11px;
  letter-spacing:.1em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7);
  opacity:0; transform:translateY(4px); transition:.35s var(--ease);
}
.capa:hover .num{opacity:1;transform:none}
.capa .leg{
  display:block; margin-top:9px;
  font-family:var(--sans); font-size:11.5px; color:var(--muted);
  letter-spacing:.02em;
}
.capa .leg b{color:var(--text);font-weight:700}
.capa.atual .fig{border-color:var(--marca)}
.capa.atual .leg b{color:var(--marca-txt)}
@media (max-width:680px){ .capa{width:132px} .capas{gap:13px} }

/* ================= artigo ================= */
/* ====================== pagina de artigo ====================== */
.progresso{position:fixed;left:0;top:0;height:3px;z-index:60;width:0;
  background:linear-gradient(90deg,var(--marca-lt),var(--marca));
  transition:width .1s linear}

/* envelope: o artigo tem medida propria, a homepage e' que e' fluida */
.envelope{max-width:1420px;margin:0 auto}

.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:22px 0 0;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.migalhas a{color:var(--muted);transition:color .3s var(--ease)}
.migalhas a:hover{color:var(--marca-txt)}
.migalhas span[aria-current]{color:var(--text)}

/* heroi: a fotografia leva a categoria, o titulo e a assinatura, como na homepage */
.art-heroi{
  position:relative;border-radius:6px;overflow:hidden;isolation:isolate;
  min-height:clamp(440px,42vw,720px);display:flex;align-items:flex-end;margin-top:20px;
}
.art-heroi > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}

/* AS FOTOGRAFIAS DENTRO DO TEXTO NUNCA SE AMPLIAM.
   ==========================================================================

   Elas sao informacao, nao desenho: o leitor olha-as de frente. **A capa e' o
   contrario, e enche sempre** — ver a nota a seguir a esta.

   O WordPress embrulha cada fotografia num `figure.wp-block-image` que e'
   `display:flex` em coluna, e um filho de uma caixa dessas estica-se a'
   largura toda. Uma fotografia de 646 pixeis passava a ocupar 1310. */
.corpo figure.wp-block-image{align-items:center}
.corpo figure.wp-block-image img,
.corpo p > img,
.corpo > img{
  width:auto; height:auto; max-width:100%;
  margin-inline:auto; border-radius:6px;
}

/* A GALERIA "RECORTADA" DO WORDPRESS, que era quem estava mesmo a esticar.
   ==========================================================================

   As fotografias vem dentro de um
   `figure.wp-block-gallery.has-nested-images.is-cropped`. Essa opcao serve
   para alinhar varias fotografias numa grelha, e para isso o WordPress manda
   cada uma encher a celula:

       .wp-block-gallery.has-nested-images.is-cropped
       figure.wp-block-image:not(#individual-image) img
       { flex:1 0 0%; height:100%; object-fit:cover; width:100% }

   **Reparar no `:not(#individual-image)`.** Nao filtra nada: serve so' para dar
   a' regra a forca de um identificador, e por isso ela ganha a qualquer regra
   escrita com classes. A primeira correccao que escrevi perdeu com ela.

   Aqui as galerias tem uma fotografia por linha, portanto o recorte nao alinha
   nada: so' amplia. Repete-se o selector com `.corpo` a' frente, que chega. */
.corpo .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.corpo .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a{
  width:auto; height:auto; max-width:100%;
  object-fit:contain; flex:0 1 auto;
}

/* A CAPA ENCHE SEMPRE A FAIXA, SEJA QUAL FOR O TAMANHO DA FOTOGRAFIA.
   ==========================================================================

   **Decisao do cliente a 7 de setembro de 2026**, e vale a pena guardar o
   raciocinio dele porque esta' certo:

     "a fotografia que leva o titulo eu ate' gostava que fosse esticada em
      todos, como se fosse estilizada. Mas as do artigo la' dentro e' que nao."

   **A capa e' desenho, as fotografias do texto sao informacao.** A capa vive
   por baixo de um veu escuro e de um titulo em letras grandes: uma fotografia
   um pouco mole ali nota-se muito menos do que no meio do texto, onde o leitor
   a olha de frente.

   Houve uma versao intermedia, de meia hora, em que as capas pequenas ficavam
   ao centro com um fundo desfocado. Saiu por escolha do cliente. Fica escrita
   aqui porque a alternativa e' boa e pode voltar a fazer falta:

       .art-heroi.capa-pequena > img{object-fit:contain}
       .art-heroi.capa-pequena > img.fundo{object-fit:cover;
         filter:blur(34px) saturate(1.25) brightness(.72);
         transform:scale(1.14); z-index:-3}

   **O preco, medido:** 132 dos 455 artigos do motociclismo tem capas abaixo
   de 1200px e ficam visivelmente moles num ecra grande. O cliente sabe e
   aceitou. */
.art-heroi > img.fundo{display:none}
.art-heroi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,8,7,.97) 4%,rgba(10,8,7,.9) 34%,rgba(10,8,7,.5) 64%,rgba(10,8,7,.14) 100%),
    linear-gradient(105deg,rgba(232,78,15,.16) 0%,rgba(10,8,7,0) 55%);
}
.art-topo{padding:clamp(26px,3vw,52px);width:100%}
.art-topo .eyebrow{color:#CFC4B9}
.art-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,3.4vw,4rem);line-height:1.05;letter-spacing:.004em;
  margin:12px 0 20px;color:#fff;max-width:min(26ch,88%);
  text-shadow:0 2px 22px rgba(10,8,7,.55);
}
.art-topo h1 .hl{color:var(--marca-lt)}
.dek{font-family:var(--serif);font-size:clamp(19px,1.5vw,24px);line-height:1.5;
  color:var(--muted);max-width:74ch;margin:26px 0 0;
  font-variation-settings:"opsz" 40}

.assinatura{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:0}
.assinatura .quem{color:#fff}
.assinatura .quando{color:#B8ADA3}
.assinatura .quem a{border-bottom-color:rgba(245,240,234,.35)}
.partilha a{border-color:rgba(245,240,234,.28);color:#D8CEC4}
.assinatura .av{width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-2)}
.assinatura .quem{font-size:13.5px;font-weight:700;color:var(--text)}
.assinatura .quem a{border-bottom:1px solid var(--line-2)}
.assinatura .quando{font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.assinatura .espaco{flex:1}
.partilha{display:flex;gap:7px}
.partilha a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.partilha a:hover{border-color:var(--marca);color:var(--marca-txt)}
.partilha svg{width:15px;height:15px}

.art-foto{margin:26px 0 8px;border-radius:6px;overflow:hidden;position:relative}
.art-foto img{width:100%;height:auto;max-height:min(64vh,620px);object-fit:cover;display:block}
.legenda{font-size:14.5px;color:var(--muted-2);padding:12px 2px 0;line-height:1.5;
  max-width:80ch}

/* o bloco que as IAs citam */
.essencial{
  max-width:none;margin:34px 0;padding:32px 36px;
  border:1px solid var(--line-2);border-left:4px solid var(--marca);border-radius:6px;
  background:var(--ink-2);
}
.essencial h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marca-txt);margin:0 0 16px}
.essencial ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.essencial li{position:relative;padding-left:26px;font-size:20px;line-height:1.55;
  color:var(--text)}
.essencial li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
  border-radius:50%;background:var(--marca)}
.essencial strong{font-weight:700}

/* corpo com barra lateral */
.art-grelha{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;
  align-items:start;margin:34px 0 0}
.corpo{max-width:62ch;font-family:var(--serif);font-size:23px;line-height:1.65;
  color:var(--text);font-variation-settings:"opsz" 14}
.corpo p{margin:0 0 22px}
.corpo h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,1.6vw,27px);line-height:1.14;letter-spacing:.012em;
  color:var(--marca-sec);margin:38px 0 16px;scroll-margin-top:90px;
}
.corpo h2:first-child{margin-top:0}
.corpo a{color:var(--marca-txt);border-bottom:1px solid var(--line-2)}

.citacao{margin:32px 0;padding:4px 0 4px 26px;border-left:3px solid var(--marca)}
.citacao p{font-family:var(--serif);font-size:27px;line-height:1.34;font-style:italic;
  margin:0 0 10px;color:var(--text);font-variation-settings:"opsz" 60,"WONK" 1}
.citacao cite{font-family:var(--sans);font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

.foto{margin:34px 0 30px}
.foto > img{width:100%;height:auto;border-radius:8px;display:block}
.foto figcaption{margin-top:10px;font-family:var(--sans);font-size:13px;
  color:var(--muted);line-height:1.5}
html.bruto .foto > img{border-radius:0}
.ficha{margin:34px 0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ficha h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marca-txt);margin:0;padding:16px 20px;
  background:var(--ink-2);border-bottom:1px solid var(--line)}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr}
.ficha dt,.ficha dd{padding:14px 22px;border-bottom:1px solid var(--line);margin:0;
  font-family:var(--sans);font-size:16px}
.ficha dt{font-weight:700;color:var(--muted);white-space:nowrap}
.ficha dd{color:var(--text)}
.ficha dl > :nth-last-child(-n+2){border-bottom:0}

.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.etiquetas a{font-size:13px;font-weight:600;letter-spacing:.06em;padding:8px 16px;
  border-radius:100px;border:1px solid var(--line);color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.etiquetas a:hover{border-color:var(--marca);color:var(--marca-txt)}

/* caixa de autor: o sinal E-E-A-T */
.caixa-autor{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  margin:34px 0;padding:24px;border:1px solid var(--line);border-radius:6px;
  background:var(--ink-2)}
.caixa-autor .av{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-2)}
.caixa-autor .nome{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 4px;
  font-variation-settings:"opsz" 40}
.caixa-autor .papel{font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marca-txt);margin:0 0 10px}
.caixa-autor p{margin:0;font-size:16.5px;line-height:1.6;color:var(--muted)}
.caixa-autor .falta{border:1px dashed var(--line-2);border-radius:4px;padding:14px 16px;
  font-size:15px;color:var(--muted-2);line-height:1.55}

.fontes{margin:32px 0;font-size:15.5px;color:var(--muted);line-height:1.6}
.fontes h2{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 10px}
.fontes a{color:var(--marca-txt)}

/* barra lateral */
.lado{position:sticky;top:78px;display:grid;gap:24px}
.indice{border:1px solid var(--line);border-radius:6px;padding:24px}
.indice h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 16px}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:i;display:grid;gap:14px}
.indice li{counter-increment:i}
.indice a{display:grid;grid-template-columns:28px 1fr;gap:9px;font-size:16px;
  line-height:1.42;color:var(--muted);transition:color .3s var(--ease)}
.indice a::before{content:counter(i,decimal-leading-zero);font-family:var(--sans);
  font-size:12px;font-weight:700;color:var(--muted-2);padding-top:3px}
.indice a:hover,.indice a.on{color:var(--text)}
.indice a.on::before{color:var(--marca)}

.lado-ad{border:1px dashed var(--line-2);border-radius:6px;background:var(--ink-2);
  display:grid;place-items:center;gap:6px;padding:26px 18px;text-align:center;
  min-height:250px}
.lado-ad small{color:var(--muted-2);font-size:13px;line-height:1.5;max-width:32ch}



/* ---- variante fluida: a pagina ocupa a janela, o texto guarda a medida ---- */
html.art-fluido .envelope{max-width:100%}
html.art-fluido .art-topo h1{max-width:min(32ch,74%)}
html.art-fluido .dek{max-width:66ch}
html.art-fluido .essencial li{max-width:96ch}
html.art-fluido .art-grelha{grid-template-columns:minmax(0,1fr) 400px}
html.art-fluido .corpo{max-width:none}
/* o texto mantem 68 caracteres; imagens, citacoes e tabelas usam a largura toda */
html.art-fluido .corpo > p,
html.art-fluido .corpo > h2,
html.art-fluido .corpo > .etiquetas,
html.art-fluido .corpo > .fontes{max-width:62ch}
html.art-fluido .citacao{max-width:80ch}
html.art-fluido .art-foto img{max-height:min(72vh,760px)}

/* ---- modo "em bruto": como fica um artigo tal como o WordPress o tem hoje ---- */
html.bruto .essencial,
html.bruto .ficha,
html.bruto .indice,
html.bruto .corpo h2,
html.bruto .citacao,
html.bruto .etiquetas,
html.bruto .fontes{display:none}
html.bruto .corpo h2 + p{margin-top:0}
html.bruto .aviso-bruto{display:flex}
.aviso-bruto{display:none;align-items:flex-start;gap:14px;margin:30px 0 0;padding:20px 24px;
  border:1px dashed var(--line-2);border-radius:6px;background:var(--ink-2);
  font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--muted)}
.aviso-bruto strong{color:var(--text)}

@media (max-width:1100px){
  .art-grelha, html.art-fluido .art-grelha{grid-template-columns:1fr;gap:0}
  .lado{position:static;margin-top:40px;grid-template-columns:1fr 1fr;display:grid}
}
@media (max-width:680px){
  .corpo{font-size:20px}
  .lado{grid-template-columns:1fr}
  .essencial{padding:20px 18px}
  .caixa-autor{grid-template-columns:1fr}
  .ficha dl{grid-template-columns:1fr}
  .ficha dt{padding-bottom:0;border-bottom:0}
}

/* ================= categoria ================= */
/* ====================== pagina de categoria ====================== */
.cat-topo{padding:30px 0 26px;border-bottom:1px solid var(--line);margin-bottom:8px}
.cat-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,4.4vw,5rem);line-height:1.08;letter-spacing:.004em;
  margin:12px 0 18px;color:var(--text);
}
.cat-topo h1 .hl{color:var(--marca-txt)}
.cat-desc{font-family:var(--serif);font-size:clamp(18px,1.45vw,23px);line-height:1.5;
  color:var(--muted);max-width:70ch;margin:0 0 22px;font-variation-settings:"opsz" 40}
.cat-numeros{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.cat-numeros b{color:var(--marca-txt)}

/* subcategorias: ligacoes internas que a Google segue */
.subcats{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.subcats a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 17px;border-radius:100px;
  border:1px solid var(--line);font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--muted);transition:border-color .3s var(--ease),color .3s var(--ease)}
.subcats a:hover{border-color:var(--marca);color:var(--marca-txt)}
.subcats span{font-size:11px;font-weight:700;color:var(--muted-2)}

/* destaque da categoria */
.cat-heroi{
  position:relative;border-radius:6px;overflow:hidden;isolation:isolate;
  min-height:clamp(400px,36vw,600px);display:flex;align-items:flex-end;margin:30px 0 0;
}
.cat-heroi > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.3s var(--ease)}
.cat-heroi:hover > img{transform:scale(1.03)}
.cat-heroi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,8,7,.96) 4%,rgba(10,8,7,.88) 34%,rgba(10,8,7,.48) 64%,rgba(10,8,7,.12) 100%),
    linear-gradient(105deg,rgba(227,6,19,.16) 0%,rgba(10,8,7,0) 55%);
}
.cat-heroi .corpo-heroi{padding:clamp(24px,2.8vw,44px);width:100%}
.cat-heroi .eyebrow{color:#D8C9C9}
.cat-heroi h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,2.6vw,3rem);line-height:1.08;letter-spacing:.004em;
  margin:12px 0 18px;color:#fff;max-width:min(28ch,86%);
  text-shadow:0 2px 22px rgba(10,8,7,.55);
}
.cat-heroi h2 .hl{color:var(--marca-lt)}

/* A grelha e' de TRES colunas, nao quatro como no AutoGear.
   Razao: aqui a pagina tem a coluna de publicidade de 300px ao lado, e com
   quatro colunas os cartoes ficavam a 196px, estreitos demais para o titulo
   sobre a fotografia se ler. Medido em 1600px. */
.cat-grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.cat-grelha > .card .thumb{aspect-ratio:4/3}

/* paginacao: o que diz a Google como percorrer a categoria */
.paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin:52px 0 10px}
.paginacao a,.paginacao span{
  min-width:46px;height:46px;padding:0 14px;display:grid;place-items:center;border-radius:100px;
  font-family:var(--sans);font-size:14px;font-weight:700;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.paginacao a:hover{border-color:var(--line-2);color:var(--text)}
.paginacao .agora{background:var(--marca);border-color:transparent;color:#fff}
.paginacao .reticencias{border-color:transparent;color:var(--muted-2)}
.pag-nota{text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted-2);
  margin:0 0 40px}

/* migalhas: o caminho, e a Google le'-o */
.migalhas{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);padding:18px 0 0}
.migalhas a{color:var(--muted-2)}
.migalhas a:hover{color:var(--marca-txt)}
.migalhas span{margin:0 7px;opacity:.5}

@media (max-width:1280px){.cat-grelha{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .cat-grelha{grid-template-columns:1fr}
  .cat-heroi{min-height:380px}
  .cat-topo h1{font-size:2.3rem}
}

/* ================= autor ================= */
/* ====================== pagina de autor ====================== */
.autor-topo{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;
  padding:34px 0 30px;border-bottom:1px solid var(--line)}
.autor-topo .retrato{width:132px;height:132px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line-2)}
/* O simbolo da marca no lugar da fotografia, para quem nao tem retrato.
   NUNCA usar padding em percentagem aqui: a percentagem conta-se sobre a
   largura do PAI, e no AutoGear isso transformou um circulo de 38px num de
   537px por cima de meia fotografia. 7 de setembro de 2026. */
.autor-topo .retrato.e-simbolo{background:var(--ink-2);object-fit:contain;padding:18px}
.autor-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,3.6vw,4rem);line-height:1.08;letter-spacing:.004em;
  margin:10px 0 14px;color:var(--text);
}
.autor-papel{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marca-txt);margin:0}
.autor-bio{font-family:var(--serif);font-size:clamp(18px,1.4vw,22px);line-height:1.55;
  color:var(--muted);max-width:70ch;margin:0 0 20px;font-variation-settings:"opsz" 40}
.autor-nota{border-left:3px solid var(--marca);border-radius:0 6px 6px 0;
  padding:18px 24px;max-width:70ch;margin:0 0 20px;background:var(--ink-2);
  font-family:var(--sans);font-size:16.5px;line-height:1.6;color:var(--muted)}
.autor-nota strong{color:var(--text)}
.autor-numeros{display:flex;flex-wrap:wrap;gap:12px 30px;font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px}
.autor-numeros b{color:var(--marca-txt)}
.credenciais{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;max-width:70ch}
.credenciais li{position:relative;padding-left:24px;font-family:var(--sans);font-size:15.5px;
  line-height:1.5;color:var(--muted)}
.credenciais li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
  border-radius:50%;background:var(--marca)}
.credenciais li:first-child{color:var(--text);font-weight:600}
.autor-redes{display:flex;flex-wrap:wrap;gap:8px}
.autor-redes a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--line);border-radius:100px;font-family:var(--sans);
  font-size:12.5px;font-weight:600;color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.autor-redes a:hover{border-color:var(--marca);color:var(--marca-txt)}

@media (max-width:680px){
  .autor-topo{grid-template-columns:1fr;gap:20px}
  .autor-topo .retrato{width:96px;height:96px}
  .autor-topo .retrato.e-simbolo{padding:13px}
  .autor-topo h1{font-size:2.1rem}
}

/* ================= ficha tecnica ================= */
/* ====================== ficha tecnica ====================== */
.ficha-topo{padding:36px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px}
.ficha-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,4.2vw,4.6rem);line-height:1.08;letter-spacing:.004em;
  margin:12px 0 16px;color:var(--text);
}
.ficha-lead{font-family:var(--serif);font-size:clamp(18px,1.45vw,23px);line-height:1.5;
  color:var(--muted);max-width:66ch;margin:0;font-variation-settings:"opsz" 40}

.ficha-bloco{margin:0 0 40px}
.ficha-bloco h2{
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--marca-txt);margin:0 0 16px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}

/* a direccao, com retrato */
.ficha-gente{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.ficha-pessoa{display:flex;gap:18px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--ink-2)}
.ficha-pessoa img{width:82px;height:82px;border-radius:50%;object-fit:cover;
  border:2px solid var(--line-2);flex:none}
.ficha-pessoa .cargo{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--marca-txt);margin:0 0 5px}
.ficha-pessoa .quem{font-family:var(--serif);font-weight:600;font-size:20px;
  color:var(--text);margin:0 0 7px;line-height:1.2}
.ficha-pessoa a{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.ficha-pessoa a:hover{color:var(--marca-txt)}
.ficha-pessoa .liga{display:flex;flex-wrap:wrap;gap:6px 14px}

/* as equipas, em lista */
.ficha-lista{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ficha-lista li{font-family:var(--sans);font-size:16.5px;color:var(--muted);
  padding-left:22px;position:relative}
.ficha-lista li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--marca)}

/* os dados da empresa */
.ficha-dados{display:grid;grid-template-columns:auto 1fr;gap:14px 30px;align-items:baseline}
.ficha-dados dt{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.ficha-dados dd{margin:0;font-family:var(--sans);font-size:16.5px;color:var(--text);line-height:1.5}

@media (max-width:680px){
  .ficha-dados{grid-template-columns:1fr;gap:4px 0}
  .ficha-dados dd{margin-bottom:14px}
  .ficha-topo h1{font-size:2.3rem}
}

/* ================= pesquisa ================= */
/* ====================== pagina de pesquisa ======================
   NENHUMA classe aqui se chama `search`. Ver o cabecalho do ficheiro. */
.busca-topo{padding:38px 0 26px}
.busca-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,3vw,3.2rem);line-height:1.08;letter-spacing:.004em;
  margin:12px 0 22px;color:var(--text);
}
.busca-topo h1 em{font-style:normal;color:var(--marca-txt)}
.busca-campo{display:flex;align-items:center;gap:14px;max-width:760px;
  border:1px solid var(--line-2);border-radius:100px;padding:16px 24px;
  background:var(--ink-2);margin-bottom:20px}
/* `min-width:0` obrigatorio: dentro de um flex, um campo de texto nao encolhe
   abaixo da sua largura natural, e num telemovel empurrava o botao Procurar
   para fora do ecra. Apanhado no AutoGear a 7 de setembro de 2026. */
.busca-campo input{flex:1;min-width:0;background:transparent;border:0;outline:none;
  color:var(--text);font-family:var(--sans);font-size:19px}
.busca-campo input::placeholder{color:var(--muted-2)}
.busca-campo svg{width:19px;height:19px;color:var(--muted-2);flex:none}
.busca-campo button{background:var(--marca);border:0;border-radius:100px;color:#fff;
  padding:11px 22px;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;flex:none;
  transition:filter .3s var(--ease)}
.busca-campo button:hover{filter:brightness(1.08)}
.busca-conta{font-family:var(--sans);font-size:15px;color:var(--muted);margin:0 0 20px}
.busca-conta b{color:var(--text)}
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.filtros a{display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.filtros a:hover{border-color:var(--line-2);color:var(--text)}
.filtros a.on{background:var(--marca);border-color:transparent;color:#fff}
.filtros span{font-size:11px;font-weight:700;opacity:.75}
.filtros a.vazio{opacity:.45;pointer-events:none}
.sugestoes{margin-top:34px;padding:26px 30px;border:1px solid var(--line);
  border-radius:10px;background:var(--ink-2)}
.sugestoes h2{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
.sugestoes .lista{display:flex;flex-wrap:wrap;gap:9px}
.sugestoes a{padding:8px 16px;border-radius:100px;border:1px solid var(--line);
  font-family:var(--sans);font-size:13.5px;color:var(--muted);
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.sugestoes a:hover{border-color:var(--marca);color:var(--marca-txt)}

@media (max-width:680px){
  .busca-campo{padding:13px 18px;gap:10px}
  .busca-campo input{font-size:17px}
  .busca-topo h1{font-size:1.9rem}
}