/* Portada de velasquezlopez.com.
   Identidad «Magia Roja Blue»: skills/unmecaniko-brand/SKILL.md
   y planning/plans/unmecaniko-com-redesign.md § La dirección visual.

   Dos mundos, y la página los mantiene separados a propósito:
     papel + azul = Nicolas, la persona, el portafolio
     crema + rojo = VELO inc, la empresa, la máquina

   El encargo de esta versión (Nicolas, 2026-09-19) es que la página siga
   siendo rápida pero deje de ser fría: quien la abre acaba de conocerlo en un
   pasillo de ROSCon. De ahí la escala tipográfica más marcada, las esquinas
   redondeadas y el lavado cálido del héroe. Nada de eso cuesta una petición
   extra: es todo CSS.

   Sin retrato, por decisión de Nicolas del 2026-09-19. La calidez la cargan
   el copy en primera persona, el azul del saludo y el bloque de crema del
   héroe; la única figura es la tortuga. */

@font-face {
	font-family: "Archivo";
	src: url("/media/fonts/archivo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo";
	src: url("/media/fonts/archivo-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/media/fonts/jetbrainsmono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--ink: #0e1417;
	--blue: #072fb3;
	/* Azul claro: solo para las patas de la tortuga y estados hover. Nunca texto. */
	--blue-lift: #3a63d8;
	--slate: #45585f;
	--cream: #f8eac9;
	/* Crema muy diluido para el lavado del héroe: da calidez sin bajar contraste. */
	--cream-wash: #fdf7ec;
	--rule: #d8d3c4;
	/* --rule da 1,50 sobre papel: vale como separador decorativo, NO como
	   borde de un control. WCAG 1.4.11 pide 3:1 para eso. Esta da 3,11. */
	--rule-strong: #9a9184;
	--paper: #ffffff;
	--red: #e32636;
	/* El rojo de marca como TEXTO no pasa sobre crema (3,83). Esta variante
	   conserva el tono y da 5,01 sobre crema y 5,97 sobre papel. */
	--red-ink: #c41928;
	--gutter: 22px;
	--max: 1120px;
	--sans: "Archivo", Arial, Helvetica, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

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

body {
	margin: 0;
	color: var(--ink);
	background: var(--paper);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.inner {
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.label {
	margin: 0;
	font-family: var(--mono);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate);
}

.label-red {
	color: var(--red-ink);
}

/* ── Cabecera y pie ─────────────────────────────────────────────────────── */

.bar {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}

.bar .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding-block: 12px;
}

.brand {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

.langs {
	display: flex;
	gap: 14px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
}

.langs a {
	display: inline-block;
	/* 44 px de zona tactil sin mover la maqueta: el margen negativo devuelve el
	   espacio que el relleno ocupa. WCAG 2.5.8. */
	padding: 13px 4px;
	margin-block: -13px;
	color: var(--slate);
	text-decoration: none;
}

.langs a[aria-current="page"] {
	color: var(--ink);
	border-bottom: 1.5px solid var(--blue);
}

/* ── Héroe: el saludo de ROSCon, quién es, y los dos botones ────────────── */

.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60ch 40ch at 88% -10%, var(--cream-wash), transparent 70%),
		var(--paper);
}

.hero .inner {
	position: relative;
	padding-block: 18px 30px;
}

/* La tortuga, suelta sobre el titular y sin pastilla: la pastilla decia
   «ROSCON GLOBAL 2026 · TORONTO» 50 px por encima de un h1 que ya dice
   «Me viste en ROSCon 26, Toronto». A 30 px tampoco se leia — el hexagono del
   caparazon va a stroke 1,5 sobre un viewBox de 72, que a ese tamaño cae por
   debajo de un pixel del dispositivo y desaparece. A 48 px si es una tortuga. */
.turtle {
	display: block;
	width: 48px;
	height: auto;
	margin-bottom: 2px;
}

h1 {
	margin: 8px 0 0;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.032em;
	line-height: 1.14;
	max-width: 18ch;
	text-wrap: balance;
}

/* El primer tiempo del titular: la frase del evento, la única que caduca.
   Va en su propio bloque para que el saludo siempre empiece en línea nueva
   y para que borrarla el día que sobre no descoloque nada. */
.ev {
	display: block;
}

/* El segundo tiempo del titular. Es la frase cálida: va en azul para que sea
   lo que el ojo lee primero después del nombre del evento.
   En bloque, como `.ev`, para que `text-wrap: balance` equilibre cada frase
   por separado; en una sola caja partía «Hola, un / gusto conocerte». */
.greet {
	display: block;
	color: var(--blue);
}

/* Sobre crema de verdad, no sobre un filete. La crema da 1,19 de contraste
   sobre papel: a 3 px de ancho es invisible en un movil a plena luz; en un
   bloque de 331x100 es lo que hace que la pagina no se sienta fria. Sin
   retrato, esta es la pieza que carga la calidez. */
.me {
	margin-top: 18px;
	padding: 13px 15px;
	border-radius: 10px;
	background: var(--cream);
}

.name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.role {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #3b4a50;
}

/* «Ingeniero mecatronico» describe a media sala en ROSCon; «construyo maquinas
   CNC con mi papa» describe a una persona. Sube al pliegue porque el encargo
   pide que en un vistazo se sepa que hay un emprendimiento de CNC detras. */
.does {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* Lo que busca. Va DENTRO del bloque crema porque es la misma tarjeta de
   identidad —quién es, qué hace, qué busca— y porque en una sala de ROSCon es
   la frase que decide si alguien escribe o sigue caminando.
   Confirmado por Nicolas el 2026-09-19. */
.seek {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.38;
	color: #3b4a50;
}

.seek strong {
	color: var(--ink);
}

.actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	max-width: 420px;
}

/* La hoja de vida y el portafolio son del mismo rango, así que comparten fila.
   Apilados costaban 104 px del pliegue de un móvil de 375 para dos acciones
   equivalentes; en fila cuestan 52, y eso es justo lo que permite que los dos
   quepan sin desplazar. */
.pair {
	display: flex;
	gap: 10px;
}

.pair .btn {
	flex: 1 1 0;
	padding-inline: 12px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 13px 22px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

/* Regla 1 de la marca: el azul es el único acento, y todo lo clicable es azul.
   Por eso el botón de WhatsApp NO es verde WhatsApp: lo identifica su glifo,
   no su color, y así la página conserva una sola jerarquía de color. */
.btn-primary {
	color: #fff;
	background: var(--blue);
	box-shadow: 0 1px 2px rgb(7 47 179 / 0.28), 0 6px 18px -6px rgb(7 47 179 / 0.45);
}

.btn-primary:hover {
	background: #0a39d2;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgb(7 47 179 / 0.3), 0 10px 24px -8px rgb(7 47 179 / 0.5);
}

.btn-ghost {
	color: var(--blue);
	background: var(--paper);
	border: 1.5px solid var(--rule-strong);
}

.btn-ghost:hover {
	border-color: var(--blue);
	transform: translateY(-1px);
}

.btn svg {
	flex: none;
}

/* El dominio dentro del boton: quien teclea una URL leida en una camiseta no
   tiene un mapa mental de los tres sitios, y «Conoce mas sobre mi» no dice
   que al otro lado hay un portafolio. */
.btn small {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.72;
}

/* Las vías secundarias de contacto, como enlaces de texto y no como botones,
   para que la jerarquía siga teniendo un solo botón primario.
   Existen porque WhatsApp NO es universal en el público de ROSCon: solo el
   32% de los adultos de EE. UU. lo usa (Pew Research, encuesta feb–jun 2025).
   Un botón de WhatsApp a secas dejaría fuera a dos tercios de la sala. */
.links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 16px;
	margin: 16px 0 0;
	font-size: 15px;
}

.links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
}

.links a:hover {
	color: var(--ink);
}

.links svg {
	flex: none;
	opacity: 0.75;
}

/* ── Quiénes somos: el mundo de ideas detrás del apellido ───────────────── */

.about {
	border-top: 1px solid var(--rule);
	background: var(--paper);
}

.about .inner {
	padding-block: 40px 44px;
}

.about h2 {
	margin: 14px 0 0;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.2;
	max-width: 22ch;
}

.about p {
	margin: 14px 0 0;
	max-width: 58ch;
	color: var(--slate);
	font-size: 16.5px;
}

.about p strong {
	color: var(--ink);
	font-weight: 700;
}

/* Las dos personas. No es una tabla de equipo: son dos líneas que explican
   por qué la empresa puede hacer lo que dice que hace. */

.who {
	display: grid;
	gap: 14px;
	margin-top: 26px;
	padding: 0;
	list-style: none;
}

.who li {
	padding-left: 15px;
	border-left: 2.5px solid var(--cream);
}

.who b {
	display: block;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.who span {
	color: var(--slate);
	font-size: 15px;
}

/* ── VELO inc: la banda crema. El único bloque de color de la página. ────── */

.band {
	background: var(--cream);
}

.band .inner {
	padding-block: 40px 48px;
}

.shot {
	display: block;
	width: 100%;
	margin: 0 0 36px;
	border-radius: 10px;
	/* Calido y no blanco: si la foto tarda, el hueco parece un marcador de
	   posicion deliberado y no una imagen rota. */
	background: #e8d9b4;
	box-shadow: 0 1px 2px rgb(14 20 23 / 0.12), 0 14px 32px -16px rgb(14 20 23 / 0.45);
}

/* El filete rojo abre el bloque de la CNC. Regla 2 de la marca: el rojo
   separa, no decora — y nunca lleva texto encima. */
.case {
	padding-top: 16px;
	border-top: 3px solid var(--red);
}

.band h2 {
	margin: 12px 0 0;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.2;
	max-width: 20ch;
}

.band p {
	margin: 12px 0 0;
	max-width: 52ch;
	color: #3b4a50;
	font-size: 16.5px;
}

.more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	min-height: 48px;
	padding: 12px 20px;
	border: 1.5px solid var(--blue);
	border-radius: 8px;
	background: transparent;
	color: var(--blue);
	font-weight: 700;
	font-size: 15.5px;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.more:hover {
	background: var(--blue);
	color: #fff;
}

.more:hover svg {
	stroke: #fff;
}

/* ── Pie: las tres puertas. Es el reparto de tráfico, no decoración. ─────── */

.foot {
	border-top: 1px solid var(--rule);
	background: var(--paper);
}

.foot .inner {
	padding-block: 44px 48px;
}

.doors {
	display: grid;
	gap: 2px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.doors a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: var(--ink);
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: -0.01em;
}

.doors a:hover {
	color: var(--blue);
}

.doors small {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate);
	white-space: nowrap;
}

.sig {
	margin: 24px 0 0;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--slate);
}

/* ── 404 ────────────────────────────────────────────────────────────────── */

.lost {
	padding-block: 64px;
}

.lost h1 {
	margin: 14px 0 0;
	font-size: 26px;
	max-width: none;
}

.lost p {
	margin-top: 18px;
}

/* ── Escritorio ─────────────────────────────────────────────────────────── */

@media (min-width: 720px) {
	:root {
		--gutter: 40px;
	}

	.hero .inner {
		padding-block: 44px 56px;
	}

	h1 {
		font-size: 44px;
		letter-spacing: -0.038em;
		line-height: 1.07;
		max-width: 21ch;
	}

	.event {
		font-size: 11px;
		padding: 7px 16px 7px 9px;
	}

	.turtle {
		width: 56px;
	}

	.name {
		font-size: 20px;
	}

	.does {
		font-size: 17px;
	}

	.actions {
		flex-direction: row;
		max-width: none;
	}

	.pair {
		display: contents;
	}

	.pair .btn {
		flex: 0 0 auto;
		padding-inline: 22px;
	}

	.about .inner,
	.band .inner {
		padding-block: 56px 64px;
	}

	.about h2,
	.band h2 {
		font-size: 30px;
	}

	.who {
		grid-template-columns: 1fr 1fr;
		gap: 22px;
		max-width: 58ch;
	}
}

@media (min-width: 960px) {
	.hero .inner {
		padding-block: 56px 72px;
	}

	h1 {
		font-size: 54px;
	}

	/* En escritorio el héroe deja una columna a la derecha para la tortuga
	   grande. Va arriba, alineada con el titular, no flotando en el hueco. */
	.hero-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		column-gap: 56px;
		align-items: start;
	}

	/* Con la tortuga grande a la derecha, la pequeña sobra: dos tortugas a la
	   vez se leen como un error, no como un sistema. */
	.hero-grid .turtle {
		display: none;
	}

	.hero-grid .turtle-lg {
		display: block;
		width: 100%;
		max-width: 220px;
		height: auto;
		margin-top: 20px;
		justify-self: end;
	}

	/* La banda de VELO inc pasa a dos columnas: la foto manda a la izquierda
	   porque es la prueba, y el texto la explica a la derecha. */
	.band-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		column-gap: 52px;
		align-items: center;
	}

	.shot {
		margin-bottom: 0;
	}

	.case {
		padding-top: 0;
		padding-left: 26px;
		border-top: 0;
		border-left: 3px solid var(--red);
	}

	.doors {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 32px;
	}
}

/* La tortuga grande solo existe en escritorio ancho: en móvil el espacio
   vale más que el adorno. Al ser un <use> del mismo símbolo, no cuesta ni un
   byte de red extra. */
.turtle-lg {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}

	.btn:hover {
		transform: none;
	}
}