/*
Theme Name: Ginjaro
Theme URI: https://ginjaro.org/
Author: Quinta Ginjaro
Author URI: https://ginjaro.org/
Description: Tema da Quinta Ginjaro, no Fundao: sumo de cereja engarrafado por colheita, uma casta e um ano por lote. Ferramentas proprias para sobrepor colheitas e emparelhar castas.
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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ginjaro
Tags: business, portugal, fruit, one-column, custom-menu
*/

/* =========================================================================
   1. Lettertypen
   -------------------------------------------------------------------------
   Alleen de deelverzameling latin. Prata heeft geen latin-ext en de
   Portugese diakritieken zitten allemaal al in latin; een tweede bestand
   per gewicht zou dus alleen laadtijd kosten.
   ========================================================================= */

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

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

@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/work-sans-600-latin.woff2') format('woff2');
}

/* =========================================================================
   2. Kleuren en maten
   -------------------------------------------------------------------------
   Alle verhoudingen zijn met contrast.py uitgerekend, beide kanten op en ook
   op het paneel. --veio en --gume dragen nooit tekst: --veio is een haarlijn
   (1.43:1) en --gume een rand om iets waar je op kunt klikken (3.53:1).
   ========================================================================= */

:root {
	--granito: #f7f2f1;
	--polpa: #ece3e2;
	--veio: #d9cac9;
	--gume: #8c7d80;
	--grafite: #241e20;
	--sombra: #55494c;
	--ginja: #9c1f3c;
	--ginja-funda: #6f1526;
	--folhado: #4f5d23;

	--ano-2019: #9c1f3c;
	--ano-2020: #6f1526;
	--ano-2021: #8a4b2a;
	--ano-2022: #7b3560;
	--ano-2023: #4f5d23;
	--ano-2024: #2f5347;
	--ano-2025: #55494c;

	/* Elke sectie zet deze twee waarden zelf: --painel-local is het vlak
	   van een kaart en --fundo-local dat van een uitsparing daarin. */
	--painel-local: var(--polpa);
	--fundo-local: var(--granito);

	--beiral-alto: 74px;
	--largura: 1180px;
	--radio: 3px;
}

/* =========================================================================
   3. Grondslag
   ========================================================================= */

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

/* Een klasse die display zet is sterker dan de browserregel voor [hidden].
   Zonder deze regel blijft een verborgen knop gewoon staan. */
[hidden] {
	display: none !important;
}

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

body {
	margin: 0;
	background: var(--granito);
	color: var(--grafite);
	font-family: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.65;
}

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

a {
	color: var(--ginja);
}

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

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

h1,
h2,
h3,
h4 {
	font-family: 'Prata', 'Georgia', serif;
	font-weight: 400;
	line-height: 1.18;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2.1rem, 5vw, 3.3rem);
}

h2 {
	font-size: clamp(1.65rem, 3.4vw, 2.35rem);
}

h3 {
	font-size: 1.28rem;
}

h4 {
	font-size: 1.06rem;
}

p {
	margin: 0 0 1.05em;
}

ul,
ol {
	margin: 0 0 1.05em;
	padding-left: 1.2em;
}

li {
	margin-bottom: 0.4em;
}

strong {
	font-weight: 600;
}

.surdina {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.saltador {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	display: block;
	padding: 12px 20px;
	background: var(--ginja);
	color: var(--granito);
	text-decoration: none;
	min-height: 44px;
}

.saltador:focus {
	left: 8px;
	top: 8px;
	color: var(--granito);
}

.quinta {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 22px;
}

.sobretitulo {
	display: block;
	margin: 0 0 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ginja);
}

.abaixo {
	display: block;
	margin: 0;
	font-size: 0.92rem;
	color: var(--sombra);
}

/* =========================================================================
   4. Knoppen
   ========================================================================= */

.podao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 24px;
	border: 1px solid var(--ginja);
	border-radius: var(--radio);
	background: var(--ginja);
	color: var(--granito);
	font-family: 'Work Sans', sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.podao:hover,
.podao:focus-visible {
	background: var(--ginja-funda);
	border-color: var(--ginja-funda);
	color: var(--granito);
}

.podao--calmo {
	background: transparent;
	border-color: var(--gume);
	color: var(--grafite);
}

.podao--calmo:hover,
.podao--calmo:focus-visible {
	background: var(--polpa);
	border-color: var(--ginja);
	color: var(--ginja-funda);
}

.podao--colher {
	background: var(--folhado);
	border-color: var(--folhado);
}

.podao--colher:hover,
.podao--colher:focus-visible {
	background: #3c471a;
	border-color: #3c471a;
}

.podao--curto {
	min-height: 38px;
	padding: 7px 15px;
	font-size: 0.86rem;
}

/* =========================================================================
   5. Verdeler: kersenpitten op een haarlijn
   -------------------------------------------------------------------------
   Vaste hoogte in een eigen goot. Een percentage in een flexregel zou hier
   niets tekenen; deze band heeft daarom een echte hoogte in pixels.
   ========================================================================= */

.caroco {
	display: block;
	width: 100%;
	height: 24px;
	margin: 0;
	border: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' width='240' height='24'%3E%3Cpath d='M0 12 H204 M228 12 H240' stroke='%23d9cac9' stroke-width='1' fill='none'/%3E%3Cellipse cx='24' cy='17' rx='6' ry='1.1' fill='%23d9cac9' opacity='0.7'/%3E%3Cellipse cx='72' cy='17' rx='6' ry='1.1' fill='%23d9cac9' opacity='0.7'/%3E%3Cellipse cx='120' cy='17' rx='6' ry='1.1' fill='%23d9cac9' opacity='0.7'/%3E%3Cellipse cx='168' cy='17' rx='6' ry='1.1' fill='%23d9cac9' opacity='0.7'/%3E%3Cellipse cx='216' cy='17' rx='6' ry='1.1' fill='%239c1f3c' opacity='0.35'/%3E%3Cellipse cx='24' cy='12' rx='7' ry='4.4' transform='rotate(-19 24 12)' fill='none' stroke='%238c7d80' stroke-width='1.2'/%3E%3Cellipse cx='72' cy='12' rx='7' ry='4.4' transform='rotate(14 72 12)' fill='none' stroke='%238c7d80' stroke-width='1.2'/%3E%3Cellipse cx='120' cy='12' rx='7' ry='4.4' transform='rotate(-11 120 12)' fill='none' stroke='%238c7d80' stroke-width='1.2'/%3E%3Cellipse cx='168' cy='12' rx='7' ry='4.4' transform='rotate(21 168 12)' fill='none' stroke='%238c7d80' stroke-width='1.2'/%3E%3Cellipse cx='216' cy='12' rx='7.4' ry='4.8' transform='rotate(-7 216 12)' fill='%239c1f3c'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
}

/* =========================================================================
   6. Beiral: de kop van elke bladzijde
   ========================================================================= */

.beiral {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--granito);
	border-bottom: 1px solid var(--veio);
}

.beiral__linha {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--beiral-alto);
}

.beiral__nome {
	display: inline-flex;
	align-items: baseline;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.62rem;
	line-height: 1;
	text-decoration: none;
	color: var(--grafite);
	min-height: 40px;
	align-self: center;
	padding: 4px 0;
}

.beiral__nome:hover,
.beiral__nome:focus-visible {
	color: var(--ginja-funda);
}

.beiral__ginja {
	color: var(--ginja);
}

.beiral__ro {
	color: var(--grafite);
}

.beiral__nome:hover .beiral__ro {
	color: var(--ginja-funda);
}

.carreiro {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.carreiro li {
	margin: 0;
}

.carreiro a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 11px;
	border-radius: var(--radio);
	color: var(--grafite);
	font-size: 0.93rem;
	text-decoration: none;
}

.carreiro a:hover,
.carreiro a:focus-visible {
	background: var(--polpa);
	color: var(--ginja-funda);
}

.beiral__apelo {
	flex: 0 0 auto;
}

.aldraba {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	min-width: 42px;
	padding: 8px 13px;
	margin-left: auto;
	border: 1px solid var(--gume);
	border-radius: var(--radio);
	background: transparent;
	color: var(--grafite);
	font-family: 'Work Sans', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.aldraba__risca {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--grafite);
	box-shadow: 0 5px 0 var(--grafite), 0 -5px 0 var(--grafite);
}

/* =========================================================================
   7. Talhao: de secties
   ========================================================================= */

.talhao {
	padding: 62px 0;
}

.talhao--curto {
	padding: 38px 0;
}

.talhao--painel {
	--painel-local: var(--granito);
	--fundo-local: var(--polpa);
	background: var(--polpa);
	border-top: 1px solid var(--veio);
	border-bottom: 1px solid var(--veio);
}

.talhao--fundo {
	--painel-local: var(--polpa);
	--fundo-local: var(--granito);
	background: var(--granito);
}

.talhao__cabeca {
	max-width: 720px;
	margin-bottom: 34px;
}

.talhao__cabeca p {
	color: var(--sombra);
	margin-bottom: 0;
}

/* =========================================================================
   8. Encosta: de gespleten kop van de voorpagina
   -------------------------------------------------------------------------
   Geen tekst over de foto. Een licht thema met daglichtbeelden is de
   ongunstigste combinatie die er is: een sluier die zwaar genoeg is om
   letters te dragen, maakt de foto kapot.
   ========================================================================= */

.encosta {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 0;
	align-items: stretch;
	border-bottom: 1px solid var(--veio);
}

.encosta__palavra {
	padding: 66px 40px 66px 0;
	align-self: center;
}

.encosta__palavra h1 {
	margin-bottom: 18px;
}

.encosta__intro {
	font-size: 1.1rem;
	color: var(--sombra);
	max-width: 34em;
}

.encosta__lote {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0 0 26px;
	padding: 16px 20px;
	border: 1px solid var(--veio);
	border-left: 4px solid var(--ginja);
	background: var(--polpa);
	list-style: none;
}

.encosta__lote li {
	margin: 0;
	font-size: 0.9rem;
	color: var(--sombra);
}

.encosta__lote b {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.3rem;
	font-weight: 400;
	color: var(--ginja);
	line-height: 1.2;
}

.encosta__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.encosta__vista {
	position: relative;
	min-height: 460px;
	overflow: hidden;
}

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

/* =========================================================================
   9. Testeira: de kop van een binnenbladzijde
   -------------------------------------------------------------------------
   Hier staat wel tekst op een beeld, en daarom ligt er een sluier over het
   graniet. De pixelproef meet dit blok apart; vandaar data-foto-achter.
   ========================================================================= */

.testeira {
	position: relative;
	border-bottom: 1px solid var(--veio);
	background-color: var(--polpa);
	background-image: linear-gradient(rgba(247, 242, 241, 0.9), rgba(247, 242, 241, 0.9)), url('images/granito-textura.jpg');
	background-size: auto, cover;
	background-position: center, center;
}

/* Dit blok draagt ook de klasse quinta. Een eigen max-width zou het blok
   in het midden zetten, terwijl alles eronder tegen de linkerkant staat, en
   dat scheelt op 1280px bijna tweehonderd pixels. De breedte hoort dus op
   de regels te zitten en niet op het blok. */
.testeira__interior {
	padding: 54px 0 46px;
}

.testeira__interior > * {
	max-width: 780px;
}

.testeira p {
	margin-bottom: 0;
	color: var(--sombra);
	font-size: 1.05rem;
}

/* =========================================================================
   10. Duo, kaarten en rasters
   ========================================================================= */

.duo {
	display: grid;
	grid-template-columns: 0.96fr 1.04fr;
	gap: 46px;
	align-items: center;
}

.duo__retrato img {
	width: 100%;
	border: 1px solid var(--veio);
}

.duo__legenda {
	display: block;
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--sombra);
}

.duo__conta {
	display: flex;
	gap: 30px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.duo__conta li {
	margin: 0;
	font-size: 0.88rem;
	color: var(--sombra);
	max-width: 15em;
}

.duo__conta b {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.7rem;
	font-weight: 400;
	color: var(--folhado);
	line-height: 1.1;
}

.pomar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pomar li {
	margin: 0;
}

.cartacasta {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--painel-local);
	border: 1px solid var(--veio);
	border-radius: var(--radio);
	overflow: hidden;
}

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

.cartacasta__corpo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

.cartacasta__corpo h3 {
	margin-bottom: 6px;
}

.cartacasta__corpo p {
	color: var(--sombra);
	font-size: 0.95rem;
}

.cartacasta__nota {
	display: block;
	margin: 0 0 14px;
	font-size: 0.88rem;
	color: var(--folhado);
	font-weight: 600;
}

.cartacasta__janela {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 0 0;
	border-top: 1px solid var(--veio);
	font-size: 0.85rem;
	color: var(--sombra);
}

.cartacasta__janela span {
	display: block;
}

.cartacasta__seta {
	margin-top: auto;
	align-self: flex-start;
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.cartacasta__seta::after {
	content: ' \2192';
	white-space: pre;
}

/* =========================================================================
   11. Sobrepor Colheitas
   ========================================================================= */

.sobreposicao {
	border: 1px solid var(--veio);
	border-radius: var(--radio);
	background: var(--painel-local);
	padding: 24px;
}

.sobreposicao__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.sobreposicao__rotulo {
	display: block;
	margin: 0 8px 0 0;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--sombra);
}

.sobreposicao__ano {
	min-height: 40px;
	min-width: 68px;
	padding: 8px 14px;
	border: 1px solid var(--gume);
	border-radius: var(--radio);
	background: transparent;
	color: var(--grafite);
	font-family: 'Work Sans', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

.sobreposicao__ano[aria-pressed='true'] {
	background: var(--ginja);
	border-color: var(--ginja);
	color: var(--granito);
}

.sobreposicao__acoes {
	display: flex;
	gap: 10px;
	margin: 4px 0 22px;
	flex-wrap: wrap;
}

.sobreposicao__escala {
	display: block;
	position: relative;
	height: 22px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--gume);
}

.sobreposicao__mes {
	position: absolute;
	bottom: 2px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sombra);
	transform: translateX(2px);
}

.sobreposicao__pista {
	display: block;
	margin-bottom: 14px;
	padding-top: 6px;
	border-top: 1px dashed var(--veio);
}

.sobreposicao__marca {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.sobreposicao__numero {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ginja);
}

.sobreposicao__resumo {
	display: block;
	font-size: 0.82rem;
	color: var(--sombra);
}

.sobreposicao__linha {
	display: grid;
	grid-template-columns: 148px 1fr;
	align-items: center;
	gap: 12px;
	margin-bottom: 5px;
}

.sobreposicao__casta {
	display: block;
	font-size: 0.82rem;
	color: var(--sombra);
	text-align: right;
}

.sobreposicao__calha {
	display: block;
	position: relative;
	height: 16px;
	background: var(--fundo-local);
	border: 1px solid var(--veio);
	border-radius: 2px;
}

/* Een span zonder display: block tekent geen balk, hoe hoog je hem ook
   maakt. Vandaar block en een echte hoogte in pixels. */
.sobreposicao__faixa {
	display: block;
	position: absolute;
	top: 2px;
	bottom: 2px;
	min-width: 4px;
	border-radius: 2px;
	background: var(--ginja);
}

.sobreposicao__comum {
	display: grid;
	grid-template-columns: 148px 1fr;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--gume);
}

.sobreposicao__calha--comum {
	height: 20px;
	border-color: var(--gume);
}

.sobreposicao__faixa--comum {
	background: repeating-linear-gradient(135deg, var(--folhado) 0 6px, #3c471a 6px 12px);
}

.sobreposicao__presado {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 26px;
}

.sobreposicao__presado li {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--veio);
	border-left: 3px solid var(--folhado);
	background: var(--fundo-local);
	font-size: 0.9rem;
}

.sobreposicao__presado b {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sombra);
	margin-bottom: 3px;
}

.sobreposicao__vazio {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px dashed var(--gume);
	color: var(--sombra);
	font-size: 0.92rem;
}

/* =========================================================================
   12. Emparelhar Castas
   ========================================================================= */

.emparelha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 34px;
}

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

.emparelha__lado li {
	margin: 0 0 10px;
}

.emparelha__titulo {
	display: block;
	margin: 0 0 12px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sombra);
}

.emparelha__peca {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	padding: 11px 15px;
	border: 1px solid var(--gume);
	border-radius: var(--radio);
	background: var(--painel-local);
	color: var(--grafite);
	font-family: 'Work Sans', sans-serif;
	font-size: 0.96rem;
	text-align: left;
	cursor: pointer;
}

.emparelha__peca[aria-pressed='true'] {
	border-color: var(--ginja);
	border-width: 2px;
	background: var(--fundo-local);
}

.emparelha__peca[data-preso='sim'] {
	border-color: var(--folhado);
	background: var(--fundo-local);
	cursor: default;
}

.emparelha__selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--veio);
	background: var(--painel-local);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--sombra);
}

.emparelha__peca[data-preso='sim'] .emparelha__selo {
	background: var(--folhado);
	border-color: var(--folhado);
	color: var(--granito);
}

.emparelha__par {
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--veio);
	border-left: 3px solid var(--ginja);
	background: var(--fundo-local);
	font-size: 0.95rem;
	min-height: 62px;
}

.emparelha__par b {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sombra);
	margin-bottom: 3px;
}

.emparelha__dica {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed var(--folhado);
	background: transparent;
	color: var(--folhado);
	font-size: 0.9rem;
	font-weight: 600;
}

.emparelha__rodape {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.emparelha__conta {
	display: block;
	font-size: 0.88rem;
	color: var(--sombra);
}

.ferramenta {
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 34px;
	align-items: start;
}

.ferramenta__vista img {
	width: 100%;
	border: 1px solid var(--veio);
}

.ferramenta__faixa {
	margin-bottom: 30px;
	border: 1px solid var(--veio);
}

.ferramenta__faixa img {
	width: 100%;
	max-height: 230px;
	object-fit: cover;
}

/* =========================================================================
   13. Tabela de safra
   ========================================================================= */

.caixilho {
	overflow-x: auto;
	border: 1px solid var(--veio);
	background: var(--painel-local);
}

.tabelasafra {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.tabelasafra caption {
	padding: 14px 18px;
	text-align: left;
	font-size: 0.86rem;
	color: var(--sombra);
	border-bottom: 1px solid var(--veio);
}

.tabelasafra th,
.tabelasafra td {
	padding: 12px 18px;
	text-align: left;
	border-bottom: 1px solid var(--veio);
	vertical-align: top;
}

.tabelasafra thead th {
	font-family: 'Work Sans', sans-serif;
	font-size: 0.79rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
	white-space: nowrap;
}

.tabelasafra tbody th {
	font-family: 'Prata', Georgia, serif;
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--ginja);
	white-space: nowrap;
}

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

.tabelasafra__janela {
	color: var(--folhado);
	font-weight: 600;
	white-space: nowrap;
}

/* =========================================================================
   14. Folha de prova: de meningen
   ========================================================================= */

.provas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.provas > li {
	margin: 0;
}

.provas > li:nth-child(even) {
	margin-top: 54px;
}

.folhaprova {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 18px;
	height: 100%;
	padding: 20px 22px;
	background: var(--painel-local);
	border: 1px solid var(--veio);
	border-radius: var(--radio);
}

.folhaprova__escala {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	border-right: 1px solid var(--veio);
	padding-right: 12px;
}

.folhaprova__escala li {
	margin: 0;
}

.folhaprova__risco {
	display: block;
	width: 18px;
	height: 6px;
	border: 1px solid var(--gume);
	border-radius: 1px;
	background: transparent;
}

.folhaprova__risco--posto {
	background: var(--ginja);
	border-color: var(--ginja);
	width: 22px;
	height: 8px;
}

.folhaprova__corpo {
	display: flex;
	flex-direction: column;
}

.folhaprova__citacao {
	margin: 0 0 14px;
	font-size: 1.02rem;
}

.folhaprova__pe {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--veio);
	font-size: 0.84rem;
	color: var(--sombra);
}

.folhaprova__quem {
	display: block;
	font-weight: 600;
	color: var(--grafite);
	font-size: 0.92rem;
	margin-bottom: 2px;
}

/* =========================================================================
   15. Assinaturas
   ========================================================================= */

.assinatura {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.assinatura > li {
	margin: 0;
}

.grauassinatura {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 24px 26px;
	background: var(--painel-local);
	border: 1px solid var(--veio);
	border-top: 3px solid var(--ginja);
	border-radius: var(--radio);
}

.grauassinatura h3 {
	margin-bottom: 10px;
}

.grauassinatura p {
	font-size: 0.94rem;
	color: var(--sombra);
}

.grauassinatura__lista {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.grauassinatura__lista li {
	margin: 0 0 6px;
	padding-left: 18px;
	position: relative;
	color: var(--sombra);
}

.grauassinatura__lista li::before {
	content: '\2022';
	position: absolute;
	left: 2px;
	color: var(--ginja);
}

.grauassinatura__preco {
	display: block;
	margin: auto 0 16px;
	padding-top: 14px;
	border-top: 1px solid var(--veio);
	font-family: 'Prata', Georgia, serif;
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--ginja);
}

.grauassinatura__preco small {
	display: block;
	font-family: 'Work Sans', sans-serif;
	font-size: 0.82rem;
	color: var(--sombra);
}

/* =========================================================================
   16. Contagem, pessoal
   ========================================================================= */

.contagem {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contagem > li {
	margin: 0;
}

.conta {
	height: 100%;
	padding: 22px 20px;
	border: 1px solid var(--veio);
	border-radius: var(--radio);
	background: var(--painel-local);
}

/* Grote sierletters in de randkleur halen 1.3:1. Deze cijfers staan
   daarom in --ginja, dat 6.23:1 op het paneel haalt. */
.conta__numero {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: clamp(2.2rem, 4.4vw, 3rem);
	line-height: 1;
	color: var(--ginja);
	margin-bottom: 8px;
}

.conta__palavra {
	display: block;
	font-size: 0.9rem;
	color: var(--sombra);
}

.pessoal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pessoal > li {
	margin: 0;
}

.retratoquinta {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 22px;
	align-items: start;
	height: 100%;
}

.pessoal > li:nth-child(even) .retratoquinta {
	grid-template-columns: 1fr 168px;
}

.pessoal > li:nth-child(even) .retratoquinta__cara {
	order: 2;
}

.retratoquinta__cara {
	width: 100%;
	border: 1px solid var(--veio);
}

.retratoquinta h3 {
	margin-bottom: 2px;
}

.retratoquinta__papel {
	display: block;
	margin-bottom: 10px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--folhado);
}

.retratoquinta p {
	font-size: 0.94rem;
	color: var(--sombra);
	margin-bottom: 0;
}

/* =========================================================================
   17. Herbario: het journaal
   ========================================================================= */

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

.herbario > li {
	margin: 0 0 20px;
}

.herbario > li:last-child {
	margin-bottom: 0;
}

.fichaherbario {
	display: grid;
	grid-template-columns: 1fr 214px;
	gap: 22px 30px;
	padding: 24px 26px;
	border: 1px solid var(--veio);
	border-radius: var(--radio);
	background: var(--painel-local);
}

.fichaherbario--capa {
	grid-template-columns: 260px 1fr 214px;
}

.fichaherbario__capa {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--veio);
	grid-row: span 2;
}

.fichaherbario__texto h3 {
	margin-bottom: 8px;
}

.fichaherbario__texto h3 a {
	text-decoration: none;
	color: var(--grafite);
	display: inline-block;
	min-height: 38px;
}

.fichaherbario__texto h3 a:hover,
.fichaherbario__texto h3 a:focus-visible {
	color: var(--ginja-funda);
	text-decoration: underline;
}

.fichaherbario__texto p {
	margin-bottom: 0;
	color: var(--sombra);
	font-size: 0.95rem;
}

.fichaherbario__etiqueta {
	align-self: end;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--gume);
	border-radius: 2px;
	background: var(--fundo-local);
	font-size: 0.8rem;
	line-height: 1.5;
}

.fichaherbario__etiqueta dt {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sombra);
}

.fichaherbario__etiqueta dd {
	display: block;
	margin: 0 0 7px;
	color: var(--grafite);
}

.fichaherbario__etiqueta dd:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   18. Escrito: een los stuk uit het journaal
   ========================================================================= */

.escrito {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	max-width: 900px;
	margin: 0 auto;
}

.escrito__corpo p {
	font-size: 1.04rem;
}

.margemficha {
	position: sticky;
	top: calc(var(--beiral-alto) + 20px);
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--gume);
	border-radius: 2px;
	background: var(--polpa);
	font-size: 0.8rem;
	line-height: 1.5;
}

.margemficha dt {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sombra);
}

.margemficha dd {
	display: block;
	margin: 0 0 8px;
	color: var(--grafite);
}

.margemficha dd:last-child {
	margin-bottom: 0;
}

.escrito__volta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--veio);
}

/* =========================================================================
   19. Perguntas
   ========================================================================= */

.perguntas {
	max-width: 860px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.perguntas > li {
	margin: 0 0 12px;
}

.pergunta {
	border: 1px solid var(--veio);
	border-radius: var(--radio);
	background: var(--painel-local);
}

.pergunta > summary {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 13px 18px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

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

.pergunta > summary::after {
	content: '+';
	margin-left: auto;
	padding-left: 14px;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.4rem;
	color: var(--ginja);
	line-height: 1;
}

.pergunta[open] > summary::after {
	content: '\2212';
}

.pergunta__resposta {
	padding: 0 18px 16px;
	color: var(--sombra);
	font-size: 0.96rem;
}

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

/* =========================================================================
   20. Apelo: het slotblok met een beeld eronder
   ========================================================================= */

.apelo {
	position: relative;
	border-top: 1px solid var(--veio);
	border-bottom: 1px solid var(--veio);
	background-color: var(--polpa);
	background-image: linear-gradient(90deg, rgba(247, 242, 241, 0.10) 0%, rgba(247, 242, 241, 0.45) 30%, rgba(247, 242, 241, 0.90) 48%, rgba(247, 242, 241, 0.97) 62%), url('images/carreiro-apelo.jpg');
	background-size: auto, cover;
	background-position: center, center left;
}

.apelo__interior {
	display: flex;
	justify-content: flex-end;
	padding: 62px 0;
}

.apelo__palavra {
	max-width: 470px;
}

.apelo__palavra p {
	color: var(--sombra);
}

.apelo__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* =========================================================================
   21. Caderneta: de formulieren
   ========================================================================= */

.caderneta {
	max-width: 620px;
}

.risca {
	display: block;
	margin-bottom: 16px;
}

.risca > span {
	display: block;
	margin-bottom: 5px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--sombra);
}

.risca input,
.risca select,
.risca textarea {
	display: block;
	width: 100%;
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid var(--gume);
	border-radius: var(--radio);
	background: var(--granito);
	color: var(--grafite);
	font-family: 'Work Sans', sans-serif;
	font-size: 1rem;
}

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

.risca__ajuda {
	display: block;
	margin-top: 5px;
	font-size: 0.83rem;
	color: var(--sombra);
	font-weight: 400;
}

/* De val voor robots staat buiten beeld en is doorzichtig, maar hij is
   niet display:none: dan zou een deel van de robots hem overslaan. */
.visgo {
	position: absolute;
	left: -6000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.notabreve {
	margin: 0 0 22px;
	padding: 14px 18px;
	border: 1px solid var(--veio);
	border-left: 3px solid var(--folhado);
	background: var(--polpa);
	font-size: 0.95rem;
}

.notabreve--travada {
	border-left-color: var(--ginja);
}

.dupla {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 44px;
	align-items: start;
}

.contactos__ficha {
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--veio);
	background: var(--polpa);
	font-size: 0.96rem;
}

.contactos__ficha dt {
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sombra);
	margin-bottom: 2px;
}

.contactos__ficha dd {
	margin: 0 0 14px;
}

.contactos__ficha dd:last-child {
	margin-bottom: 0;
}

.contactos__ficha a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}

/* =========================================================================
   22. Tabuleta: de strook onderaan
   ========================================================================= */

.tabuleta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--polpa);
	border-top: 2px solid var(--ginja);
	box-shadow: 0 -6px 22px rgba(36, 30, 32, 0.13);
}

.tabuleta__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	padding: 14px 0;
}

.tabuleta__palavra {
	flex: 1 1 320px;
	margin: 0;
	font-size: 0.9rem;
}

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

/* =========================================================================
   23. Adega: de voet
   ========================================================================= */

.adega {
	background: var(--polpa);
	border-top: 1px solid var(--veio);
	padding: 48px 0 26px;
	margin-top: 0;
}

.adega__grelha {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 34px;
}

.adega__nome {
	display: inline-flex;
	align-items: baseline;
	font-family: 'Prata', Georgia, serif;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	color: var(--grafite);
	min-height: 40px;
	margin-bottom: 12px;
}

.adega__nome:hover,
.adega__nome:focus-visible {
	color: var(--ginja-funda);
}

.adega p {
	font-size: 0.92rem;
	color: var(--sombra);
}

.adega h2 {
	font-family: 'Work Sans', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sombra);
	margin-bottom: 14px;
}

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

.adega__lista li {
	margin: 0 0 2px;
}

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

.adega__lista a:hover,
.adega__lista a:focus-visible {
	color: var(--ginja-funda);
	text-decoration: underline;
}

.adega__ficha {
	margin: 0;
	font-size: 0.92rem;
}

.adega__ficha dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sombra);
}

.adega__ficha dd {
	margin: 0 0 12px;
	color: var(--grafite);
}

.adega__ficha dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--ginja);
}

.adega__pe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid var(--veio);
	font-size: 0.85rem;
	color: var(--sombra);
}

.adega__pe p {
	margin: 0;
	font-size: 0.85rem;
}

/* =========================================================================
   24. Losse bladzijden, 404 en tekstpagina's
   ========================================================================= */

.semrasto {
	padding: 84px 0;
	text-align: center;
}

/* .semrasto p is (0,1,1) en zou een regel op .semrasto__numero met (0,1,0)
   overstemmen. Vandaar het uitsluiten. */
.semrasto p:not(.semrasto__numero) {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
	color: var(--sombra);
}

.semrasto__numero {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: clamp(4.6rem, 14vw, 9rem);
	line-height: 1;
	color: var(--ginja);
	margin: 0 0 10px;
}

.semrasto__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

.lauda {
	max-width: 860px;
}

.lauda h2 {
	margin-top: 40px;
	font-size: 1.5rem;
}

.lauda h2:first-child {
	margin-top: 0;
}

.lauda h3 {
	margin-top: 26px;
	font-size: 1.14rem;
}

.lauda dl {
	margin: 0 0 20px;
	padding: 18px 20px;
	border: 1px solid var(--veio);
	background: var(--polpa);
}

.lauda dt {
	font-weight: 600;
	margin-bottom: 2px;
}

.lauda dd {
	margin: 0 0 14px;
	color: var(--sombra);
}

.lauda dd:last-child {
	margin-bottom: 0;
}

.lauda__data {
	display: block;
	margin-bottom: 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--veio);
	font-size: 0.86rem;
	color: var(--sombra);
}

.lauda__ligacoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--veio);
}

.tabelachaves {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.tabelachaves th,
.tabelachaves td {
	padding: 11px 15px;
	text-align: left;
	border-bottom: 1px solid var(--veio);
	vertical-align: top;
}

.tabelachaves thead th {
	font-family: 'Work Sans', sans-serif;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
	white-space: nowrap;
}

.tabelachaves tbody th {
	font-weight: 600;
	font-family: 'Work Sans', sans-serif;
	word-break: break-word;
}

.tabelapreco {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.tabelapreco caption {
	padding: 14px 18px;
	text-align: left;
	font-size: 0.86rem;
	color: var(--sombra);
	border-bottom: 1px solid var(--veio);
}

.tabelapreco th,
.tabelapreco td {
	padding: 12px 18px;
	text-align: left;
	border-bottom: 1px solid var(--veio);
}

.tabelapreco thead th {
	font-family: 'Work Sans', sans-serif;
	font-size: 0.77rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sombra);
	white-space: nowrap;
}

.linhapreco th {
	font-weight: 600;
}

.linhapreco__valor {
	font-family: 'Prata', Georgia, serif;
	font-size: 1.14rem;
	color: var(--ginja);
	white-space: nowrap;
}

/* =========================================================================
   25. Verschijnen bij het rollen
   -------------------------------------------------------------------------
   De doorzichtigheid hangt aan de klasse js, die een klein script in de kop
   zet. Zonder JavaScript is er dus niets doorzichtig en staat de hele
   bladzijde er gewoon.
   ========================================================================= */

.js .amadurece {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .amadurece.amadurece--pronta {
	opacity: 1;
	transform: none;
}

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

/* =========================================================================
   26. Smallere schermen
   ========================================================================= */

@media (max-width: 1040px) {
	.encosta {
		grid-template-columns: 1fr;
	}

	.encosta__palavra {
		padding: 46px 0 34px;
	}

	.encosta__vista {
		min-height: 300px;
		margin: 0 -22px;
	}

	.ferramenta {
		grid-template-columns: 1fr;
	}

	.ferramenta__vista {
		max-width: 460px;
	}

	.fichaherbario--capa {
		grid-template-columns: 1fr 214px;
	}

	.fichaherbario__capa {
		grid-row: auto;
		grid-column: 1 / -1;
		max-height: 240px;
	}

	.adega__grelha {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.aldraba {
		display: inline-flex;
	}

	.beiral__linha {
		flex-wrap: wrap;
	}

	/* De knop krijgt de vrije ruimte, niet de hamburger: anders staat het
	   menu op 390px tegen de merknaam aan. */
	.beiral__apelo {
		margin-left: auto;
	}

	.aldraba {
		margin-left: 0;
	}

	.carreiro {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		margin: 0 0 12px;
		padding: 6px 0 10px;
		border-top: 1px solid var(--veio);
	}

	.carreiro--aberto {
		display: flex;
	}

	/* flex en niet inline-flex: anders loopt de scheidingslijn maar tot
	   het eind van het woord en staat het menu er rafelig bij. */
	.carreiro a {
		display: flex;
		min-height: 46px;
		padding: 10px 6px;
		font-size: 1rem;
		border-bottom: 1px solid var(--veio);
		border-radius: 0;
	}

	.duo,
	.dupla,
	.emparelha,
	.escrito,
	.pessoal {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.escrito {
		gap: 20px;
	}

	.margemficha {
		position: static;
	}

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

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

	.assinatura {
		grid-template-columns: 1fr;
	}

	.provas {
		grid-template-columns: 1fr;
	}

	.provas > li:nth-child(even) {
		margin-top: 0;
	}

	.sobreposicao__presado {
		grid-template-columns: 1fr;
	}

	.fichaherbario,
	.fichaherbario--capa {
		grid-template-columns: 1fr;
	}

	.fichaherbario__capa {
		max-height: 220px;
	}

	.apelo {
		background-image: linear-gradient(180deg, rgba(247, 242, 241, 0.20) 0%, rgba(247, 242, 241, 0.60) 20%, rgba(247, 242, 241, 0.94) 32%, rgba(247, 242, 241, 0.98) 46%), url('images/carreiro-apelo.jpg');
		background-position: center, center top;
	}

	.apelo__interior {
		justify-content: flex-start;
		padding: 190px 0 48px;
	}
}

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

	.talhao {
		padding: 44px 0;
	}

	.pomar {
		grid-template-columns: 1fr;
	}

	.retratoquinta,
	.pessoal > li:nth-child(even) .retratoquinta {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.retratoquinta__cara {
		max-width: 190px;
	}

	.pessoal > li:nth-child(even) .retratoquinta__cara {
		order: 0;
	}

	.sobreposicao {
		padding: 18px 15px;
	}

	.sobreposicao__linha,
	.sobreposicao__comum {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.sobreposicao__casta {
		text-align: left;
	}

	.encosta__lote {
		gap: 12px 18px;
	}

	/* Een brede tabel op een telefoon wordt een stapel: de kolomnaam komt
	   uit data-titulo. Een omhulsel met overflow alleen is hier te broos. */
	.caixilho {
		border: 0;
		overflow: visible;
	}

	.tabelasafra,
	.tabelasafra tbody,
	.tabelasafra tr,
	.tabelasafra th,
	.tabelasafra td {
		display: block;
		white-space: normal;
	}

	.tabelasafra thead {
		display: none;
	}

	/* Een caption blijft table-caption ook als de rest van de tabel een
	   stapel wordt, en krimpt dan tot een smalle kolom naast niets. */
	.tabelasafra caption,
	.tabelapreco caption {
		display: block;
		border: 1px solid var(--veio);
		border-bottom: 0;
	}

	.tabelasafra tr {
		border: 1px solid var(--veio);
		border-top: 0;
		padding: 6px 0;
	}

	.tabelasafra tbody th {
		border-bottom: 1px solid var(--veio);
		font-size: 1.14rem;
	}

	.tabelasafra td {
		border-bottom: 0;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.tabelasafra td::before {
		content: attr(data-titulo);
		display: block;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--sombra);
	}

	.tabelapreco,
	.tabelapreco tbody,
	.tabelapreco tr,
	.tabelapreco th,
	.tabelapreco td {
		display: block;
		white-space: normal;
	}

	.tabelapreco thead {
		display: none;
	}

	.tabelapreco tr {
		border: 1px solid var(--veio);
		border-bottom: 0;
		padding: 8px 0;
	}

	.tabelapreco tbody tr:last-child {
		border-bottom: 1px solid var(--veio);
	}

	.tabelapreco th,
	.tabelapreco td {
		border-bottom: 0;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.tabelapreco td::before {
		content: attr(data-titulo);
		display: block;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--sombra);
	}

	.tabelachaves,
	.tabelachaves tbody,
	.tabelachaves tr,
	.tabelachaves th,
	.tabelachaves td {
		display: block;
		white-space: normal;
	}

	.tabelachaves thead {
		display: none;
	}

	.tabelachaves tr {
		border: 1px solid var(--veio);
		border-bottom: 0;
		padding: 8px 0;
	}

	.tabelachaves tbody tr:last-child {
		border-bottom: 1px solid var(--veio);
	}

	.tabelachaves th,
	.tabelachaves td {
		border-bottom: 0;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.tabelachaves td::before {
		content: attr(data-titulo);
		display: block;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--sombra);
	}

	.adega__grelha {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.tabuleta__botoes .podao {
		flex: 1 1 auto;
	}
}

/* =========================================================================
   27. Losse blokken die na de eerste opzet nodig bleken
   ========================================================================= */

.talhao__mais {
	margin: 26px 0 0;
}

.parelha {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 40px;
	align-items: center;
	margin-bottom: 34px;
}

.parelha h2 {
	margin-bottom: 14px;
}

.parelha p {
	margin-bottom: 0;
	color: var(--sombra);
}

.parelha__vista img {
	width: 100%;
	border: 1px solid var(--veio);
}

.adega__legais {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
}

.adega__legais a {
	font-size: 0.85rem;
	color: var(--sombra);
}

@media (max-width: 900px) {
	.parelha {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.parelha__vista {
		max-width: 420px;
	}
}

/* =========================================================================
   28. Bladzijden binnen: castas, meningen en contact
   ========================================================================= */

.duo--espelho .duo__retrato {
	order: 2;
}

.castalista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: casta;
}

.castalista > li {
	margin: 0 0 18px;
}

.castalista > li:last-child {
	margin-bottom: 0;
}

.castaficha {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 290px;
	gap: 20px 26px;
	align-items: start;
	padding: 22px 26px;
	border: 1px solid var(--veio);
	border-left: 3px solid var(--ginja);
	border-radius: var(--radio);
	background: var(--painel-local);
}

.castaficha__ordem {
	display: block;
	font-family: 'Prata', Georgia, serif;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--ginja);
}

.castaficha__texto h3 {
	margin-bottom: 8px;
}

.castaficha__texto p {
	margin-bottom: 0;
	color: var(--sombra);
	font-size: 0.96rem;
}

.castaficha__ficha {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--gume);
	border-radius: 2px;
	background: var(--fundo-local);
	font-size: 0.85rem;
	line-height: 1.5;
}

.castaficha__ficha dt {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sombra);
}

.castaficha__ficha dd {
	display: block;
	margin: 0 0 8px;
	color: var(--grafite);
}

.castaficha__ficha dd:last-child {
	margin-bottom: 0;
}

.dupla--espelho > :first-child {
	order: 2;
}

.provas--coluna {
	grid-template-columns: 1fr;
	gap: 18px;
}

.provas--coluna > li:nth-child(even) {
	margin-top: 0;
}

.contactos__vista {
	margin-top: 26px;
}

.contactos__vista img {
	width: 100%;
	border: 1px solid var(--veio);
}

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

	.castaficha__ficha {
		grid-column: 1 / -1;
	}

	.dupla--espelho > :first-child {
		order: 0;
	}
}

/* Een verwijzing midden in lopende tekst is maar 19px hoog en op een
   telefoon niet te raken. inline-flex en niet inline: een inline element
   trekt zich van een hoogte niets aan. */
.talhao__mais a,
.duo p a,
.lauda dd a,
.castaficha__ficha dd a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
}