/* Minimal reset + base typography. No framework, no reset library. */

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

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

body {
	margin: 0;
	font-family: var(--kmc-font-body);
	color: var(--kmc-color-ink);
	background: var(--kmc-color-surface);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kmc-font-heading);
	font-weight: var(--kmc-h1-weight);
	color: var(--kmc-color-navy);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

/*
 * Del tercer nivel para abajo, medio punto menos de peso.
 *
 * Todos los titulares compartían el mismo grosor: solo cambiaba el tamaño, y
 * una escala así no marca jerarquía, solo hace las letras más grandes. Con el
 * H1 y el H2 en 700, dejar el H3 en 600 es lo que separa "esto abre una
 * sección" de "esto es un apartado dentro".
 */
h3, h4, h5, h6 {
	font-weight: 600;
}

h1 { font-size: var(--kmc-h1-size); }

/* Escala tipográfica medida en producción: los titulares de sección son de
   46px y los subtítulos de 24px. El tema solo definía el tamaño de h1, así que
   h2-h6 se quedaban con el valor por defecto del navegador (24px y 19px) y
   todas las secciones salían a media escala. */
h2 { font-size: var(--kmc-h2-size); }
h3 { font-size: var(--kmc-h3-size); }
h4 { font-size: var(--kmc-h4-size); }
h5, h6 { font-size: 1rem; }

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

a {
	color: var(--kmc-color-navy);
	text-decoration: none;
}

.konekta-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.konekta-prose a.konekta-card,
.konekta-prose a.konekta-btn,
.konekta-prose .konekta-card a,
.konekta-prose .konekta-footer__grid a {
	text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kmc-color-blue-accent);
	outline-offset: 2px;
}

/* Skip link: visually hidden until focused */
.konekta-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
	padding: 0.75em 1.25em;
	border-radius: 0 0 8px 0;
}

.konekta-skip-link:focus {
	left: 0;
}

/* Scroll-triggered fade-in-up, applied via main.js IntersectionObserver.
   Content is already in the markup and readable without JS — this only
   adds a transition, so nothing breaks if JS fails to load. */
/* Aparición al hacer scroll.
   El contenido NUNCA se esconde desde el CSS: si lo hiciera y el JavaScript
   fallara —o el observador no llegara a dispararse— la página se quedaría en
   blanco, que es justo lo que pasaba. Es `main.js` quien marca el documento
   con `konekta-anima`, y solo entonces se ocultan para animarlos. Sin
   JavaScript, todo se ve desde el primer momento. */
.konekta-anima .konekta-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms ease;
}

.konekta-anima .konekta-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.konekta-anima .konekta-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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