/* Base tipográfica y del logotipo.
   Todo lo demás lo resuelven las variables y clases del design system de
   CrocoBuilder; aquí sólo va lo que el constructor no alcanza. */

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

body {
	margin: 0;
	background-color: var(--bt-bg, #f5f8f9);
	color: var(--bt-ink, #162638);
	font-family: var(--bt-font-sans, "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
	font-size: var(--bt-fs-body, 15px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--bt-space-4, 16px);
	color: var(--bt-ink, #162638);
	font-weight: var(--bt-w-bold, 720);
	text-wrap: balance;
}

h1 { font-size: var(--bt-fs-h1, clamp(40px, 4.85vw, 64px)); line-height: .98; letter-spacing: -.058em; }
h2 { font-size: var(--bt-fs-h2, clamp(30px, 3.1vw, 44px)); line-height: 1.06; letter-spacing: -.05em; }
h3 { font-size: var(--bt-fs-h3, 22px); line-height: 1.25; letter-spacing: -.03em; }

p { margin: 0 0 var(--bt-space-4, 16px); text-wrap: pretty; }

a { color: var(--bt-green-700, #0f7d5b); text-underline-offset: .18em; }

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

/* Ninguna tabla, diagrama o bloque de código puede provocar scroll horizontal
   en el body: se desplazan dentro de su propio contenedor. */
.bt-scroll-x { overflow-x: auto; max-width: 100%; }

/* ---- Logotipo ---- */

.bt-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--bt-space-3, 12px);
	text-decoration: none;
	color: inherit;
}

.bt-isotipo {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}

.bt-logo__name {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.bt-logo__name strong {
	font-size: 20px;
	font-weight: var(--bt-w-bold, 720);
	letter-spacing: -.05em;
	color: var(--bt-ink, #162638);
}

.bt-logo__bee { color: var(--bt-brand-logo, #00b82f); }

.bt-logo__tagline {
	margin-top: 3px;
	font-size: 9px;
	font-weight: 560;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bt-ink-muted, #5c6c80);
}

@media (max-width: 767px) {
	.bt-isotipo { width: 37px; height: 37px; }
}

/* Sólo lectura para lectores de pantalla. Los gráficos lo usan para publicar
   sus datos en forma de tabla accesible. */
.bt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}