/*
Theme Name: Ginjavia
Theme URI: https://ginjavia.org/
Author: Ginjavia — Sumos e Distribuicao, Lda.
Author URI: https://ginjavia.org/
Description: Tema do armazem de sumos de ginja e cereja de Alcobaca. Fala em litros por semana, formato de embalagem, prazo depois de aberto e dia de rota. Duas ferramentas proprias: Formato Certo e Ritmo de Entrega.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ginjavia
Tags: business, dark, wholesale, portugal
*/

/* =========================================================================
   1. Letras
   -------------------------------------------------------------------------
   Os ficheiros estao dentro do tema. O navegador de quem visita nunca fala
   com um servidor de fora, e por isso a pagina de cookies pode dizer que nao
   ha pedido nenhum para fora desta casa.
   Subconjunto latin apenas: para portugues o latin-ext nao acrescenta um
   unico sinal usado, foi verificado sinal a sinal antes de escolher.
   ========================================================================= */

@font-face {
	font-family: 'Big Shoulders';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/big-shoulders-700-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/barlow-400-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/barlow-500-latin.woff2') format('woff2');
}

/* =========================================================================
   2. Cores
   -------------------------------------------------------------------------
   Contrastes contados com _gereedschap/contrast.py nos dois sentidos e
   tambem sobre o painel, antes de existir uma linha de maquetacao.

   --cinta   1,47:1 no fundo e 1,32:1 no painel  -> so risco e enchimento
   --ginja   1,67:1 no fundo e 1,50:1 no painel  -> so enchimento, NUNCA letra
   --aresta  3,48:1 no fundo e 3,12:1 no painel  -> risco que se tem de ver
   --bruma   7,90:1 no fundo e 7,08:1 no painel
   --carga   9,81:1 no fundo e 8,79:1 no painel
   --frio    8,17:1 no fundo e 7,32:1 no painel
   --cal    14,51:1 no fundo e 13,01:1 no painel

   Ao contrario: --cal sobre --ginja da 8,67:1 e --carga sobre --ginja da
   5,86:1, ou seja o enchimento carrega letras sem problema. O que nao pode
   e ser letra. Ha uma prova no wp_stub_test.php que le este ficheiro, procura
   as declaracoes color: e cai se --ginja ou --cinta aparecerem la dentro.
   ========================================================================= */

:root {
	--ardosia: #1d1b24;
	--fundura: #16151c;
	--tabuleiro: #262430;
	--cinta: #3a3748;
	--aresta: #726e88;
	--cal: #eeecf2;
	--bruma: #b3aec2;
	--carga: #e6c229;
	--frio: #93b8d8;
	--ginja: #7d1a33;

	--letra-titulo: 'Big Shoulders', 'Arial Narrow', sans-serif;
	--letra-corpo: 'Barlow', 'Segoe UI', system-ui, sans-serif;

	--porta: 76px;
	--folga: clamp(2.6rem, 5vw, 4.6rem);
	--largura: 1180px;
	--curva: 3px;
}

/* =========================================================================
   3. Base
   ========================================================================= */

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

/* O atributo hidden perde para qualquer classe que ponha display. Sem esta
   linha um botao marcado como escondido continua a ver-se. */
[hidden] {
	display: none !important;
}

html {
	scroll-padding-top: calc(var(--porta) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ardosia);
	color: var(--cal);
	font-family: var(--letra-corpo);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.66;
	letter-spacing: 0.005em;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-family: var(--letra-titulo);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0.012em;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2.9rem, 7vw, 5.1rem);
}

h2 {
	font-size: clamp(2.2rem, 4.6vw, 3.5rem);
}

h3 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

h4 {
	font-size: 1.25rem;
}

p {
	margin: 0 0 1.15em;
}

a {
	color: var(--frio);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--carga);
}

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

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

hr {
	border: 0;
	border-top: 1px solid var(--cinta);
	margin: var(--folga) 0;
}

::selection {
	background: var(--carga);
	color: var(--ardosia);
}

/* So para quem le com leitor de ecra. */
.abafado {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.abafado--foco:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 90;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	background: var(--carga);
	color: var(--ardosia);
	font-weight: 500;
	border-radius: var(--curva);
}

/* Aparecer ao rolar. So com javascript ligado: a classe js e escrita por um
   script em linha dentro do head. Sem javascript nada tem opacity zero, senao
   a pagina fica em branco para quem desliga scripts. */
.js .descarrega {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .descarrega.descarrega--dentro {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .descarrega {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   4. Caixa e seccao
   ========================================================================= */

.armazem {
	width: min(100% - 2.6rem, var(--largura));
	margin-inline: auto;
}

.armazem--estreito {
	width: min(100% - 2.6rem, 780px);
}

.doca {
	padding-block: var(--folga);
}

.doca--fundo {
	background: var(--ardosia);
}

.doca--painel {
	background: var(--tabuleiro);
}

.doca--curto {
	padding-block: calc(var(--folga) * 0.55);
}

.doca__intro {
	max-width: 62ch;
	margin-bottom: 2.4rem;
}

.doca__sobre {
	display: block;
	margin: 0 0 0.7rem;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--carga);
}

.doca__resumo {
	color: var(--bruma);
	font-size: 1.08rem;
}

.centrado {
	text-align: center;
}

.folgacima {
	margin-top: 2rem;
}

.folgacima--larga {
	margin-top: 2.4rem;
}

.molduranotas {
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

/* =========================================================================
   5. Botao
   ========================================================================= */

.gancho {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.7rem 1.6rem;
	border: 2px solid var(--carga);
	border-radius: var(--curva);
	background: var(--carga);
	color: var(--ardosia);
	font-family: var(--letra-titulo);
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.gancho:hover,
.gancho:focus-visible {
	background: var(--ardosia);
	color: var(--carga);
}

.gancho--calmo {
	background: transparent;
	border-color: var(--aresta);
	color: var(--cal);
}

.gancho--calmo:hover,
.gancho--calmo:focus-visible {
	background: transparent;
	border-color: var(--frio);
	color: var(--frio);
}

.gancho--curto {
	min-height: 40px;
	padding: 0.35rem 1rem;
	font-size: 1rem;
}

/* =========================================================================
   6. Portico e corredor
   ========================================================================= */

.portico {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--fundura);
	border-bottom: 1px solid var(--cinta);
}

.portico__linha {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	min-height: var(--porta);
}

.portico__nome {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.2rem 0;
	font-family: var(--letra-titulo);
	font-size: 2.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.portico__nome:hover,
.portico__nome:focus-visible {
	color: inherit;
}

.portico__nome span {
	display: inline-block;
}

.portico__marca {
	color: var(--carga);
}

.portico__cauda {
	color: var(--cal);
}

.corredor {
	margin-left: auto;
}

.corredor__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.95rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corredor__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.2rem 0.15rem;
	color: var(--cal);
	font-size: 0.97rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.corredor__lista a:hover,
.corredor__lista a:focus-visible {
	color: var(--carga);
	border-bottom-color: var(--carga);
}

.corredor__lista .current-menu-item > a,
.corredor__lista .current_page_item > a {
	color: var(--carga);
	border-bottom-color: var(--cinta);
}

/* So a chamada do portico e que nao pode partir em duas linhas: e curta e o
   cabecalho conta com a largura dela. Os outros botoes partem, senao um texto
   comprido sai do ecra a 390 px.
   Em ecra estreito e a chamada que leva margin-left: auto, e nao o botao de
   abrir o menu. Se for o botao a levar a margem, ele salta para o meio a
   390 px e deixa um buraco entre a marca e ele. */
.portico__chamada {
	margin-left: 0.4rem;
	/* So esta e que nao pode partir em duas linhas: e curta e o cabecalho
	   conta com a largura dela. Os outros botoes partem, senao um texto
	   comprido sai do ecra a 390 px. */
	white-space: nowrap;
}

.tranca {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--aresta);
	border-radius: var(--curva);
	background: transparent;
	color: var(--cal);
	cursor: pointer;
}

.tranca__risca {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--cal);
	position: relative;
}

.tranca__risca::before,
.tranca__risca::after {
	content: '';
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--cal);
}

.tranca__risca::before {
	top: -7px;
}

.tranca__risca::after {
	top: 7px;
}

/* =========================================================================
   7. Marcacao: o risco de chao do armazem
   -------------------------------------------------------------------------
   Riscos curtos e grossos com intervalos iguais, cada quarto pintado de
   amarelo e com um rasto mais escuro por baixo. Vai em data-URI, portanto
   nao ha um unico pedido de rede por causa deste desenho.
   ========================================================================= */

.marcacao {
	display: block;
	width: 100%;
	height: 14px;
	border: 0;
	margin: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 14' preserveAspectRatio='none'%3E%3Crect x='2' y='2' width='30' height='7' fill='%233a3748'/%3E%3Crect x='2' y='9' width='30' height='2' fill='%2316151c'/%3E%3Crect x='42' y='2' width='28' height='7' fill='%233a3748'/%3E%3Crect x='42' y='9' width='28' height='2' fill='%2316151c'/%3E%3Crect x='82' y='2' width='30' height='7' fill='%233a3748'/%3E%3Crect x='82' y='9' width='30' height='2' fill='%2316151c'/%3E%3Crect x='122' y='2' width='29' height='7' fill='%23e6c229'/%3E%3Crect x='122' y='9' width='29' height='2' fill='%2316151c'/%3E%3Crect x='162' y='2' width='29' height='7' fill='%233a3748'/%3E%3Crect x='162' y='9' width='29' height='2' fill='%2316151c'/%3E%3Crect x='202' y='2' width='30' height='7' fill='%233a3748'/%3E%3Crect x='202' y='9' width='30' height='2' fill='%2316151c'/%3E%3Crect x='242' y='2' width='28' height='7' fill='%233a3748'/%3E%3Crect x='242' y='9' width='28' height='2' fill='%2316151c'/%3E%3Crect x='282' y='2' width='30' height='7' fill='%23e6c229'/%3E%3Crect x='282' y='9' width='30' height='2' fill='%2316151c'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 320px 14px;
}

/* =========================================================================
   8. Cais: a abertura
   -------------------------------------------------------------------------
   O degrade e uma camada do proprio background-image e nao um ::before
   posicionado. Um ::before absoluto desenha-se por cima do conteudo do
   proprio elemento e ja tapou o texto de um heroi num telemovel.
   ========================================================================= */

.cais {
	position: relative;
	background-color: var(--fundura);
	background-image:
		linear-gradient(100deg, rgba(22, 21, 28, 0.97) 0%, rgba(22, 21, 28, 0.95) 44%, rgba(22, 21, 28, 0.72) 74%, rgba(22, 21, 28, 0.55) 100%),
		url('images/cais-noite.jpg');
	background-size: cover;
	background-position: center right;
	border-bottom: 1px solid var(--cinta);
}

.cais__grelha {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 2.5rem;
	align-items: center;
	padding-block: clamp(3.6rem, 8vw, 6.6rem);
}

.cais__etiqueta {
	display: inline-block;
	margin: 0 0 1.1rem;
	padding: 0.32rem 0.85rem;
	background: var(--ginja);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	color: var(--cal);
	font-family: var(--letra-titulo);
	font-size: 1.02rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cais__kop {
	margin-bottom: 1rem;
	max-width: 15ch;
}

.cais__linha {
	max-width: 46ch;
	margin-bottom: 1.5rem;
	color: var(--cal);
	font-size: 1.16rem;
}

.cais__accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.cais__ficha {
	background: rgba(38, 36, 48, 0.93);
	border: 1px solid var(--cinta);
	border-left: 4px solid var(--carga);
	border-radius: var(--curva);
	padding: 1.5rem 1.6rem;
}

.cais__ficha h2 {
	font-size: 1.5rem;
	margin-bottom: 0.9rem;
	color: var(--carga);
}

.cais__ficha dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.45rem 1rem;
	margin: 0;
	font-size: 0.98rem;
}

.cais__ficha dt {
	color: var(--bruma);
}

.cais__ficha dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

/* =========================================================================
   9. Marcador: os quatro numeros logo por baixo do cais
   ========================================================================= */

.marcador {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--cinta);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	overflow: hidden;
}

.marcador__casa {
	background: var(--tabuleiro);
	padding: 1.5rem 1.3rem;
}

/* Numero grande. Nunca na cor do risco: um numero decorativo em --cinta da
   1,32:1 e ja foi apanhado em seis sites seguidos desta serie. */
.digito {
	display: block;
	font-family: var(--letra-titulo);
	font-size: clamp(2.9rem, 5vw, 4.1rem);
	font-weight: 700;
	line-height: 0.94;
	color: var(--carga);
}

.marcador__unidade {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--letra-titulo);
	font-size: 1.1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--frio);
}

.marcador__nota {
	display: block;
	margin-top: 0.55rem;
	color: var(--bruma);
	font-size: 0.93rem;
	line-height: 1.45;
}

/* =========================================================================
   10. Formato Certo
   ========================================================================= */

.formatocerto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.9rem;
}

.formatocerto__entradas {
	display: grid;
	gap: 1.4rem;
	align-content: start;
}

.formatocerto__campo {
	display: block;
}

.formatocerto__rotulo {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--letra-titulo);
	font-size: 1.16rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cal);
}

.formatocerto__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.formatocerto__cip {
	min-height: 44px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--aresta);
	border-radius: var(--curva);
	background: var(--ardosia);
	color: var(--cal);
	font-family: var(--letra-corpo);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.formatocerto__cip:hover {
	border-color: var(--frio);
	color: var(--frio);
}

.formatocerto__cip[aria-pressed='true'] {
	background: var(--carga);
	border-color: var(--carga);
	color: var(--ardosia);
}

.formatocerto__saida {
	background: var(--ardosia);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.5rem;
}

.formatocerto__medida {
	display: block;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--frio);
}

.formatocerto__veredito {
	display: block;
	margin: 0.35rem 0 0.2rem;
	font-family: var(--letra-titulo);
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--carga);
}

.formatocerto__contas {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 1.1rem 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--cinta);
	font-size: 0.99rem;
}

.formatocerto__contas dt {
	color: var(--bruma);
}

.formatocerto__contas dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.formatocerto__porque {
	display: block;
	margin: 0;
	padding: 0.85rem 1rem;
	background: var(--tabuleiro);
	border-left: 3px solid var(--frio);
	border-radius: var(--curva);
	color: var(--bruma);
	font-size: 0.97rem;
	line-height: 1.5;
}

.formatocerto__figura {
	margin: 0;
	grid-column: 1 / -1;
}

.formatocerto__figura img {
	width: 100%;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

.formatocerto__legenda {
	display: block;
	margin-top: 0.6rem;
	color: var(--bruma);
	font-size: 0.93rem;
}

/* =========================================================================
   11. Cartas de formato
   ========================================================================= */

.listaformatos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cartaformato {
	display: flex;
	flex-direction: column;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	overflow: hidden;
}

.cartaformato__retrato {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-bottom: 1px solid var(--cinta);
}

.cartaformato__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.3rem 1.4rem;
}

.cartaformato__volume {
	display: block;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--frio);
}

.cartaformato__nome {
	margin: 0.3rem 0 0.7rem;
	font-size: 1.42rem;
	color: var(--cal);
}

.cartaformato__texto {
	color: var(--bruma);
	font-size: 0.99rem;
}

.cartaformato__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.cartaformato__marca {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	background: var(--ardosia);
	color: var(--bruma);
	font-size: 0.86rem;
}

.cartaformato__preco {
	display: block;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cinta);
	font-family: var(--letra-titulo);
	font-size: 1.7rem;
	color: var(--carga);
}

/* Linha de volume: o mesmo formato sem retrato, para a página da gama.
   Na inicial os formatos entram como cartas com fotografia; aqui entram como
   linhas com o número à direita. Nenhuma imagem se repete no sítio, e nenhuma
   composição se repete duas vezes. */
.listavolumes {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	overflow: hidden;
}

.linhavolume {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 1.4rem;
	padding: 1.3rem 1.4rem;
	background: var(--tabuleiro);
	border-top: 1px solid var(--cinta);
}

.listavolumes > li:first-child .linhavolume {
	border-top: 0;
}

.linhavolume__nome {
	margin: 0 0 0.5rem;
	font-size: 1.45rem;
}

.linhavolume__texto {
	margin: 0;
	color: var(--bruma);
	font-size: 0.99rem;
}

.linhavolume__numeros {
	display: grid;
	gap: 0.3rem;
	align-content: start;
	padding-left: 1.2rem;
	border-left: 2px solid var(--cinta);
	text-align: right;
}

.linhavolume__preco {
	display: block;
	font-family: var(--letra-titulo);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--carga);
}

.linhavolume__prazo {
	display: block;
	font-size: 0.92rem;
	color: var(--frio);
}

.linhavolume__minimo {
	display: block;
	font-size: 0.92rem;
	color: var(--bruma);
}

/* Carta de rota: o bloco do reforço de sábado, que não é uma rota fixa. */
.cartarota {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.6rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-left: 4px solid var(--frio);
	border-radius: var(--curva);
	padding: 1.4rem 1.5rem;
}

.cartarota__kop {
	margin: 0;
	font-size: 1.5rem;
	color: var(--frio);
}

.cartarota__texto {
	margin: 0;
	color: var(--bruma);
}

/* =========================================================================
   12. Duo
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.6rem;
	align-items: center;
}

.duo__figura {
	margin: 0;
}

.duo__figura img {
	width: 100%;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

.duo__legenda {
	display: block;
	margin-top: 0.6rem;
	color: var(--bruma);
	font-size: 0.93rem;
}

.duo--trocado .duo__figura {
	order: 2;
}

.duo__lista {
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

.duo__lista li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.7rem;
	color: var(--bruma);
}

.duo__lista li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 12px;
	height: 3px;
	background: var(--carga);
}

/* =========================================================================
   13. Ritmo de Entrega
   ========================================================================= */

.ritmo {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 2rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.9rem;
}

.ritmo__entradas {
	display: grid;
	gap: 1.4rem;
	align-content: start;
}

.ritmo__rotulo {
	display: block;
	margin-bottom: 0.55rem;
	font-family: var(--letra-titulo);
	font-size: 1.16rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cal);
}

.ritmo__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ritmo__cip {
	min-height: 44px;
	padding: 0.4rem 1rem;
	border: 1px solid var(--aresta);
	border-radius: var(--curva);
	background: var(--ardosia);
	color: var(--cal);
	font-family: var(--letra-corpo);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}

.ritmo__cip:hover {
	border-color: var(--frio);
	color: var(--frio);
}

.ritmo__cip[aria-pressed='true'] {
	background: var(--frio);
	border-color: var(--frio);
	color: var(--ardosia);
}

.ritmo__saida {
	background: var(--ardosia);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.5rem;
}

.ritmo__cabeca {
	display: block;
	font-family: var(--letra-titulo);
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--carga);
}

/* A semana: sete goteiras de altura fixa. Um span com altura e sem
   display: block nao desenha nada, por isso o dia e um bloco. */
.ritmo__semana {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin: 1.2rem 0 0.6rem;
	padding: 0;
	list-style: none;
}

.ritmo__dia {
	display: block;
	min-height: 96px;
	padding: 0.4rem 0.25rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	text-align: center;
}

.ritmo__dia--entrega {
	background: var(--ginja);
	border-color: var(--carga);
}

.ritmo__inicial {
	display: block;
	font-family: var(--letra-titulo);
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bruma);
}

.ritmo__dia--entrega .ritmo__inicial {
	color: var(--cal);
}

.ritmo__carga {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--letra-titulo);
	font-size: 1.32rem;
	color: var(--carga);
}

.ritmo__vazio {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.86rem;
	color: var(--bruma);
}

.ritmo__contas {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1rem;
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--cinta);
	font-size: 0.99rem;
}

.ritmo__contas dt {
	color: var(--bruma);
}

.ritmo__contas dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.ritmo__aperto {
	display: block;
	margin: 0;
	padding: 0.85rem 1rem;
	background: var(--tabuleiro);
	border-left: 3px solid var(--carga);
	border-radius: var(--curva);
	color: var(--bruma);
	font-size: 0.97rem;
	line-height: 1.5;
}

.ritmo__figura {
	margin: 0;
	grid-column: 1 / -1;
}

.ritmo__figura img {
	width: 100%;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

.ritmo__legenda {
	display: block;
	margin-top: 0.6rem;
	color: var(--bruma);
	font-size: 0.93rem;
}

/* =========================================================================
   14. Tabelas
   ========================================================================= */

.suporte {
	overflow-x: auto;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

.tabelavolume {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.99rem;
}

.tabelavolume caption {
	padding: 0.9rem 1rem;
	background: var(--tabuleiro);
	border-bottom: 1px solid var(--cinta);
	color: var(--bruma);
	text-align: left;
	font-size: 0.95rem;
}

.tabelavolume th,
.tabelavolume td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--cinta);
	text-align: left;
	vertical-align: top;
}

.tabelavolume thead th {
	background: var(--tabuleiro);
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--carga);
	white-space: nowrap;
}

.tabelavolume tbody th {
	font-weight: 500;
	color: var(--cal);
}

.tabelavolume tbody tr:last-child th,
.tabelavolume tbody tr:last-child td {
	border-bottom: 0;
}

.tabelavolume td {
	color: var(--bruma);
}

.tabelavolume__numero {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tabelavolume__rotulo {
	display: none;
}

/* =========================================================================
   15. Caixa aberta: os relatos
   -------------------------------------------------------------------------
   Dois cantos de cima cortados em bisel e virados para fora, como uma caixa
   de cartao aberta em cima.
   ========================================================================= */

.paredecaixas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2.6rem 1.6rem;
	margin: 0;
	padding: 2.2rem 0 0;
	list-style: none;
}

.caixaaberta {
	position: relative;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.5rem 1.4rem 1.3rem;
}

.caixaaberta__aba {
	position: absolute;
	top: -22px;
	display: block;
	width: 46%;
	height: 22px;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-bottom: 0;
	font-family: var(--letra-titulo);
	font-size: 0.92rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 20px;
	overflow: hidden;
	white-space: nowrap;
}

.caixaaberta__aba--esquerda {
	left: -1px;
	padding-left: 0.7rem;
	clip-path: polygon(0 100%, 14px 0, 100% 0, 100% 100%);
	color: var(--carga);
}

.caixaaberta__aba--direita {
	right: -1px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
	text-align: right;
	padding-right: 0.7rem;
	color: var(--bruma);
}

.caixaaberta__fala {
	margin: 0 0 1rem;
	color: var(--cal);
	font-size: 1.03rem;
}

.caixaaberta__pe {
	display: block;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--cinta);
	font-family: var(--letra-titulo);
	font-size: 1.02rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--frio);
}

.caixaaberta__casa {
	display: block;
	margin-top: 0.3rem;
	color: var(--bruma);
	font-size: 0.92rem;
}

/* =========================================================================
   16. Passos da marca propria
   ========================================================================= */

.passomarca {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: passo;
}

.passomarca__passo {
	position: relative;
	background: var(--ardosia);
	border: 1px solid var(--cinta);
	border-top: 3px solid var(--frio);
	border-radius: var(--curva);
	padding: 1.3rem 1.3rem 1.4rem;
	counter-increment: passo;
}

.passomarca__passo::before {
	content: counter(passo, decimal-leading-zero);
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--letra-titulo);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--frio);
}

.passomarca__kop {
	margin-bottom: 0.5rem;
	font-size: 1.28rem;
}

.passomarca__texto {
	margin: 0;
	color: var(--bruma);
	font-size: 0.98rem;
}

/* =========================================================================
   17. Rotas
   ========================================================================= */

.listarotas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--cinta);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	overflow: hidden;
}

.rota {
	background: var(--tabuleiro);
	padding: 1.3rem 1.3rem 1.4rem;
}

.rota__dia {
	display: block;
	font-family: var(--letra-titulo);
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var(--carga);
}

.rota__fecho {
	display: block;
	margin: 0.15rem 0 0.8rem;
	font-size: 0.9rem;
	color: var(--bruma);
}

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

.rota__concelhos li {
	padding: 0.28rem 0;
	border-top: 1px solid var(--cinta);
	color: var(--cal);
	font-size: 0.98rem;
}

.rota__concelhos li:first-child {
	border-top: 0;
}

/* =========================================================================
   18. Equipa
   ========================================================================= */

.equipa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cartaequipa {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 1.3rem;
	align-items: start;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.3rem;
}

.cartaequipa__retrato {
	width: 132px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
}

.cartaequipa__nome {
	margin-bottom: 0.2rem;
	font-size: 1.4rem;
}

.cartaequipa__papel {
	display: block;
	margin-bottom: 0.7rem;
	font-family: var(--letra-titulo);
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--frio);
}

.cartaequipa__texto {
	margin: 0;
	color: var(--bruma);
	font-size: 0.97rem;
}

/* =========================================================================
   19. Notas de armazem: lista agrupada com cabecalho que cola
   ========================================================================= */

.grupoblocos {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	overflow: hidden;
}

.cabecalhogrupo {
	position: sticky;
	top: var(--porta);
	z-index: 4;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem 1.2rem;
	background: var(--fundura);
	border-top: 1px solid var(--cinta);
	border-bottom: 1px solid var(--carga);
	font-family: var(--letra-titulo);
	font-size: 1.3rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--carga);
}

.grupoblocos > li:first-child .cabecalhogrupo {
	border-top: 0;
}

.cabecalhogrupo__conta {
	font-family: var(--letra-corpo);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bruma);
}

.grupoblocos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--tabuleiro);
}

.linhanota {
	border-top: 1px solid var(--cinta);
	padding: 1rem 1.2rem;
}

.grupoblocos__lista > li:first-child .linhanota {
	border-top: 0;
}

.linhanota__data {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.87rem;
	color: var(--bruma);
	font-variant-numeric: tabular-nums;
}

.linhanota__kop {
	margin: 0 0 0.3rem;
	font-size: 1.34rem;
}

.linhanota__kop a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--cal);
	text-decoration: none;
}

.linhanota__kop a:hover,
.linhanota__kop a:focus-visible {
	color: var(--carga);
	text-decoration: underline;
}

.linhanota__resumo {
	margin: 0;
	color: var(--bruma);
	font-size: 0.98rem;
}

/* =========================================================================
   20. Nota inteira
   ========================================================================= */

.nota {
	max-width: 74ch;
}

.respostacurta {
	margin: 0 0 2rem;
	padding: 1.2rem 1.4rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-left: 4px solid var(--carga);
	border-radius: var(--curva);
}

.respostacurta__kop {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--carga);
}

.respostacurta p {
	margin: 0;
	color: var(--cal);
}

.prosa h2,
.prosa h3 {
	margin-top: 2rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--carga);
}

.prosa h3 {
	border-bottom-width: 1px;
}

.prosa ul,
.prosa ol {
	margin: 0 0 1.2rem;
	padding-left: 1.3rem;
	color: var(--bruma);
}

.prosa li {
	margin-bottom: 0.45rem;
}

.prosa p {
	color: var(--cal);
}

.prosa dl {
	margin: 0 0 1.4rem;
}

.prosa dt {
	margin-top: 0.9rem;
	font-weight: 500;
	color: var(--carga);
}

.prosa dd {
	margin: 0.2rem 0 0;
	color: var(--bruma);
}

/* O correio e o telefone dentro de um dd sao ligacoes de uma linha, e uma
   linha de texto tem 19 px. A 390 px isso e metade de um alvo para o dedo. */
.prosa dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

/* =========================================================================
   21. Perguntas
   ========================================================================= */

.questaocais {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cinta);
}

.questaocais details {
	border-bottom: 1px solid var(--cinta);
}

.questaocais summary {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 56px;
	padding: 0.85rem 0;
	font-family: var(--letra-titulo);
	font-size: 1.32rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cal);
	cursor: pointer;
}

.questaocais summary::marker,
.questaocais summary::-webkit-details-marker {
	color: var(--carga);
}

.questaocais summary:hover {
	color: var(--carga);
}

.questaocais__resposta {
	margin: 0;
	padding: 0 0 1.2rem;
	max-width: 76ch;
	color: var(--bruma);
}

/* =========================================================================
   22. Convocatoria
   ========================================================================= */

.convocatoria {
	background-color: var(--fundura);
	background-image:
		linear-gradient(90deg, rgba(22, 21, 28, 0.97) 0%, rgba(22, 21, 28, 0.95) 48%, rgba(22, 21, 28, 0.68) 78%, rgba(22, 21, 28, 0.5) 100%),
		url('images/doca-azul.jpg');
	background-size: cover;
	background-position: center;
	border-block: 1px solid var(--cinta);
}

.convocatoria__caixa {
	max-width: 56ch;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.convocatoria__kop {
	margin-bottom: 0.8rem;
}

.convocatoria__texto {
	margin-bottom: 1.6rem;
	color: var(--cal);
	font-size: 1.1rem;
}

.convocatoria__accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
}

/* =========================================================================
   23. Requisicao: os formularios
   ========================================================================= */

.requisicao {
	display: grid;
	gap: 1.1rem;
	background: var(--tabuleiro);
	border: 1px solid var(--cinta);
	border-radius: var(--curva);
	padding: 1.6rem;
}

.requisicao__par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.1rem;
}

.campoficha {
	display: block;
}

.campoficha__nome {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cal);
}

.campoficha__ajuda {
	display: block;
	margin-top: 0.3rem;
	color: var(--bruma);
	font-size: 0.88rem;
}

.campoficha input,
.campoficha select,
.campoficha textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--aresta);
	border-radius: var(--curva);
	background: var(--ardosia);
	color: var(--cal);
	font-family: var(--letra-corpo);
	font-size: 1rem;
}

.campoficha textarea {
	min-height: 132px;
	resize: vertical;
}

.campoficha input:focus,
.campoficha select:focus,
.campoficha textarea:focus {
	border-color: var(--carga);
	outline: 2px solid var(--carga);
	outline-offset: 1px;
}

.campoficha input::placeholder,
.campoficha textarea::placeholder {
	color: var(--bruma);
	opacity: 1;
}

/* A ratoeira fica fora do ecra e transparente. Nao leva display: none,
   senao o robo percebe logo que e uma armadilha. */
.ratoeira {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.registoentrada {
	margin: 0 0 1.4rem;
	padding: 0.95rem 1.2rem;
	border-radius: var(--curva);
	border-left: 4px solid var(--carga);
	background: var(--tabuleiro);
	color: var(--cal);
}

.registoentrada--falha {
	border-left-color: var(--frio);
}

/* =========================================================================
   24. Chapa: a cabeca das bladzijden de dentro
   ========================================================================= */

.chapa {
	background-color: var(--fundura);
	background-image:
		linear-gradient(180deg, rgba(22, 21, 28, 0.95) 0%, rgba(22, 21, 28, 0.93) 100%),
		url('images/chapa-ondulada.jpg');
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--cinta);
	padding-block: clamp(2.6rem, 5vw, 4rem);
}

.chapa__sobre {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--letra-titulo);
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--carga);
}

.chapa__kop {
	max-width: 20ch;
	margin-bottom: 0.7rem;
}

.chapa__entrada {
	max-width: 62ch;
	margin: 0;
	color: var(--cal);
	font-size: 1.1rem;
}

/* =========================================================================
   25. Fita de cookies
   ========================================================================= */

.fitacookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--fundura);
	border-top: 2px solid var(--carga);
}

.fitacookies__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.4rem;
	padding-block: 0.9rem;
}

.fitacookies__texto {
	flex: 1 1 320px;
	margin: 0;
	color: var(--cal);
	font-size: 0.96rem;
}

.fitacookies__accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* =========================================================================
   26. Fora de rota: o 404
   ========================================================================= */

.foraderota {
	text-align: center;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

/* A regra .foraderota p e (0,1,1) e ganharia a .foraderota__numero, que e
   (0,1,0). Por isso o :not, senao o numero grande sai do tamanho do texto. */
.foraderota p:not(.foraderota__numero) {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--bruma);
}

.foraderota__numero {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--letra-titulo);
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 700;
	line-height: 0.86;
	color: var(--carga);
}

.foraderota__accoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	margin-top: 1.8rem;
}

/* =========================================================================
   27. Lastro
   ========================================================================= */

.lastro {
	background: var(--fundura);
	border-top: 1px solid var(--cinta);
	padding-top: var(--folga);
}

.lastro__grelha {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-bottom: 2.2rem;
}

.lastro__nome {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: var(--letra-titulo);
	font-size: 1.85rem;
	text-transform: uppercase;
	text-decoration: none;
}

.lastro__nome:hover,
.lastro__nome:focus-visible {
	color: inherit;
}

.lastro__nome span {
	display: inline-block;
}

.lastro__frase {
	max-width: 34ch;
	margin: 0.6rem 0 0;
	color: var(--bruma);
	font-size: 0.95rem;
}

.lastro__kop {
	margin-bottom: 0.7rem;
	font-size: 1.14rem;
	color: var(--carga);
}

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

.lastro__lista li {
	margin-bottom: 0.1rem;
}

.lastro__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--cal);
	font-size: 0.95rem;
	text-decoration: none;
}

.lastro__lista a:hover,
.lastro__lista a:focus-visible {
	color: var(--carga);
	text-decoration: underline;
}

.lastro__contactos {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.8rem;
	font-size: 0.95rem;
}

.lastro__contactos dt {
	color: var(--bruma);
	padding-top: 0.5rem;
}

.lastro__contactos dd {
	margin: 0;
}

.lastro__contactos dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--cal);
	text-decoration: none;
}

.lastro__contactos dd a:hover,
.lastro__contactos dd a:focus-visible {
	color: var(--carga);
	text-decoration: underline;
}

.lastro__morada {
	display: block;
	padding-top: 0.5rem;
	color: var(--cal);
}

.lastro__fecho {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.4rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--cinta);
	color: var(--bruma);
	font-size: 0.9rem;
}

.lastro__fecho p {
	margin: 0;
}

/* =========================================================================
   28. Ecras estreitos
   ========================================================================= */

@media (max-width: 1040px) {
	.cais__grelha,
	.duo,
	.formatocerto,
	.ritmo {
		grid-template-columns: minmax(0, 1fr);
	}

	.duo--trocado .duo__figura {
		order: 0;
	}

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

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

@media (max-width: 1080px) {
	:root {
		--porta: 66px;
	}

	/* Sem javascript o corredor fica na propria linha, aberto e alcancavel.
	   Com javascript passa a gaveta, e ai o botao manda. Nao ha atributo
	   hidden nenhum aqui: sem scripts nao havia com que o tirar. */
	.corredor {
		flex: 1 0 100%;
		order: 5;
		margin-left: 0;
		border-top: 1px solid var(--cinta);
		padding-top: 0.3rem;
		padding-bottom: 0.5rem;
	}

	.js .corredor {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		background: var(--fundura);
		border-top: 0;
		border-bottom: 1px solid var(--cinta);
		padding: 0.6rem 1.3rem 1.1rem;
	}

	.js .corredor.corredor--aberto {
		display: block;
	}

	/* A gaveta encosta-se ao portico e nao a linha de dentro, para ocupar a
	   largura toda do ecra em vez de ficar dentro da goteira do conteudo. */
	.corredor__lista a {
		display: flex;
	}

	.portico__chamada {
		margin-left: auto;
	}

	.portico__linha {
		flex-wrap: wrap;
	}

	.corredor__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.corredor__lista a {
		min-height: 46px;
		border-bottom: 1px solid var(--cinta);
		padding-inline: 0.2rem;
	}

	.corredor__lista li:last-child a {
		border-bottom: 0;
	}

	.js .tranca {
		display: inline-flex;
	}

	.cabecalhogrupo {
		top: var(--porta);
	}

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

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

	.armazem {
		width: min(100% - 1.8rem, var(--largura));
	}

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

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

	.cartaequipa__retrato {
		width: 100%;
		max-width: 220px;
	}

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

	.formatocerto,
	.ritmo {
		padding: 1.2rem;
	}

	/* A tabela vira pilha. O overflow-x sozinho nao chega: dentro de um bloco
	   com overflow hidden e transformacao o Blink estica a pagina na mesma. */
	.suporte {
		overflow-x: visible;
		border: 0;
	}

	.tabelavolume {
		display: block;
	}

	.tabelavolume caption {
		border: 1px solid var(--cinta);
		border-radius: var(--curva);
		margin-bottom: 0.9rem;
	}

	.tabelavolume thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.tabelavolume tbody,
	.tabelavolume tr,
	.tabelavolume th,
	.tabelavolume td {
		display: block;
		width: auto;
	}

	.tabelavolume tbody tr {
		margin-bottom: 0.9rem;
		border: 1px solid var(--cinta);
		border-radius: var(--curva);
		overflow: hidden;
	}

	.tabelavolume tbody th {
		background: var(--tabuleiro);
		border-bottom: 1px solid var(--cinta);
		font-family: var(--letra-titulo);
		font-size: 1.3rem;
		text-transform: uppercase;
		color: var(--carga);
	}

	.tabelavolume tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		white-space: normal;
	}

	.tabelavolume tbody tr:last-child td:last-child {
		border-bottom: 0;
	}

	.tabelavolume__rotulo {
		display: inline-block;
		color: var(--bruma);
		font-size: 0.86rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.paredecaixas {
		gap: 2.4rem 1.2rem;
	}

	.fitacookies__accoes .gancho {
		flex: 1 1 140px;
	}
}

@media (max-width: 420px) {
	.portico__nome {
		font-size: 1.7rem;
	}

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

	.gancho {
		font-size: 1.1rem;
		padding-inline: 1.1rem;
	}
}

@media print {
	.portico,
	.fitacookies,
	.convocatoria {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}