/* ==========================================================================
   Techdicas — folha de estilo principal
   Escrita à mão. Nomes de classe em CamelCase (SUIT), tudo em português.
   ========================================================================== */

/* 1. Tipos de letra próprios ---------------------------------------------- */

@font-face {
	font-family: "TD Titulo";
	src: url("/estatico/tipo/td-titulo.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "TD Corpo";
	src: url("/estatico/tipo/td-corpo.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* 2. Fichas de valores ---------------------------------------------------- */

:root {
	--papel: #ffffff;
	--papel-2: #f6f6f4;
	--papel-3: #ececE8;
	--tinta: #14161a;
	--tinta-2: #4b5159;
	--tinta-3: #82888f;
	--linha: #e4e4e0;
	--acento: #0e7c66;
	--acento-claro: #e6f2ef;
	--alerta: #c2410c;

	--raio: 6px;
	--raio-g: 12px;
	--sombra: 0 1px 2px rgba(20, 22, 26, .06), 0 8px 24px rgba(20, 22, 26, .06);

	--titulo: "TD Titulo", "Chivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--corpo: "TD Corpo", "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--envolve: 1280px;
	--gutter: clamp(16px, 4vw, 40px);
	--ritmo: clamp(40px, 6vw, 72px);

	--cat-telemoveis: #2563eb;
	--cat-portateis: #7c3aed;
	--cat-audio: #db2777;
	--cat-casa-inteligente: #0891b2;
	--cat-wearables: #ca8a04;
	--cat-gaming: #dc2626;
	--cat-televisores: #0e7c66;
	--cat-noticias: #475569;
}

[data-tema="escuro"] {
	--papel: #14161a;
	--papel-2: #1b1e24;
	--papel-3: #242830;
	--tinta: #f4f5f6;
	--tinta-2: #b9bec5;
	--tinta-3: #8d939b;
	--linha: #2b2f37;
	--acento: #3fbf9f;
	--acento-claro: #16302a;
	--sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

/* 3. Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--corpo);
	font-size: 17px;
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--titulo);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 3px;
	border-radius: 2px;
}

.Oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.Salto {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--tinta);
	color: var(--papel);
	border-radius: var(--raio);
	transition: top .2s;
}

.Salto:focus {
	top: 16px;
}

.Envolve {
	width: min(100% - (var(--gutter) * 2), var(--envolve));
	margin-inline: auto;
}

.Envolve--estreito {
	width: min(100% - (var(--gutter) * 2), 760px);
}

.Envolve--largo {
	width: min(100% - (var(--gutter) * 2), 1100px);
}

/* 4. Botões, campos, etiquetas -------------------------------------------- */

.Botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: none;
	color: inherit;
	font: 600 15px/1 var(--titulo);
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}

.Botao--cheio {
	background: var(--tinta);
	color: var(--papel);
}

.Botao--cheio:hover {
	background: var(--acento);
}

.Botao--linha {
	border-color: var(--linha);
}

.Botao--linha:hover {
	border-color: var(--tinta);
	background: var(--papel-2);
}

.Botao--icone {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	color: var(--tinta-2);
}

.Botao--icone:hover {
	background: var(--papel-2);
	color: var(--tinta);
}

.Campo {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--papel);
	color: var(--tinta);
	font: 400 16px/1 var(--corpo);
}

.Campo--area {
	height: auto;
	padding: 12px 14px;
	line-height: 1.5;
}

.Campo::placeholder {
	color: var(--tinta-3);
}

.Campo:focus {
	border-color: var(--acento);
	outline: none;
	box-shadow: 0 0 0 3px var(--acento-claro);
}

.Formulario {
	display: grid;
	gap: 10px;
}

.Formulario--inline,
.Formulario--busca {
	grid-auto-flow: column;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.Formulario--busca {
	position: relative;
	grid-template-columns: 1fr auto;
}

.Formulario--busca .Campo {
	padding-left: 42px;
}

.Formulario--busca > .Icone--lupa {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: .55;
}

.Etiqueta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 22px;
	padding: 0 9px;
	border-radius: 3px;
	background: var(--tinta);
	color: #fff;
	font: 700 11px/1 var(--titulo);
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.Etiqueta[data-cat="telemoveis"] { background: var(--cat-telemoveis); }
.Etiqueta[data-cat="portateis"] { background: var(--cat-portateis); }
.Etiqueta[data-cat="audio"] { background: var(--cat-audio); }
.Etiqueta[data-cat="casa-inteligente"] { background: var(--cat-casa-inteligente); }
.Etiqueta[data-cat="wearables"] { background: var(--cat-wearables); }
.Etiqueta[data-cat="gaming"] { background: var(--cat-gaming); }
.Etiqueta[data-cat="televisores"] { background: var(--cat-televisores); }
.Etiqueta[data-cat="noticias"] { background: var(--cat-noticias); }

.Etiqueta--linha {
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--linha);
	border-radius: 100px;
	background: none;
	color: var(--tinta-2);
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
	font-weight: 600;
}

.Etiqueta--linha:hover {
	border-color: var(--tinta);
	color: var(--tinta);
}

/* 5. Ícones (desenhados em CSS, sem biblioteca externa) -------------------- */

.Icone {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.Icone--menu { -webkit-mask-image: var(--i-menu); mask-image: var(--i-menu); }
.Icone--x { -webkit-mask-image: var(--i-x); mask-image: var(--i-x); }
.Icone--lupa { -webkit-mask-image: var(--i-lupa); mask-image: var(--i-lupa); }
.Icone--lua { -webkit-mask-image: var(--i-lua); mask-image: var(--i-lua); }
.Icone--cima { -webkit-mask-image: var(--i-cima); mask-image: var(--i-cima); }
.Icone--elo { -webkit-mask-image: var(--i-elo); mask-image: var(--i-elo); }
.Icone--rss { -webkit-mask-image: var(--i-rss); mask-image: var(--i-rss); }
.Icone--email { -webkit-mask-image: var(--i-email); mask-image: var(--i-email); }

:root {
	--i-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/></svg>');
	--i-x: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7l1.4-1.4 6.3 6.3 6.3-6.3z"/></svg>');
	--i-lupa: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4.8 4.8-1.4 1.4-4.8-4.8A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z"/></svg>');
	--i-lua: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5z"/></svg>');
	--i-cima: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 5l7 7-1.4 1.4L13 8.8V20h-2V8.8l-4.6 4.6L5 12z"/></svg>');
	--i-elo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.6 13.4a1 1 0 0 1 0-1.4l1.4-1.4a1 1 0 1 1 1.4 1.4l-1.4 1.4a1 1 0 0 1-1.4 0zM8 16a4 4 0 0 1 0-5.7l2.1-2.1 1.4 1.4-2.1 2.1a2 2 0 0 0 2.8 2.8l2.1-2.1 1.4 1.4-2.1 2.1A4 4 0 0 1 8 16zm8-8a4 4 0 0 1 0 5.7l-2.1 2.1-1.4-1.4 2.1-2.1a2 2 0 0 0-2.8-2.8L9.7 11.6 8.3 10.2l2.1-2.1A4 4 0 0 1 16 8z"/></svg>');
	--i-rss: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM3 9.5V12a8.5 8.5 0 0 1 8.5 8.5H14A10.5 10.5 0 0 0 3 9.5zm0-6V6c8 0 14.5 6.5 14.5 14.5H20C20 11.1 12.4 3.5 3 3.5z"/></svg>');
	--i-email: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 8.1 7.5-5.3H4.5zM4 9.2V17h16V9.2l-8 5.7z"/></svg>');
}

/* 6. Cabeçalho ------------------------------------------------------------ */

.Topo {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--papel);
	border-bottom: 1px solid var(--linha);
}

.Topo.is-colada {
	box-shadow: 0 6px 20px rgba(20, 22, 26, .07);
}

.Topo-barra {
	border-bottom: 1px solid var(--linha);
	background: var(--papel-2);
	font-size: 13px;
	color: var(--tinta-3);
}

.Topo-barraInterno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
}

.Topo-hoje {
	margin: 0;
	text-transform: lowercase;
}

.Topo-principal {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 74px;
}

.Topo-esq,
.Topo-dir {
	display: flex;
	align-items: center;
	gap: 6px;
}

.Topo-dir {
	margin-left: auto;
}

.Topo-hamburguer {
	display: none;
}

.Topo-nav {
	flex: 1;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.Topo-promessa {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.Topo-promessa a:hover {
	color: var(--tinta);
}

/* Marca */

.Marca {
	margin: 0;
	font-size: 0;
}

.Marca-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.Marca-glifo {
	display: block;
	width: 30px;
	height: 30px;
	flex: none;
}

.Marca-corpo {
	fill: var(--tinta);
}

.Marca-medida {
	fill: var(--acento);
}

.Marca-nome {
	font: 800 23px/1 var(--titulo);
	letter-spacing: -.035em;
	color: var(--tinta);
}

/* Menu principal */

.Menu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Menu > li {
	position: relative;
}

.Menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--raio);
	font: 600 15px/1 var(--titulo);
	letter-spacing: -.01em;
	color: var(--tinta-2);
	white-space: nowrap;
	transition: color .15s, background-color .15s;
}

.Menu > li > a::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--acento);
	transform: scaleX(0);
	transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}

.Menu > li > a:hover,
.Menu > li.current-menu-item > a,
.Menu > li.current-menu-parent > a,
.Menu > li.current-menu-ancestor > a {
	color: var(--tinta);
}

.Menu > li > a:hover::before,
.Menu > li.current-menu-item > a::before,
.Menu > li.current-menu-parent > a::before,
.Menu > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

.Menu .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .6;
}

.Menu .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--papel);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	box-shadow: var(--sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}

.Menu > li:hover > .sub-menu,
.Menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.Menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--raio);
	font-size: 15px;
	color: var(--tinta-2);
}

.Menu .sub-menu a:hover {
	background: var(--papel-2);
	color: var(--tinta);
}

/* Pesquisa */

.Busca {
	border-top: 1px solid var(--linha);
	background: var(--papel);
	padding: 22px 0 26px;
}

.Busca-interno {
	display: flex;
	align-items: center;
	gap: 12px;
}

.Busca-interno .Formulario {
	flex: 1;
}

.Busca-sugestoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.Busca-rotulo {
	font-size: 13px;
	color: var(--tinta-3);
	margin-right: 4px;
}

/* Gaveta móvel */

.Veu {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(20, 22, 26, .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .25s;
}

.Veu.is-visivel {
	opacity: 1;
}

.Gaveta {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: min(88vw, 340px);
	height: 100dvh;
	padding: 18px var(--gutter) 40px;
	overflow-y: auto;
	background: var(--papel);
	border-right: 1px solid var(--linha);
	transform: translateX(-102%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.Gaveta.is-aberta {
	transform: none;
}

.Gaveta-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--linha);
}

.Gaveta-corpo {
	display: grid;
	gap: 24px;
	padding-top: 20px;
}

.MenuVertical {
	margin: 0;
	padding: 0;
	list-style: none;
}

.MenuVertical li {
	border-bottom: 1px solid var(--linha);
}

.MenuVertical a {
	display: block;
	padding: 12px 0;
	font: 600 17px/1.3 var(--titulo);
}

.MenuVertical .sub-menu {
	margin: 0 0 8px;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 2px solid var(--linha);
}

.MenuVertical .sub-menu li {
	border: 0;
}

.MenuVertical .sub-menu a {
	padding: 7px 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--tinta-2);
}

/* 7. Figuras e cartões ---------------------------------------------------- */

.Fig {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--papel-3);
}

.Fig-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.Fig--paisagem { aspect-ratio: 16 / 10; }
.Fig--quadrado { aspect-ratio: 1 / 1; }
.Fig--alto { aspect-ratio: 3 / 4; }
.Fig--livre { aspect-ratio: auto; height: 100%; }

.Fig--vazia {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--papel-3), var(--papel-2));
}

.Fig-sigla {
	font: 800 28px/1 var(--titulo);
	color: var(--tinta-3);
	letter-spacing: -.04em;
}

.Cartao {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.Cartao-media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--raio);
}

.Cartao:hover .Fig-img {
	transform: scale(1.04);
}

.Cartao-etiqueta {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	display: flex;
}

.Cartao-corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.Cartao-titulo {
	font-size: 19px;
	font-weight: 800;
	margin: 0;
}

.Cartao-titulo--s { font-size: 16px; letter-spacing: -.015em; }
.Cartao-titulo--l { font-size: clamp(20px, 2vw, 24px); }
.Cartao-titulo--xl { font-size: clamp(26px, 3.4vw, 40px); }

.Cartao-link {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .3s;
}

.Cartao-link:hover {
	background-size: 100% 1.5px;
}

.Cartao-resumo {
	margin: 0;
	color: var(--tinta-2);
	font-size: 15.5px;
	line-height: 1.55;
}

/* Meta */

.Meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Meta-avatarImg {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.Meta-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.Meta-autor {
	color: var(--tinta-2);
	font-weight: 600;
}

.Meta-autor:hover {
	color: var(--acento);
}

.Meta-sep {
	opacity: .5;
}

/* Cartão em destaque */

.Cartao--destaque {
	position: relative;
	height: 100%;
	min-height: clamp(380px, 40vw, 500px);
	gap: 0;
	border-radius: var(--raio-g);
	overflow: hidden;
	color: #fff;
}

.Cartao--destaque .Cartao-media {
	position: absolute;
	inset: 0;
	border-radius: 0;
}

.Cartao--destaque .Fig,
.Cartao--destaque .Fig-img {
	height: 100%;
	border-radius: 0;
}

.Cartao-verniz {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 12, 15, .88) 0%, rgba(10, 12, 15, .45) 45%, rgba(10, 12, 15, .05) 100%);
}

.Cartao--destaque .Cartao-corpo {
	position: relative;
	margin-top: auto;
	padding: clamp(20px, 3vw, 32px);
	gap: 12px;
}

.Cartao--destaque .Cartao-resumo,
.Cartao--destaque .Meta,
.Cartao--destaque .Meta-autor {
	color: rgba(255, 255, 255, .82);
}

.Cartao--destaque .Cartao-resumo {
	max-width: 54ch;
}

/* Cartão horizontal */

.Cartao--lista {
	flex-direction: row;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--linha);
}

.Cartao--lista:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.Cartao--lista .Cartao-media {
	width: 110px;
	flex: none;
}

/* Cartão largo */

.Cartao--largo {
	flex-direction: row;
	align-items: center;
	gap: clamp(18px, 3vw, 32px);
	padding: clamp(16px, 2vw, 22px);
	background: var(--papel-2);
	border-radius: var(--raio-g);
}

.Cartao--largo .Cartao-media {
	width: 46%;
	flex: none;
}

/* Cartão numerado */

.Cartao--numerado {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--linha);
}

.Cartao--numerado:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.Cartao--numerado .Cartao-numero {
	font: 800 22px/1 var(--titulo);
	color: var(--linha);
	letter-spacing: -.05em;
}

.Cartao--numerado .Cartao-corpo {
	flex: 1;
}

.Cartao--numerado .Cartao-media {
	width: 62px;
	flex: none;
}

.Cartao--numerado .Etiqueta {
	display: none;
}

/* 8. Secções e grelhas ---------------------------------------------------- */

.Principal {
	display: block;
	padding-bottom: var(--ritmo);
}

.Seccao {
	padding: var(--ritmo) 0 0;
}

.Seccao--fundo {
	margin-top: var(--ritmo);
	padding: var(--ritmo) 0;
	background: var(--papel-2);
}

.Seccao--capa {
	padding-top: clamp(24px, 3vw, 40px);
}

.Seccao-cabeca {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
	padding: 2px 0 16px 16px;
	border-bottom: 1px solid var(--linha);
}

.Seccao-cabeca::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 20px;
	width: 4px;
	border-radius: 4px;
	background: var(--acento);
}

.Seccao-sobre {
	margin: 0 0 4px;
	font: 700 12px/1 var(--titulo);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acento);
}

.Seccao-titulo {
	font-size: clamp(22px, 2.6vw, 30px);
}

.Seccao-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--linha);
	border-radius: 100px;
	font: 600 14px/1 var(--titulo);
	color: var(--tinta-2);
}

.Seccao-link:hover {
	border-color: var(--acento);
	color: var(--acento);
}

.Grelha {
	display: grid;
	gap: clamp(20px, 2.6vw, 34px);
}

.Grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.Grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.Grelha--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Capa */

.Capa {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 34px);
}

.Capa-lado {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
	padding-left: clamp(0px, 1vw, 8px);
}

.Capa-rodadas {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
}

/* Segundo destaque: sem imagem, para a coluna não ficar mais alta do que o herói */

.Cartao--texto {
	gap: 10px;
}

.Cartao--texto .Cartao-resumo {
	font-size: 15px;
}

/* Bloco assimétrico: um destaque e uma coluna de apoio */

.Assimetrica {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 34px);
}

.Assimetrica-lado {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Arquivo em filas */

.Filas {
	display: grid;
	gap: clamp(22px, 2.6vw, 30px);
}

.Cartao--fila {
	flex-direction: row;
	gap: clamp(16px, 2.4vw, 26px);
	padding-bottom: clamp(22px, 2.6vw, 30px);
	border-bottom: 1px solid var(--linha);
}

.Cartao--fila:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.Cartao--fila .Cartao-media {
	width: 38%;
	max-width: 300px;
	flex: none;
}

/* Bloco com lateral */

.Duplo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.Duplo-principal {
	min-width: 0;
}

.Seccao--comLateral {
	padding-top: var(--ritmo);
}

/* Grelha mista: quatro células e uma faixa larga */

.Mista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
}

.Mista-larga {
	grid-column: 1 / -1;
}

.Mais {
	margin: 32px 0 0;
	text-align: center;
}

/* Convite (redes + boletim + metodologia) */

.Convite {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
	align-items: stretch;
}

.Convite-col {
	padding: clamp(22px, 3vw, 34px);
	border-radius: var(--raio-g);
}

.Convite-col--caixa {
	padding: 24px;
	background: var(--papel-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}

.Convite-col--metodo {
	background: var(--acento-claro);
	border-color: transparent;
}

.Convite-titulo {
	font-size: 20px;
	margin-bottom: 8px;
}

.Convite-texto {
	color: var(--tinta-2);
	font-size: 15.5px;
}


/* 9. Coluna lateral ------------------------------------------------------- */

.Lateral {
	min-width: 0;
}

.Lateral-colante {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 36px;
}

.Widget-titulo {
	font-size: 21px;
	margin-bottom: 14px;
}

.Widget-corpo {
	display: grid;
	gap: 4px;
}

.Widget-corpo--caixa {
	padding: 18px 20px;
	background: var(--papel-2);
	border-radius: var(--raio-g);
}

.Widget-texto {
	color: var(--tinta-2);
	font-size: 15px;
}

.Widget--promo {
	padding: 24px;
	background: var(--acento-claro);
	border-radius: var(--raio-g);
}

.ListaCats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ListaCats-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--linha);
	font: 600 16px/1.2 var(--titulo);
}

.ListaCats-link::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--tinta-3);
	margin-right: 2px;
}

.ListaCats-link[data-cat="telemoveis"]::before { background: var(--cat-telemoveis); }
.ListaCats-link[data-cat="portateis"]::before { background: var(--cat-portateis); }
.ListaCats-link[data-cat="audio"]::before { background: var(--cat-audio); }
.ListaCats-link[data-cat="casa-inteligente"]::before { background: var(--cat-casa-inteligente); }
.ListaCats-link[data-cat="wearables"]::before { background: var(--cat-wearables); }
.ListaCats-link[data-cat="gaming"]::before { background: var(--cat-gaming); }
.ListaCats-link[data-cat="televisores"]::before { background: var(--cat-televisores); }

.ListaCats-nome {
	flex: 1;
}

.ListaCats-conta {
	font-size: 13px;
	color: var(--tinta-3);
	font-weight: 500;
}

/* 10. Arquivo ------------------------------------------------------------- */

.Migalhas {
	padding: 18px 0 0;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Migalhas-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Migalhas-item + .Migalhas-item::before {
	content: "/";
	margin-right: 8px;
	opacity: .5;
}

.Migalhas a:hover {
	color: var(--acento);
}

.CabecaArquivo {
	max-width: 760px;
	padding: 26px 0 22px;
}

.CabecaArquivo-titulo {
	font-size: clamp(30px, 4.6vw, 48px);
	margin-bottom: 10px;
}

.CabecaArquivo-desc {
	color: var(--tinta-2);
	font-size: 17.5px;
}

.CabecaArquivo-conta {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--linha);
}

.Arquivo-destaque {
	margin-bottom: clamp(28px, 3.4vw, 40px);
	padding-top: 28px;
}

.Grelha--arquivo {
	row-gap: clamp(28px, 3.4vw, 44px);
}

.Paginacao {
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: 24px;
	border-top: 1px solid var(--linha);
}

.Paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.Paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	font: 600 15px/1 var(--titulo);
	color: var(--tinta-2);
}

.Paginacao .page-numbers:hover {
	border-color: var(--tinta);
	color: var(--tinta);
}

.Paginacao .page-numbers.current {
	background: var(--tinta);
	border-color: var(--tinta);
	color: var(--papel);
}

.Paginacao .dots {
	border-color: transparent;
}

.Vazio {
	padding: 60px 0;
	max-width: 560px;
}

.Vazio-titulo {
	font-size: 28px;
	margin-bottom: 8px;
}

.Vazio-texto {
	color: var(--tinta-2);
}

.Erro {
	padding: clamp(50px, 9vw, 110px) 0;
	max-width: 620px;
}

.Erro-codigo {
	font: 800 clamp(64px, 12vw, 130px)/1 var(--titulo);
	letter-spacing: -.05em;
	color: var(--papel-3);
	margin: 0;
}

.Erro-titulo {
	font-size: clamp(28px, 4vw, 40px);
	margin-bottom: 10px;
}

.Erro-texto {
	color: var(--tinta-2);
	margin-bottom: 20px;
}

/* 11. Artigo -------------------------------------------------------------- */

.Artigo-cabeca {
	max-width: 820px;
	padding: 22px 0 26px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.Artigo-titulo {
	font-size: clamp(32px, 5vw, 54px);
	letter-spacing: -.03em;
	margin: 0;
}

.Artigo-chamada {
	margin: 0;
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.5;
	color: var(--tinta-2);
}

.Artigo-assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding-top: 14px;
	border-top: 1px solid var(--linha);
}

.Artigo-capa {
	margin: 0 auto clamp(30px, 4vw, 48px);
}

.Artigo-capaImg {
	width: 100%;
	border-radius: var(--raio-g);
}

.Artigo-legenda {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Texto {
	font-size: 18.5px;
	line-height: 1.72;
	max-width: 44em;
}

.Texto > * + * {
	margin-top: 1.1em;
}

.Texto h2 {
	font-size: clamp(24px, 3vw, 31px);
	margin-top: 1.7em;
	margin-bottom: .5em;
}

.Texto h3 {
	font-size: clamp(20px, 2.4vw, 24px);
	margin-top: 1.5em;
	margin-bottom: .4em;
}

.Texto a {
	color: var(--acento);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.Texto ul,
.Texto ol {
	padding-left: 1.3em;
}

.Texto li + li {
	margin-top: .4em;
}

.Texto img {
	border-radius: var(--raio);
}

.Texto blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--acento);
	font: 600 clamp(20px, 2.4vw, 24px)/1.45 var(--titulo);
	color: var(--tinta);
}

.Texto blockquote p:last-child {
	margin-bottom: 0;
}

.Texto figure {
	margin: 1.6em 0;
}

.Texto figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Texto table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.Texto th,
.Texto td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--linha);
	text-align: left;
}

.Texto thead th {
	background: var(--papel-2);
	font-family: var(--titulo);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.Texto code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--papel-2);
	font-size: .9em;
}

.Texto pre {
	padding: 16px;
	border-radius: var(--raio);
	background: var(--papel-2);
	overflow-x: auto;
}

/* Partilha */

.Partilha-lista {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Partilha-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--linha);
	border-radius: 100px;
	background: none;
	color: var(--tinta-2);
	font: 600 14px/1 var(--titulo);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

.Partilha-link:hover {
	border-color: var(--tinta);
	color: var(--tinta);
}

.Partilha--rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
	padding: 18px 0;
	border-top: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
}

.Partilha-rotulo {
	font: 700 12px/1 var(--titulo);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-3);
}

.Temas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

.Temas-rotulo {
	font: 700 12px/1 var(--titulo);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-3);
	margin-right: 4px;
}

.Autor {
	display: flex;
	gap: 20px;
	margin-top: 34px;
	padding: 24px;
	background: var(--papel-2);
	border-radius: var(--raio-g);
}

.Autor-foto {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	flex: none;
}

.Autor-nome {
	font-size: 22px;
	margin-bottom: 6px;
}

.Autor-bio {
	color: var(--tinta-2);
	font-size: 15.5px;
}

.Autor-link {
	font: 600 14px/1 var(--titulo);
	color: var(--acento);
}

.Vizinhos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 34px;
}

.Vizinhos-item {
	display: grid;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	transition: border-color .15s, background-color .15s;
}

.Vizinhos-item:hover {
	border-color: var(--tinta);
	background: var(--papel-2);
}

.Vizinhos-item--dir {
	text-align: right;
}

.Vizinhos-rotulo {
	font: 700 11px/1 var(--titulo);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-3);
}

.Vizinhos-titulo {
	font: 700 17px/1.3 var(--titulo);
}

.Relacionados {
	margin-top: clamp(40px, 5vw, 64px);
}

/* Comentários */

.Comentarios {
	margin-top: clamp(40px, 5vw, 64px);
}

.Comentarios-titulo {
	font-size: 24px;
	margin-bottom: 18px;
}

.Comentarios-lista,
.Comentarios-lista .children {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.Comentarios-lista .children {
	margin: 18px 0 0 24px;
	padding-left: 18px;
	border-left: 2px solid var(--linha);
}

.Comentarios-lista .comment-body {
	padding: 18px 0;
	border-bottom: 1px solid var(--linha);
}

.Comentarios-lista .avatar {
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

.Formulario--comentario label {
	display: block;
	font: 600 14px/1 var(--titulo);
	margin-bottom: 6px;
}


/* 11-b. Blocos do artigo: resposta rápida, índice, FAQ, fontes -------------- */

.Resposta {
	display: grid;
	gap: 6px;
	margin: 0 0 clamp(24px, 3vw, 32px);
	padding: clamp(18px, 2.4vw, 24px);
	background: var(--acento-claro);
	border-left: 4px solid var(--acento);
	border-radius: 0 var(--raio-g) var(--raio-g) 0;
}

.Resposta-rotulo {
	margin: 0;
	font: 700 12px/1 var(--titulo);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acento);
}

.Resposta-texto {
	margin: 0;
	font-size: clamp(17px, 1.9vw, 19px);
	line-height: 1.55;
	font-weight: 500;
}

.Indice {
	margin: 0 0 clamp(26px, 3vw, 36px);
	padding: 20px 22px;
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: var(--papel-2);
}

.Indice-titulo {
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.Indice-lista {
	counter-reset: indice;
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 28px;
}

.Indice-item {
	break-inside: avoid;
	margin-bottom: 7px;
	font-size: 15.5px;
}

.Indice-item--n3 {
	padding-left: 16px;
	font-size: 14.5px;
}

.Indice-link {
	color: var(--tinta-2);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color .15s, color .15s;
}

.Indice-link:hover {
	color: var(--acento);
	text-decoration-color: currentColor;
}

.Texto-ancora {
	scroll-margin-top: 110px;
}

.Faq {
	margin-top: clamp(34px, 4vw, 48px);
}

.Faq-titulo {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-bottom: 14px;
}

.Faq-item {
	border-bottom: 1px solid var(--linha);
}

.Faq-item:first-of-type {
	border-top: 1px solid var(--linha);
}

.Faq-pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 0;
	font: 700 17.5px/1.35 var(--titulo);
	cursor: pointer;
	list-style: none;
}

.Faq-pergunta::-webkit-details-marker {
	display: none;
}

.Faq-pergunta::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--tinta-3);
	border-bottom: 2px solid var(--tinta-3);
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s;
}

.Faq-item[open] .Faq-pergunta::after {
	transform: translateY(2px) rotate(-135deg);
}

.Faq-resposta {
	padding: 0 0 16px;
	color: var(--tinta-2);
	max-width: 62ch;
}

.Faq-resposta p {
	margin: 0;
}

.Fontes {
	margin-top: clamp(30px, 3.4vw, 40px);
	padding: clamp(20px, 2.4vw, 26px);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}

.Fontes-titulo {
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.Fontes-lista {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Fontes-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-weight: 600;
	color: var(--tinta);
}

.Fontes-link:hover {
	color: var(--acento);
}

.Fontes-dominio {
	font-weight: 400;
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Avatar {
	border-radius: 50%;
	background: var(--papel-3);
}

/* 12. Faixa de compromisso e rodapé --------------------------------------- */

.Compromisso {
	margin-top: var(--ritmo);
	padding: clamp(32px, 5vw, 56px) 0;
	background: var(--tinta);
	color: var(--papel);
}

.Compromisso-interno {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
}

.Compromisso .Seccao-sobre {
	color: var(--acento);
}

[data-tema="escuro"] .Compromisso {
	border-top: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
}

.Compromisso-nota {
	margin: 8px 0 0;
	font-size: 14px;
	opacity: .65;
}

.Rodape {
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--linha);
	background: var(--papel);
}

.Rodape-topo {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	padding-bottom: 40px;
}

.Rodape-desc {
	margin: 14px 0 16px;
	max-width: 42ch;
	color: var(--tinta-2);
	font-size: 15.5px;
}

.Rodape-titulo {
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.MenuRodape {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
}

.MenuRodape a {
	color: var(--tinta-2);
}

.MenuRodape a:hover {
	color: var(--acento);
}

.Rodape-fundo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 0 26px;
	border-top: 1px solid var(--linha);
	font-size: 13.5px;
	color: var(--tinta-3);
}

.Rodape-fundo p {
	margin: 0;
}

.Rodape-aviso {
	max-width: 58ch;
}

.Subir {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--linha);
	border-radius: 50%;
	background: var(--papel);
	color: var(--tinta-2);
	cursor: pointer;
	box-shadow: var(--sombra);
}

/* 13. Adaptação a ecrãs pequenos ------------------------------------------ */

@media (max-width: 1100px) {
	.Duplo {
		grid-template-columns: minmax(0, 1fr);
	}

	.Lateral-colante {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.Topo-nav {
		display: none;
	}

	.Topo-hamburguer {
		display: grid;
	}

	.Grelha--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.Assimetrica {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.Capa {
		grid-template-columns: minmax(0, 1fr);
	}

	.Cartao--destaque {
		min-height: 360px;
	}

	.Convite,
	.Grelha--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.Topo-promessa {
		display: none;
	}

	.Compromisso-interno,
	.Rodape-topo {
		grid-template-columns: minmax(0, 1fr);
	}

	.Topo-barra {
		display: none;
	}

	.Topo-cta {
		display: none;
	}
}

@media (max-width: 680px) {
	body {
		font-size: 16px;
	}

	.Grelha--2,
	.Grelha--4,
	.Mista,
	.Vizinhos,
	.Lateral-colante {
		grid-template-columns: minmax(0, 1fr);
	}

	.Cartao--largo {
		flex-direction: column;
		align-items: stretch;
	}

	.Cartao--largo .Cartao-media {
		width: 100%;
	}

	.Cartao--lista .Cartao-media {
		width: 92px;
	}

	.Cartao--fila {
		flex-direction: column;
	}

	.Cartao--fila .Cartao-media {
		width: 100%;
		max-width: none;
	}

	.Indice-lista {
		columns: 1;
	}

	.Autor {
		flex-direction: column;
	}

	.Vizinhos-item--dir {
		text-align: left;
	}

	.Formulario--inline,
	.Formulario--busca {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}

	.Texto {
		font-size: 17px;
	}
}

/* 14. Preferências do utilizador ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.Topo,
	.Lateral,
	.Rodape,
	.Compromisso,
	.Partilha,
	.Subir {
		display: none !important;
	}
}


/* Faixa de compromisso editorial (rodapé) */

.Compromisso-accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.Botao--claro {
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

.Botao--claro:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .08);
}

[data-tema="escuro"] .Botao--claro {
	border-color: var(--linha);
	color: var(--tinta);
}

.Compromisso .Botao--cheio {
	background: var(--acento);
	color: #fff;
}

.Compromisso .Botao--cheio:hover {
	filter: brightness(1.08);
}

/* Critérios de teste na capa */

.Criterios {
	display: grid;
	gap: 9px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
	color: var(--tinta-2);
}

.Criterios-item {
	display: flex;
	gap: 9px;
	line-height: 1.45;
}

.Criterios-item::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 8px;
	border-radius: 2px;
	background: var(--acento);
}

/* Correções vindas do teste em telemóvel */

.Tabela {
	max-width: 100%;
	margin: 1.6em 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.Tabela table {
	margin: 0;
	min-width: 460px;
}

.Tabela:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}

@media (max-width: 680px) {
	/* A migalha da página atual repete o título que está logo a seguir. */
	.Migalhas-item:last-child {
		display: none;
	}

	/* Alvos de toque: o índice é navegação a sério, não texto corrido. */
	.Indice-item {
		margin-bottom: 2px;
	}

	.Indice-link {
		display: block;
		padding: 7px 0;
	}

	.Etiqueta {
		height: 24px;
	}

	.Partilha-link {
		height: 40px;
		min-width: 40px;
	}

	/* O botão de subir tem de respeitar a margem do ecrã. */
	.Subir {
		right: 14px;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

/* Formulário de comentários ------------------------------------------------ */

.Comentarios {
	padding-top: clamp(28px, 3.4vw, 40px);
	border-top: 1px solid var(--linha);
}

.Formulario--comentario {
	/* Grelha de três colunas: nome, email e site ficam na mesma linha, o resto atravessa. */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 8px;
	padding: clamp(20px, 3vw, 28px);
	background: var(--papel-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-g);
}

.Formulario--comentario > p {
	grid-column: 1 / -1;
	margin: 0;
}

.Formulario--comentario .comment-form-author { grid-column: 1; }
.Formulario--comentario .comment-form-email { grid-column: 2; }
.Formulario--comentario .comment-form-url { grid-column: 3; }

.Formulario--comentario .comment-notes {
	font-size: 14px;
	color: var(--tinta-3);
}

.Formulario--comentario label {
	display: block;
	margin-bottom: 6px;
	font: 600 13px/1 var(--titulo);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tinta-2);
}

.Formulario--comentario input[type="text"],
.Formulario--comentario input[type="email"],
.Formulario--comentario input[type="url"],
.Formulario--comentario textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: var(--papel);
	color: var(--tinta);
	font: 400 16px/1.5 var(--corpo);
}

.Formulario--comentario input:focus,
.Formulario--comentario textarea:focus {
	border-color: var(--acento);
	outline: none;
	box-shadow: 0 0 0 3px var(--acento-claro);
}

.Formulario--comentario .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--tinta-2);
}

.Formulario--comentario .comment-form-cookies-consent input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--acento);
}

.Formulario--comentario .comment-form-cookies-consent label {
	margin: 0;
	font: 400 14px/1.45 var(--corpo);
	letter-spacing: 0;
	text-transform: none;
	color: var(--tinta-2);
}

.Formulario--comentario .form-submit {
	margin-top: 4px;
}

.Formulario--comentario input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 100px;
	background: var(--tinta);
	color: var(--papel);
	font: 600 15px/1 var(--titulo);
	cursor: pointer;
	transition: background-color .18s;
}

.Formulario--comentario input[type="submit"]:hover {
	background: var(--acento);
}

.Comentarios-lista .comment-body {
	padding: 18px 20px;
	margin-bottom: 12px;
	border: 1px solid var(--linha);
	border-bottom: 1px solid var(--linha);
	border-radius: var(--raio-g);
	background: var(--papel);
}

.Comentarios-lista .comment-meta {
	font-size: 13.5px;
	color: var(--tinta-3);
	margin-bottom: 8px;
}

.Comentarios-lista .reply {
	margin-top: 10px;
	font: 600 14px/1 var(--titulo);
}

.Comentarios-lista .reply a {
	color: var(--acento);
}

@media (max-width: 680px) {
	.Formulario--comentario {
		grid-template-columns: minmax(0, 1fr);
	}

	.Formulario--comentario .comment-form-author,
	.Formulario--comentario .comment-form-email,
	.Formulario--comentario .comment-form-url {
		grid-column: 1 / -1;
	}
}

/* Herói do artigo: imagem a toda a largura com o título sobreposto -------- */

.Heroi {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(400px, 56vh, 600px);
	margin-bottom: clamp(26px, 3.4vw, 40px);
	overflow: hidden;
	color: #fff;
	background: var(--papel-3);
}

.Heroi-media {
	position: absolute;
	inset: 0;
}

.Heroi-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.Heroi-verniz {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 10, 12, .92) 0%, rgba(8, 10, 12, .64) 42%, rgba(8, 10, 12, .16) 100%);
}

.Heroi-corpo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(30px, 6vw, 64px) 0 clamp(24px, 3.4vw, 40px);
}

.Heroi-titulo {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(30px, 5.2vw, 56px);
	letter-spacing: -.03em;
	color: #fff;
}

.Heroi-chamada {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(17px, 1.9vw, 21px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}

.Heroi .Migalhas {
	padding-top: 0;
	color: rgba(255, 255, 255, .72);
}

.Heroi .Migalhas a:hover {
	color: #fff;
}

.Heroi-assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.Heroi .Meta,
.Heroi .Meta-autor,
.Heroi .Meta-comentarios {
	color: rgba(255, 255, 255, .82);
}

.Heroi .Meta-autor:hover {
	color: #fff;
}

.Heroi .Partilha-link {
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
}

.Heroi .Partilha-link:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.Heroi-legenda {
	margin: 0 auto clamp(24px, 3vw, 34px);
	font-size: 13.5px;
	color: var(--tinta-3);
}

@media (max-width: 680px) {
	.Heroi {
		min-height: 0;
		align-items: stretch;
		flex-direction: column;
		color: var(--tinta);
		background: none;
	}

	/* Em telemóvel a imagem fica por cima e o texto por baixo: lê-se melhor. */
	.Heroi-media {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
	}

	.Heroi-verniz {
		display: none;
	}

	.Heroi-corpo {
		padding: 18px 0 0;
	}

	.Heroi-titulo,
	.Heroi-chamada {
		color: inherit;
		max-width: none;
	}

	.Heroi-chamada {
		color: var(--tinta-2);
	}

	.Heroi .Migalhas {
		color: var(--tinta-3);
	}

	.Heroi-assinatura {
		border-top-color: var(--linha);
	}

	.Heroi .Meta,
	.Heroi .Meta-autor,
	.Heroi .Meta-comentarios {
		color: var(--tinta-3);
	}

	.Heroi .Partilha-link {
		border-color: var(--linha);
		color: var(--tinta-2);
	}
}

/* Fachada da capa: o h1 do site, visível e com conteúdo próprio ----------- */

.Fachada {
	padding: clamp(22px, 3vw, 34px) 0 0;
}

.Fachada-interno {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding-bottom: clamp(18px, 2.4vw, 26px);
	border-bottom: 1px solid var(--linha);
}

.Fachada-sobre {
	margin: 0;
	font: 700 12px/1 var(--titulo);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acento);
}

.Fachada-titulo {
	margin: 0;
	max-width: 24ch;
	font-size: clamp(24px, 3.2vw, 36px);
	letter-spacing: -.025em;
}

.Fachada-nota {
	margin: 0;
	max-width: 56ch;
	color: var(--tinta-2);
	font-size: clamp(15px, 1.7vw, 17px);
}

@media (min-width: 901px) {
	/* Em ecrã largo o manifesto fica ao lado da nota, sem roubar altura ao herói. */
	.Fachada-interno {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		grid-template-areas: "sobre nota" "titulo nota";
		align-items: end;
		column-gap: clamp(24px, 4vw, 56px);
		row-gap: 4px;
	}

	.Fachada-sobre { grid-area: sobre; }
	.Fachada-titulo { grid-area: titulo; max-width: none; }
	.Fachada-nota { grid-area: nota; padding-bottom: 4px; }
}