:root{
  --ink:#0E0B09; --ink-2:#161211; --ink-3:#1E1917;
  --line:rgba(245,240,234,.10); --line-2:rgba(245,240,234,.18);
  --text:#F5F0EA; --muted:#A0958B; --muted-2:#776D65;
  --orange:#E84E0F; --orange-lt:#FF6E2C; --orange-dk:#7E2705;
  --orange-txt:#E84E0F;          /* laranja para texto sobre a superficie */
  --orange-sec:#BE5B31;          /* laranja esbatido dos titulos de seccao */
  --nav-bg:rgba(14,11,9,.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:#FAF8F6; --ink-2:rgba(38,26,19,.045); --ink-3:rgba(38,26,19,.08);
  --line:rgba(30,21,16,.13); --line-2:rgba(30,21,16,.24);
  --text:#17120F; --muted:#6B605A; --muted-2:#95897F;
  --orange-txt:#BE3D08;
  --orange-sec:#B05628;
  --nav-bg:rgba(250,248,246,.86);
  --grad-claro:linear-gradient(135deg,
    rgba(232,78,15,.30) 0%, rgba(232,78,15,.19) 22%,
    rgba(232,78,15,.10) 46%, rgba(232,78,15,.035) 72%,
    rgba(232,78,15,0) 100%);
}
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(--orange-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(--orange) 0%,var(--orange-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}
.brand img.wordmark{height:38px;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(--orange);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(--orange);color:var(--orange-txt)}
/* `search` e uma classe que o WordPress poe no <body> das paginas de
   resultados. Chamar `search` a caixa de procura do cabecalho fazia a regra
   acertar no body inteiro: a pagina de pesquisa ficava com display:flex ao
   largo, e num telemovel ficava em branco, escondida pela regra dos 680px.
   Prefixar sempre. Apanhado a 7 de setembro de 2026, com o site ja no ar. */
.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;
}

/* ---------- 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;
  font-size:clamp(2.1rem,3.5vw,4.3rem);line-height:1.03;letter-spacing:.004em;
  color:#fff;margin:12px 0 18px;text-shadow:0 2px 22px rgba(10,8,7,.5);
}
.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(--orange);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(--orange),var(--orange-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(--orange-lt);font-variation-settings:normal;
}
html.claro.sec-anton .sec-title h2{color:var(--orange)}
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(--orange-sec);font-variation-settings:normal;
}
html.sec-esbatido .sec-title::before{width:30px;height:3px;
  background:linear-gradient(90deg,var(--orange-sec),var(--orange-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(--orange-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(12px,6.9cqi,25px);line-height:1.08;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;
}
/* "Em destaque" e "Últimas" sao janelas e nao gavetas, mas ficam a LARANJA
   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(--orange-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 a
   7 de setembro de 2026, no cartao do Porsche assinado por Ricardo Carvalho.
   Abaixo de 260px sai o tempo de leitura, que e a peca menos importante das
   tres, e o nome fica com espaco. Acima disso, se ainda assim nao couber, o
   nome corta-se com reticencias em vez de partir a linha. */
.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(17px,6.4cqi,46px);-webkit-line-clamp:4}
.rail-top .punch-t{font-size:clamp(13px,6.6cqi,27px)}

/* 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}
.num{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1;
  color:var(--orange-lt);font-variation-settings:"opsz" 90;margin-bottom:10px}
html.claro .num{color:var(--orange)}   /* 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(--orange);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(--orange);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(--orange),var(--orange-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(--orange) 0%,var(--orange-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(--orange) 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(--orange-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:1420px){.g-seccoes{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}
}
@media (max-width:1699px){
  .ultimas > a:nth-child(n+6){display:none}
}
@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}
  .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}
  .cab-busca,.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}
}

/* ======= FASE B ==========================================================
   O CSS das cinco paginas interiores, vindo da maqueta tal como estava.

   Cada gerador da maqueta tinha o seu bloco proprio. Verificado a 7 de
   setembro de 2026 antes de juntar: ZERO seletores repetidos entre os
   quatro blocos. A regra de prefixar nomes novos, que esta nas notas do
   projecto, e a razao de isto ter corrido bem.
   ====================================================================== */

/* ----------------------------------------------------------------------
   ARTIGO, de maqueta/build_artigo.py
   ---------------------------------------------------------------------- */
/* ====================== pagina de artigo ====================== */
.progresso{position:fixed;left:0;top:0;height:3px;z-index:60;width:0;
  background:linear-gradient(90deg,var(--orange-lt),var(--orange));
  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(--orange-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}
.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(--orange-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(--orange);color:var(--orange-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(--orange);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(--orange-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(--orange)}
.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(--orange-sec);margin:38px 0 16px;scroll-margin-top:90px;
}
.corpo h2:first-child{margin-top:0}
.corpo a{color:var(--orange-txt);border-bottom:1px solid var(--line-2)}

.citacao{margin:32px 0;padding:4px 0 4px 26px;border-left:3px solid var(--orange)}
.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)}

.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(--orange-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(--orange);color:var(--orange-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(--orange-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(--orange-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(--orange)}

.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, de maqueta/build_categoria.py
   ---------------------------------------------------------------------- */
/* ====================== 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;letter-spacing:.004em;
  margin:12px 0 18px;color:var(--text);
}
.cat-topo h1 .hl{color:var(--orange-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(--orange-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(--orange);color:var(--orange-txt)}
.subcats span{font-size:11px;font-weight:700;color:var(--muted-2)}

/* destaque da categoria: o heroi que ja foi aprovado */
.cat-heroi{
  position:relative;border-radius:6px;overflow:hidden;isolation:isolate;
  min-height:clamp(400px,38vw,640px);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(232,78,15,.16) 0%,rgba(10,8,7,0) 55%);
}
.cat-heroi .corpo-heroi{padding:clamp(24px,2.8vw,48px);width:100%}
.cat-heroi .eyebrow{color:#CFC4B9}
.cat-heroi h2{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,2.9vw,3.3rem);line-height:1.06;letter-spacing:.004em;
  margin:12px 0 18px;color:#fff;max-width:min(28ch,80%);
  text-shadow:0 2px 22px rgba(10,8,7,.55);
}
.cat-heroi h2 .hl{color:var(--orange-lt)}

/* grelha da categoria */
.cat-grelha{display:grid;grid-template-columns:repeat(4,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(--orange);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}

@media (max-width:1100px){.cat-grelha{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .cat-grelha{grid-template-columns:1fr}
  .cat-heroi{min-height:380px}
}

/* ----------------------------------------------------------------------
   AUTOR E PESQUISA, de maqueta/build_autor_pesquisa.py
   ---------------------------------------------------------------------- */
/* ====================== 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)}
.autor-topo h1{
  font-family:var(--punch);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,3.6vw,4rem);line-height:1;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(--orange-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-falta{border:1px dashed var(--line-2);border-radius:6px;padding:20px 24px;
  max-width:70ch;margin:0 0 20px;font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--muted-2)}
.autor-falta strong{color:var(--text)}
.autor-nota{border-left:3px solid var(--orange);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(--orange-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(--orange)}
.credenciais li:first-child{color:var(--text);font-weight:600}
.autor-redes{display:flex;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(--orange);color:var(--orange-txt)}
.autor-redes svg{width:14px;height:14px}

/* ====================== pagina de pesquisa ====================== */
.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.06;letter-spacing:.004em;
  margin:12px 0 22px;color:var(--text);
}
.busca-topo h1 em{font-style:normal;color:var(--orange-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 25px para fora do ecra. 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(--orange);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{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:all .3s var(--ease)}
.filtros a:hover{border-color:var(--line-2);color:var(--text)}
.filtros a.on{background:var(--orange);border-color:transparent;color:#fff}
.sugestoes{margin-top:34px;padding:26px 30px;border:1px solid var(--line);
  border-radius:6px;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(--orange);color:var(--orange-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}
  .busca-campo{padding:13px 18px}
  .busca-campo input{font-size:17px}
}

/* ======= AJUSTES DO TEMA ==================================================
   O QUE ESTA AQUI NAO VEM DA MAQUETA. Sao correcoes que so fazem sentido
   com conteudo real, e que a maqueta nao podia ter previsto porque tinha
   sempre os dados todos. Manter separado, para se saber sempre o que e da
   maqueta e o que e daqui.
   ====================================================================== */

/* Sem indice lateral, o texto do artigo ocupa a largura toda.
   Na maqueta a coluna da direita tinha sempre o indice e um lugar de
   anuncio. O anuncio saiu por decisao do cliente a 7 de setembro de 2026, e
   o indice so existe em artigos que a camada editorial ja tratou. Num artigo
   sem subtitulos sobravam 400 pixeis de coluna vazia. */
.art-grelha.sem-lado{grid-template-columns:minmax(0,1fr)}
html.art-fluido .art-grelha.sem-lado{grid-template-columns:minmax(0,1fr)}

/* A fotografia do heroi do artigo entra como FUNDO e nao como <img>.
   O plugin SmartFrame Images troca qualquer <img> de imagem destacada por um
   visualizador proprio, e faz isso dentro do browser, depois de a pagina
   chegar. Sem <img> nao ha nada para ele trocar, e o plugin continua a
   trabalhar dentro do texto do artigo, que e onde a proteccao faz sentido.
   Apanhado a 7 de setembro de 2026. */
.art-heroi.com-fundo{background-size:cover;background-position:center}

/* A pagina do directo de Formula 1.
   O iframe ocupa toda a altura que sobra depois do cabecalho, com um minimo
   para nao ficar uma nesga em ecras baixos. Hoje, no site antigo, esta
   pagina e um iframe em ecra inteiro sem maneira de voltar ao site. */
.f1-directo{background:#000}
.f1-directo > iframe{display:block;width:100%;border:0;height:calc(100vh - 168px);min-height:520px}
@media (max-width:1024px){ .f1-directo > iframe{height:calc(100vh - 132px)} }
@media (max-width:600px){  .f1-directo > iframe{height:calc(100vh - 108px);min-height:460px} }

/* Uma biografia com mais do que um paragrafo.
   A da conta "Redacao" tem tres, um por cada responsavel, e sem separacao
   sairia tudo num bloco corrido. */
.autor-bio > p{margin:0 0 .8em}
.autor-bio > p:last-child{margin-bottom:0}
.caixa-autor p + p{margin-top:.7em}

/* As paginas fixas: ficha tecnica, estatuto editorial, legal.
   Sem heroi e sem fotografia. O titulo em Anton, como as seccoes, e o texto
   com a mesma medida do artigo, para se ler bem. */
.pag-topo{padding:34px 0 8px;border-bottom:1px solid var(--line);margin-bottom:30px}
.pag-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:0 0 10px;color:var(--text);
}
.pag-data{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 18px}
.pag-fixa .corpo h2{margin-top:1.6em}
.pag-fixa .corpo p{margin:0 0 1em}
.pag-fixa .corpo a{color:var(--orange-txt);border-bottom:1px solid var(--line-2)}
.pag-fixa .corpo a:hover{border-bottom-color:var(--orange)}
.pag-fixa .corpo ul{margin:0 0 1.2em;padding-left:0;list-style:none}
.pag-fixa .corpo li{position:relative;padding-left:20px;margin-bottom:.5em}
.pag-fixa .corpo li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--orange)}

/* O simbolo Ag e um logotipo e uma fotografia e uma cara: nao se mostram da
   mesma maneira dentro do mesmo circulo. A cara enche-o; o simbolo fica com
   um pouco de espaco a volta e o fundo escuro da marca. */
/* NUNCA usar padding em percentagem aqui.
   A percentagem de um padding conta-se sobre a largura do PAI, nao da
   propria imagem. Na maqueta o pai era estreito e ninguem deu por isso; no
   artigo o pai e a largura toda da pagina, e os 16% viraram 268px de cada
   lado: o simbolo virou um circulo de 537px por cima de meia fotografia.
   Apanhado a 7 de setembro de 2026, com o site ja no ar.
   Os valores em px sao a mesma proporcao de sempre, para cada tamanho. */
.retrato.e-simbolo, .av.e-simbolo{background:var(--ink-2);object-fit:contain}
.assinatura .av.e-simbolo{padding:6px}
.caixa-autor .av.e-simbolo{padding:10px}
.autor-topo .retrato.e-simbolo{padding:18px}

/* 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-para-leitores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* As redes da marca, no rodape.
   A maqueta esqueceu-se delas. Descoberto a 7 de setembro de 2026, na
   verificacao antes de ligar o tema: o site antigo tinha Facebook, Instagram
   e X, e o novo so tinha o YouTube. */
.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),background-color .3s var(--ease);
}
.foot-redes a:hover{border-color:var(--orange);color:#fff;background:var(--orange)}
.foot-redes svg{width:17px;height:17px}