/*
Theme Name: Cognida Fichero
Description: Cognida's own theme: a card catalogue drawer and its index cards.
Version: 1.3.0
Requires PHP: 8.2
Text Domain: cognida-fichero
License: GPL-2.0-or-later
*/

/* ── type ─────────────────────────────────────────────── */

@font-face {
	font-family: "Young Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/young-serif-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Rosario";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/rosario-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Rosario";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/rosario-italic-latin.woff2") format("woff2");
}

/* ── tokens ───────────────────────────────────────────── */

:root {
	--ground: #e3e9e5;
	--card: #fffdf8;
	--drawer: #1d3b2f;
	--drawer-face: #234838;
	--drawer-edge: #2e5a47;
	--brass: #c9a45c;
	--brass-deep: #8f6d31;
	--brass-light: #e6cd93;
	--green: #217a4b;
	--link: #1a6640;
	--red: #c8453b;
	--red-ink: #a83a31;
	--ruling: #c9d4dc;
	--text: #1e2420;
	--muted: #5b6b62;
	--shadow: 3px 3px 0 rgba(29, 59, 47, 0.16);
	--serif: "Young Serif", "Iowan Old Style", Georgia, serif;
	--sans: "Rosario", "Gill Sans", "Segoe UI", sans-serif;
	--line: 1.65em;
	--measure: 66ch;
	--step-1: 1.25rem;
	--step-2: 1.5625rem;
	--step-3: 1.953rem;
	--step-4: 2.441rem;
	--step-5: 3.052rem;
}

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.65;
	font-kerning: normal;
}

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--drawer); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.saltar {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 50;
	padding: 0.5rem 1rem;
	background: var(--card);
	color: var(--text);
}
.saltar:focus { top: 1rem; }

/* ── the drawer (header) ──────────────────────────────── */

.cajon {
	padding-top: 2.75rem;
	position: relative;
}

.pestanas {
	position: relative;
	z-index: 1;
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.pestanas ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 40%;
	display: flex;
	gap: 0.5rem;
	align-items: flex-end;
	justify-content: flex-end;
}
.pestanas li { margin: 0; }
.pestanas a {
	display: block;
	min-width: 8.5rem;
	padding: 0.55rem 1.1rem 0.75rem;
	margin-bottom: -0.35rem;
	background: #f1f0e8;
	border-top: 4px solid var(--green);
	border-radius: 0.55rem 0.55rem 0 0;
	color: var(--text);
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transform: translateY(0.45rem);
	transition: transform 0.18s ease;
}
.pestanas a:hover { transform: translateY(0.1rem); color: var(--text); }
.pestanas a:focus-visible { outline-offset: -4px; }
.pestanas .current-menu-item > a,
.pestanas .current-menu-ancestor > a,
.pestanas .current-post-ancestor > a,
.pestanas .current-category-ancestor > a,
.pestanas a[aria-current] {
	background: var(--card);
	border-top-color: var(--red);
	transform: translateY(-0.35rem);
}

.frente {
	position: relative;
	z-index: 2;
	background: var(--drawer);
	border-top: 3px solid var(--drawer-edge);
	box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.18);
}
.frente-interior {
	max-width: 76rem;
	margin: 0 auto;
	padding: 1.4rem 1.5rem 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

/* the brass label holder and its white slip */
.portaetiqueta {
	position: relative;
	display: block;
	width: min(25rem, 100%);
	padding: 0.5rem 0.6rem;
	background: linear-gradient(180deg, var(--brass-light), var(--brass) 45%, var(--brass-deep));
	border-radius: 3px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.portaetiqueta::before,
.portaetiqueta::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--brass-deep);
	box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}
.portaetiqueta::before { left: 0.18rem; }
.portaetiqueta::after { right: 0.18rem; }
.portaetiqueta a {
	display: block;
	margin: 0 0.4rem;
	padding: 0.55rem 0.9rem 0.45rem;
	background: var(--card);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18);
}
.portaetiqueta img { display: block; width: 100%; height: auto; }

.lema {
	margin: 0;
	flex: 1;
	color: #dfe8e2;
	font-family: var(--serif);
	font-size: var(--step-1);
	line-height: 1.3;
}

.tirador {
	flex: none;
	width: 6.5rem;
	height: 2.4rem;
	border: 0.45rem solid var(--brass);
	border-top: 0;
	border-radius: 0 0 4rem 4rem;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), inset 0 -2px 0 var(--brass-deep);
	position: relative;
}
.tirador::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	right: -1.1rem;
	top: -0.25rem;
	height: 0.55rem;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brass-light), var(--brass-deep));
}

/* ── page frame ───────────────────────────────────────── */

.contenido {
	max-width: 76rem;
	margin: 0 auto;
	padding: 2.75rem 1.5rem 4rem;
}

/* ── the index card ───────────────────────────────────── */

.tarjeta {
	position: relative;
	background: var(--card);
	border-top: 6px solid var(--red);
	box-shadow: var(--shadow);
	padding: 1.6rem 2rem 3.4rem;
}
.tarjeta::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.05rem;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: -0.525rem;
	border-radius: 50%;
	background: var(--ground);
	box-shadow: inset 1.5px 1.5px 0 rgba(29, 59, 47, 0.28);
}
.tarjeta--verde { border-top-color: var(--green); }

/* a title typed on the heading line */
.renglon {
	margin: 0;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--red);
}
.renglon a { color: inherit; text-decoration: none; }
.renglon a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* text written on the card's ruling */
.pautado {
	margin: 0;
	line-height: var(--line);
	background-image: linear-gradient(transparent calc(var(--line) - 1px), var(--ruling) calc(var(--line) - 1px));
	background-size: 100% var(--line);
	background-attachment: local;
}

.signatura-tarjeta {
	margin: 0 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.25rem;
	color: var(--muted);
	font-size: 0.875rem;
	line-height: 1.4;
}
.signatura-tarjeta a { color: var(--link); }

/* ── home: the open drawer ────────────────────────────── */

.portada-lema {
	margin-bottom: 2.75rem;
	max-width: 52rem;
	border-top-color: var(--green);
}
.portada-lema h1 {
	font-size: clamp(2rem, 4.6vw, var(--step-5));
	margin: 0 0 0.9rem;
}
.portada-lema .pautado { max-width: 44rem; }

.cajon-abierto {
	position: relative;
	margin: 0 0 3rem;
	padding: 0 1.25rem 1.25rem;
	border: 0.9rem solid var(--drawer);
	border-top: 0;
	background: #cfd9d2;
	box-shadow: inset 0 10px 18px -12px rgba(0, 0, 0, 0.35);
}
.cajon-abierto > h2 {
	margin: 0;
	padding: 1rem 0 0.25rem;
	color: var(--drawer);
	font-size: var(--step-1);
}

.mazo {
	list-style: none;
	margin: 0;
	padding: 2.4rem 0 0;
	position: relative;
}
.mazo > li {
	position: relative;
	margin: -2.2rem 0 0;
}
.mazo > li:first-child { margin-top: 0; }

.mazo-tarjeta {
	position: relative;
	background: var(--card);
	box-shadow: 0 -1px 0 rgba(29, 59, 47, 0.18), var(--shadow);
	padding: 0 2rem;
	min-height: 2.2rem;
}
.mazo-tarjeta .pestana {
	position: absolute;
	top: -2.25rem;
	left: var(--tab-x, 0%);
	min-width: 12rem;
	max-width: 32%;
	padding: 0.45rem 1rem 0.5rem;
	background: var(--card);
	border-top: 4px solid var(--green);
	border-radius: 0.55rem 0.55rem 0 0;
	font-family: var(--serif);
	font-size: 0.95rem;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text);
}
.mazo > li:nth-child(3n + 2) .mazo-tarjeta { --tab-x: 34%; }
.mazo > li:nth-child(3n + 3) .mazo-tarjeta { --tab-x: 67%; }

.mazo-tarjeta--guia .pestana { border-top-color: var(--drawer); background: #f1f0e8; }
.mazo-tarjeta--guia { background: #f1f0e8; }

/* the front card is open */
.mazo > li:last-child .mazo-tarjeta {
	border-top: 6px solid var(--red);
	padding: 1.6rem 2rem 3.6rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
	gap: 1.5rem 2.5rem;
}
.mazo > li:last-child .mazo-tarjeta .pestana { border-top-color: var(--red); top: -2.6rem; }
.mazo > li:last-child .mazo-tarjeta::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1.05rem;
	width: 1.05rem;
	height: 1.05rem;
	margin-left: -0.525rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass) 45%, var(--brass-deep));
	box-shadow: 0 0 0 2px rgba(29, 59, 47, 0.25);
}
.mazo-tarjeta h3 { font-size: var(--step-3); margin: 0 0 1rem; }
.mazo-tarjeta .pautado { margin-bottom: 0.75rem; }
.mazo-tarjeta figure { margin: 0; align-self: start; }
.mazo-tarjeta figure img { display: block; width: 100%; border: 1px solid var(--ruling); }
.mazo-vacio { margin: 0; padding: 1rem 0; }

.hoja.texto-portada { max-width: calc(var(--measure) + 4rem); margin-left: 0; }
.home .contenido > .ficha { margin-left: 0; max-width: calc(var(--measure) + 4rem); }

/* ── article ──────────────────────────────────────────── */

.ficha-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 1.5rem 2.75rem;
	align-items: start;
	margin-bottom: 2.75rem;
	padding-top: 1.4rem;
	border-top: 10px solid var(--green);
}
.ficha-cabecera .signatura-tarjeta { grid-column: 1 / -1; margin: 0; }
.ficha-cabecera h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 3.6vw, var(--step-4));
}
.ficha-cabecera .pautado { font-size: 1.1875rem; }
.ficha-cabecera figure { margin: 0; }
.ficha-cabecera figure img { display: block; width: 100%; border: 1px solid var(--ruling); background: var(--card); }

.autor-linea {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.autor-linea img { width: 1.4rem; height: 1.4rem; border-radius: 3px; }

.hoja {
	max-width: calc(var(--measure) + 5rem);
	margin: 0 auto;
	padding: 2.5rem 2.5rem 3rem;
	background: var(--card);
	box-shadow: var(--shadow);
}

/* the article body, styled by its elements */
.cuerpo > * { margin-top: 0; margin-bottom: 1.15rem; }
.cuerpo > :last-child { margin-bottom: 0; }
.cuerpo h2 {
	font-size: var(--step-3);
	margin: 3rem 0 1rem;
	padding-top: 1.1rem;
	border-top: 2px solid var(--red);
}
.cuerpo > h2:first-child { margin-top: 0; }
.cuerpo h3 { font-size: var(--step-2); margin: 2rem 0 0.75rem; }
.cuerpo ul,
.cuerpo ol { padding-left: 1.4rem; }
.cuerpo li { margin-bottom: 0.4rem; }
.cuerpo li::marker { color: var(--green); }
.cuerpo strong { font-weight: 650; }
.cuerpo code {
	padding: 0.05em 0.3em;
	background: #edf1ee;
	border-bottom: 1px solid var(--ruling);
	font-family: var(--sans);
	font-size: 0.95em;
	font-weight: 650;
}

/* figures: drawn on a smaller card set into the sheet */
.cuerpo figure {
	margin: 2.25rem -1.25rem;
}
.cuerpo figure img { display: block; width: 100%; height: auto; }
.cuerpo figcaption,
.ficha-cabecera figcaption {
	margin-top: 0.75rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--ruling);
	color: var(--muted);
	font-size: 0.9rem;
	font-style: italic;
	line-height: 1.5;
}

/* tables: a catalogue register */
.cuerpo .registro { margin: 2rem 0 0; overflow-x: auto; }
.cuerpo .registro table { margin: 0; }
.cuerpo .registro-pie { display: none; }
.cuerpo table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.45;
}
.cuerpo th,
.cuerpo td {
	padding: 0.6rem 0.75rem 0.55rem 0;
	border-bottom: 1px solid var(--ruling);
	text-align: left;
	vertical-align: top;
}
.cuerpo thead th {
	font-family: var(--serif);
	font-weight: 400;
	border-bottom: 3px double var(--green);
}
.cuerpo tbody th { font-weight: 650; }
.cuerpo caption {
	caption-side: bottom;
	padding-top: 0.6rem;
	color: var(--muted);
	font-size: 0.9rem;
	font-style: italic;
	text-align: left;
}

/* asides: a guide card filed in the text */
.cuerpo aside {
	position: relative;
	margin: 2.6rem 0 2rem;
	padding: 1.1rem 1.3rem 0.4rem;
	background: #f1f0e8;
	border-top: 4px solid var(--drawer);
}
.cuerpo aside::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1.35rem;
	width: 6.5rem;
	height: 1.35rem;
	background: #f1f0e8;
	border-top: 4px solid var(--drawer);
	border-radius: 0.45rem 0.45rem 0 0;
}
.cuerpo aside > * { margin: 0 0 0.9rem; }

/* quotes: a slip with its source */
.cuerpo blockquote {
	margin: 2rem 0;
	padding: 0.4rem 0 0.4rem 1.25rem;
	border-left: 4px solid var(--red);
	font-family: var(--serif);
	font-size: var(--step-1);
	line-height: 1.45;
}
.cuerpo blockquote p { margin: 0 0 0.5rem; }

/* steps: each number punched like a rod hole */
.cuerpo ol {
	list-style: none;
	counter-reset: paso;
	padding-left: 0;
}
.cuerpo ol > li {
	counter-increment: paso;
	position: relative;
	padding: 0.15rem 0 0.75rem 3.25rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--ruling);
}
.cuerpo ol > li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--green);
	border-radius: 50%;
	color: var(--green);
	font-family: var(--serif);
	font-size: 1.05rem;
	line-height: 2rem;
	text-align: center;
}

/* terms: an authority file */
.cuerpo dl { margin: 2rem 0; }
.cuerpo dt {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--serif);
	font-size: 1.15rem;
	border-bottom: 2px solid var(--red);
}
.cuerpo dd { margin: 0.35rem 0 0 1.75rem; }

/* questions and answers: cards you pull up by their tab */
.cuerpo details {
	margin: 0 0 0.75rem;
	background: #fff;
	border: 1px solid var(--ruling);
	border-top: 3px solid var(--green);
}
.cuerpo summary {
	cursor: pointer;
	padding: 0.8rem 3rem 0.8rem 1.1rem;
	font-family: var(--serif);
	font-size: 1.1rem;
	line-height: 1.35;
	list-style: none;
	position: relative;
}
.cuerpo summary::-webkit-details-marker { display: none; }
.cuerpo summary::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 0.9rem;
	height: 0.9rem;
	margin-top: -0.45rem;
	background:
		linear-gradient(var(--red), var(--red)) center / 100% 2px no-repeat,
		linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat;
	transition: transform 0.18s ease;
}
.cuerpo details[open] summary::after { transform: rotate(45deg); }
.cuerpo details > :not(summary) { margin: 0 1.1rem 1rem; }

/* ── The question: a full-height call slip ───────────── */

/* Ordinary pages keep space for their measurement notice. */
body:has(> .papeleta) .zocalo { padding-bottom: 16rem; }
.mostrador {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 min-height: 100svh;
 background: var(--card);
}
.consulta-marca {
 width: min(100%, 52rem);
 margin: 0 auto;
 padding: 1.15rem 1.4rem 0.75rem;
}
.consulta-marca a { display: inline-flex; align-items: center; min-height: 2rem; }
.consulta-marca img { display: block; width: 8.75rem; height: auto; }
.mostrador .mostrador-contenido {
 display: grid;
 align-items: center;
 flex: 1 0 auto;
 width: 100%;
 max-width: none;
 margin: 0;
 padding: 1.1rem 1.4rem 1.8rem;
}
.pedido { width: 100%; max-width: 46rem; margin: 0 auto; }
fieldset.casilla { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.casilla legend {
 float: left;
 width: 100%;
 margin: 0 0 1.15rem;
 padding: 0 0 1.1rem;
 border-bottom: 2px solid var(--red);
 color: var(--drawer);
 font: 400 clamp(2.35rem, 7.6vw, 4.3rem)/1.08 var(--serif);
 letter-spacing: -0.025em;
 text-wrap: balance;
}
fieldset.casilla > p { clear: both; margin: 0 0 0.8rem; }
fieldset.casilla #casilla-description {
 max-width: 35rem;
 margin: 0 0 1.65rem;
 color: var(--muted);
 font: 400 1.0625rem/1.45 var(--sans);
}
fieldset.casilla button {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 width: 100%;
 min-height: clamp(4.8rem, 10svh, 6.3rem);
 padding: 1rem 1.25rem;
 border: 1px solid var(--drawer);
 border-left: 5px solid var(--drawer);
 border-radius: 2px 0.8rem 0.8rem 2px;
 background: #fff;
 color: var(--drawer);
 font: 650 clamp(1.25rem, 3.6vw, 1.7rem)/1.25 var(--sans);
 text-align: left;
 cursor: pointer;
 box-shadow: 0 3px 0 var(--ground);
 transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
fieldset.casilla button::after {
 content: "";
 width: 1.25rem;
 height: 2px;
 flex: none;
 background: var(--red);
 transform-origin: right;
 animation: cognida-subrayado 15s ease-in-out infinite;
}
fieldset.casilla button[value="1"]::after { animation-delay: 5s; }
fieldset.casilla button[value="2"]::after { animation-delay: 10s; }
@keyframes cognida-subrayado {
 0%, 6%, 100% { transform: scaleX(1); }
 3% { transform: scaleX(1.7); }
}
fieldset.casilla:focus-within button::after,
fieldset.casilla[aria-busy="true"] button::after { animation: none; }
fieldset.casilla button:hover { background: var(--ground); }
fieldset.casilla button:active { transform: translateY(2px); box-shadow: none; }
fieldset.casilla button:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
fieldset.casilla button:disabled { cursor: progress; color: var(--muted); border-color: var(--ruling); box-shadow: none; }
fieldset.casilla button[aria-busy="true"] { background: var(--drawer); border-color: var(--drawer); color: #fff; }
fieldset.casilla button[aria-busy="true"]::after {
 width: 1.1rem;
 height: 1.1rem;
 border: 2px solid #ffffff66;
 border-top-color: #fff;
 border-radius: 50%;
 background: none;
 animation: cognida-giro 900ms linear infinite;
}
@keyframes cognida-giro { to { transform: rotate(360deg); } }
fieldset.casilla [role="status"] {
 clear: both;
 min-height: 4.35em;
 margin: 0.95rem 0 0;
 color: var(--drawer);
 font: 500 0.95rem/1.45 var(--sans);
}
.archivo-pie {
 width: min(calc(100% - 2.8rem), 46rem);
 margin: 0 auto;
 padding: 0.8rem 0 1rem;
 border-top: 1px solid var(--ruling);
 color: var(--muted);
 font: 400 0.8125rem/1.4 var(--sans);
}
.archivo-editor { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.2rem; }
.archivo-pie a { display: inline-block; padding: 0.3rem 0; color: var(--muted); text-decoration-thickness: 1px; }
.archivo-enlaces ul { display: flex; flex-wrap: wrap; gap: 0 1rem; list-style: none; margin: 0; padding: 0; }
.archivo-enlaces li { margin: 0; }
@media (min-width: 48rem) {
 .mostrador { background: var(--ground); }
 .consulta-marca { padding: 1.4rem 3rem 0.5rem; }
 .mostrador .mostrador-contenido { padding: 1.4rem 3rem 2rem; }
 .pedido { padding: 2.4rem 3rem 1.5rem; background: var(--card); border-top: 5px solid var(--green); box-shadow: var(--shadow); }
 .archivo-pie { max-width: 40rem; }
}
@media (max-width: 359px) {
 .consulta-marca { padding-left: 1rem; padding-right: 1rem; }
 .mostrador .mostrador-contenido { padding-left: 1rem; padding-right: 1rem; }
 fieldset.casilla legend { font-size: 2.2rem; }
 fieldset.casilla button { min-height: 4.6rem; padding-left: 1rem; }
 .archivo-pie { width: calc(100% - 2rem); }
}

/* the measurement choice on the cookies page */
div.casilla {
	margin: 2rem 0;
	padding: 1.1rem 1.3rem;
	background: #fff;
	border: 1px solid var(--ruling);
	border-top: 4px solid var(--green);
}
div.casilla p { margin: 0 0 0.75rem; }
.anotacion { color: var(--green); font-weight: 650; min-height: 1.65em; }

div.casilla button,
.papeleta button {
	min-width: 8.5rem;
	margin: 0.25rem 0.5rem 0.25rem 0;
	padding: 0.55rem 1.1rem;
	background: var(--card);
	border: 2px solid var(--drawer);
	border-radius: 3px;
	color: var(--drawer);
	font: 600 1rem/1.2 var(--sans);
	cursor: pointer;
}
div.casilla button:hover,
.papeleta button:hover { background: #eef3ef; }

/* ── ad slots: set apart on the ground ────────────────── */

.ficha {
	margin: 2.5rem auto;
	padding: 0.6rem 0.75rem 0.75rem;
	max-width: 58rem;
	border: 1px dashed #93a39a;
	background: rgba(255, 255, 255, 0.35);
	text-align: center;
}
.ficha iframe { display: block; margin: 0 auto; border: 0; max-width: 100%; }
.signatura {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.3;
	text-align: left;
}
.hoja .ficha { margin-left: -1rem; margin-right: -1rem; }

/* ── the measurement banner: a slip at the foot of the window ── */

.papeleta {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 40;
	width: min(46rem, calc(100% - 2rem));
	transform: translateX(-50%);
	padding: 1rem 1.25rem 0.75rem;
	background: var(--card);
	border-top: 6px solid var(--red);
	box-shadow: 0 6px 24px rgba(29, 59, 47, 0.25), var(--shadow);
	font-size: 0.95rem;
	line-height: 1.5;
}
.papeleta p { margin: 0 0 0.6rem; }

/* ── see also: cross-reference cards ──────────────────── */

.vease {
	max-width: calc(var(--measure) + 5rem);
	margin: 3rem auto 0;
}
.vease > h2 { font-size: var(--step-2); margin: 0 0 1.25rem; }
.vease ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem 2.75rem;
}
.vease li {
	position: relative;
	padding: 0.9rem 1.1rem 1.1rem;
	background: var(--card);
	border-top: 4px solid var(--red);
	box-shadow: var(--shadow);
}
.vease li + li::before {
	content: "";
	position: absolute;
	left: -2.35rem;
	top: 1.6rem;
	width: 1.9rem;
	height: 0.8rem;
	background:
		linear-gradient(var(--red-ink), var(--red-ink)) left center / calc(100% - 0.5rem) 2px no-repeat,
		conic-gradient(from -135deg at 100% 50%, var(--red-ink) 90deg, transparent 0) right center / 0.55rem 100% no-repeat;
}
.vease .remite {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--red-ink);
	font-size: 0.9rem;
	font-style: italic;
}
.vease a { font-family: var(--serif); font-size: 1.1rem; line-height: 1.3; }

.firma {
	max-width: calc(var(--measure) + 5rem);
	margin: 2.5rem auto 0;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: 0 1.1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid #b7c4bc;
	background: rgba(255, 253, 248, 0.6);
}
.firma img { width: 3.5rem; height: 3.5rem; border-radius: 6px; }
.firma p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.firma .firma-nombre { font-family: var(--serif); font-size: 1.1rem; }

/* ── archive and search: a guide card, then the file ──── */

.guia {
	position: relative;
	margin: 2.5rem 0 2.25rem;
	padding: 1.5rem 2rem 1.4rem;
	background: #f1f0e8;
	border-top: 6px solid var(--drawer);
	box-shadow: var(--shadow);
	max-width: 52rem;
}
.guia::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2.3rem;
	width: 13rem;
	height: 2.3rem;
	background: #f1f0e8;
	border-top: 6px solid var(--drawer);
	border-radius: 0.6rem 0.6rem 0 0;
}
.guia h1 { margin: 0 0 0.6rem; font-size: clamp(1.9rem, 3.6vw, var(--step-4)); }
.guia p { margin: 0; max-width: 44rem; }
.guia form { margin-top: 1rem; }

.archivo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.75rem;
}
.archivo .tarjeta {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: 1.25rem 2rem;
	align-items: start;
	max-width: 60rem;
}
.archivo .tarjeta--sin-imagen { grid-template-columns: minmax(0, 1fr); }
.archivo figure { margin: 0; }
.archivo figure img { display: block; width: 100%; border: 1px solid var(--ruling); }
.archivo h2 { font-size: var(--step-2); margin: 0 0 0.75rem; }

.paginas { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.paginas a,
.paginas span { padding: 0.35rem 0.75rem; background: var(--card); box-shadow: var(--shadow); }

/* search box */
.buscador { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 34rem; }
.buscador input[type="search"] {
	flex: 1 1 14rem;
	padding: 0.55rem 0.75rem;
	border: 2px solid var(--muted);
	border-radius: 3px;
	background: #fff;
	color: var(--text);
	font: inherit;
}
.buscador button {
	padding: 0.55rem 1.1rem;
	background: var(--drawer);
	border: 2px solid var(--drawer);
	border-radius: 3px;
	color: #fff;
	font: 600 1rem/1.2 var(--sans);
	cursor: pointer;
}

/* ── pages: about, contact, policies ──────────────────── */

.pagina-cabecera {
	max-width: calc(var(--measure) + 5rem);
	margin: 0 auto 1.75rem;
	padding-bottom: 3rem;
}
.pagina-cabecera h1 { font-size: clamp(1.9rem, 3.6vw, var(--step-4)); margin: 0 0 0.75rem; }
.pagina-cabecera .pautado { max-width: 44rem; }
.pagina-cabecera--marca {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5.5rem;
	gap: 1.5rem;
	align-items: start;
}
.pagina-cabecera--marca img { width: 5.5rem; height: 5.5rem; border-radius: 10px; }
.actualizado { margin-top: 2rem; color: var(--muted); font-size: 0.9rem; }
.perdida .buscador { margin: 1.5rem 0 1rem; }

/* ── footer: the plinth ───────────────────────────────── */

.zocalo {
	background: var(--drawer);
	color: #dfe8e2;
	border-top: 6px solid var(--drawer-edge);
}
.zocalo-interior {
	max-width: 76rem;
	margin: 0 auto;
	padding: 2.75rem 1.5rem 2.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: start;
}
.zocalo-marca { display: flex; gap: 1rem; align-items: flex-start; }
.zocalo-marca img { width: 3.25rem; height: 3.25rem; border-radius: 6px; flex: none; }
.zocalo-marca p { margin: 0 0 0.5rem; }
.zocalo-nombre { font-family: var(--serif); font-size: var(--step-1); color: #fff; }
.zocalo a { color: #fff; }
.zocalo a:hover { color: var(--brass-light); }
.zocalo :focus-visible { outline-color: var(--brass); }

.indice {
	position: relative;
	padding: 0.9rem 1.4rem 2.6rem;
	background: var(--card);
	border-top: 5px solid var(--red);
	color: var(--text);
}
.indice::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.8rem;
	width: 0.9rem;
	height: 0.9rem;
	margin-left: -0.45rem;
	border-radius: 50%;
	background: var(--drawer);
}
.indice ul { list-style: none; margin: 0; padding: 0; }
.indice li {
	border-bottom: 1px solid var(--ruling);
	line-height: 2;
}
.indice a { color: var(--link); text-decoration: none; }
.indice a:hover { color: var(--drawer); text-decoration: underline; }
.indice :focus-visible { outline-color: var(--red); }
.zocalo-pie {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 1.5rem 1.75rem;
	color: #b9c9be;
	font-size: 0.875rem;
}

/* ── small screens ────────────────────────────────────── */

@media (max-width: 860px) {
	.pestanas ul { padding-left: 0; justify-content: flex-start; overflow-x: auto; padding-top: 0.6rem; scrollbar-width: none; }
	.pestanas a { min-width: 0; white-space: nowrap; padding: 0.5rem 0.85rem 0.7rem; font-size: 0.95rem; }
	.frente-interior { flex-wrap: wrap; gap: 0.9rem; }
	.lema { flex-basis: 100%; font-size: 1.05rem; }
	.tirador { display: none; }
	.ficha-cabecera { grid-template-columns: minmax(0, 1fr); }
	.mazo > li:last-child .mazo-tarjeta { grid-template-columns: minmax(0, 1fr); }
	.mazo-tarjeta figure { order: -1; }
	.zocalo-interior { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
	body { font-size: 1.0625rem; }
	.pestanas { padding: 0 0.5rem; }
	.pestanas ul { gap: 0.2rem; }
	.pestanas a { padding: 0.45rem 0.45rem 0.65rem; font-size: 0.8rem; }

	.papeleta button { min-width: 7rem; }
	.cajon { padding-top: 2rem; }
	.contenido { padding: 2rem 0.9rem 3rem; }
	.tarjeta,
	.mazo > li:last-child .mazo-tarjeta { padding-left: 1.15rem; padding-right: 1.15rem; }
	.mazo-tarjeta { padding: 0 1.15rem; }
	.mazo-tarjeta .pestana { min-width: 0; font-size: 0.85rem; }
	.mazo > li:nth-child(2n + 1) .mazo-tarjeta { --tab-x: 0%; }
	.mazo > li:nth-child(2n) .mazo-tarjeta { --tab-x: 50%; }
	.mazo-tarjeta .pestana { max-width: 48%; }
	.cajon-abierto { padding: 0 0.6rem 0.6rem; border-width: 0.5rem; }
	.hoja { padding: 1.75rem 1.15rem 2rem; }
	.cuerpo figure { margin-left: -0.5rem; margin-right: -0.5rem; padding: 0.75rem 0.75rem 0.7rem; }
	.cuerpo .registro table { min-width: 40rem; }
	.cuerpo .registro caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cuerpo .registro {
		margin-bottom: 0.5rem;
		background:
			linear-gradient(to left, var(--card) 40%, rgba(255, 253, 248, 0)) right / 2.5rem 100% no-repeat local,
			linear-gradient(to left, rgba(29, 59, 47, 0.16), rgba(29, 59, 47, 0)) right / 1rem 100% no-repeat scroll;
	}
	.cuerpo .registro-pie { display: block; margin: 0 0 2rem; color: var(--muted); font-size: 0.9rem; font-style: italic; line-height: 1.5; }
	.hoja .ficha { margin-left: 0; margin-right: 0; }
	.archivo .tarjeta { grid-template-columns: minmax(0, 1fr); }
	.vease li + li::before { display: none; }
	.guia { padding: 1.25rem 1.15rem; }
	.guia::before { width: 9rem; }
	.portaetiqueta { width: 100%; }

}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
	.cajon, .zocalo, .ficha, .papeleta, .vease { display: none; }
	body { background: #fff; }
}