/* =========================================================
   Vanessa Diarte — Portfolio
   ========================================================= */

/* ---------- 1. Tokens ---------- */

:root {
	color-scheme: light;

	--bg: #f6f5f3;
	--bg-elev: #ffffff;
	--bg-sunken: #eeece8;
	--text: #14161a;
	--text-soft: #4a4f57;
	/* Antes era #7b818b, que sobre este fondo daba 3.6 de contraste: por debajo
	   del mínimo de 4.5, y es el color de casi todo el texto chico. */
	--text-mute: #666b74;
	--line: rgba(20, 22, 26, 0.1);
	--line-strong: rgba(20, 22, 26, 0.18);

	/* Coral. Mismo tono (11°) y saturación (74%) que el original #e2593a, con
	   la luminosidad bajada de 56% a 45%: es el coral más claro que llega al
	   mínimo de contraste. Para cambiarlo, tocá estas tres líneas y --glow-1
	   (el rgba es el mismo color en rojo, verde, azul).
	   Alternativa lila: #8e43c0 → rgba(142, 67, 192, ...) */
	--accent: #c83d1d;
	--accent-2: #1c7f96;
	--accent-soft: rgba(200, 61, 29, 0.12);
	/* Coral apenas más claro: lo usa el punto del diagrama al pasar por
	   encima del arco coral. Alcanza para notarlo sin llamar la atención. */
	--accent-over: #e56b4a;
	/* Color del texto que va encima del acento */
	--on-accent: #ffffff;

	--tile: #ffffff;
	--shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.05), 0 4px 14px rgba(16, 18, 22, 0.05);
	--shadow-lg: 0 24px 60px -20px rgba(16, 18, 22, 0.22);

	--glow-1: rgba(200, 61, 29, 0.16);
	--glow-2: rgba(28, 127, 150, 0.16);
	--grain-opacity: 0.035;

	--font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	/* Cabin para todos los títulos: humanista y algo más cálida que la
	   tipografía del texto, sin llegar a ser otra familia visualmente. */
	--font-display: "Cabin", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
	/* Lora queda solo para la cita de "Sobre mí", que es el único lugar
	   donde una cursiva editorial aporta algo. */
	--font-serif: "Lora", Georgia, "Times New Roman", serif;

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	--container: 1140px;
	--gutter: 24px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #0a0b0d;
	--bg-elev: #121317;
	--bg-sunken: #08090b;
	--text: #f4f4f5;
	--text-soft: #b6b9c0;
	--text-mute: #82868f;
	--line: rgba(255, 255, 255, 0.1);
	--line-strong: rgba(255, 255, 255, 0.2);

	/* Coral más claro para que resalte sobre el fondo oscuro (contraste 7.67).
	   Alternativa lila: #cd9bff → rgba(205, 155, 255, ...) */
	--accent: #ff7a58;
	--accent-2: #4bc4dd;
	--accent-soft: rgba(255, 122, 88, 0.14);
	--accent-over: #ffb8a2;
	/* Acá el acento es claro, así que encima va texto oscuro */
	--on-accent: #14161a;

	--tile: #f4f4f5;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75);

	--glow-1: rgba(255, 122, 88, 0.22);
	--glow-2: rgba(75, 196, 221, 0.16);
	--grain-opacity: 0.05;
}

/* ---------- 2. Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 104px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.6;
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

img {
	max-width: 100%;
	display: block;
	border-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	/* Cabin es más ancha que la tipografía del texto: con el tracking anterior
	   (-0.035em) las letras se tocaban en los títulos grandes. */
	letter-spacing: -0.018em;
	line-height: 1.08;
}

p {
	margin: 0;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.skip-link {
	position: absolute;
	left: 50%;
	top: 12px;
	translate: -50% -200%;
	z-index: 200;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	background: var(--text);
	color: var(--bg);
	font-size: 14px;
	transition: translate 0.25s var(--ease);
}

.skip-link:focus {
	translate: -50% 0;
}

/* ---------- 3. Layout utilities ---------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	position: relative;
	padding-block: clamp(72px, 11vw, 140px);
}

.section--tight {
	padding-block: clamp(48px, 7vw, 84px);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 6px 15px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg-elev);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--text-soft);
	box-shadow: var(--shadow-sm);
}

/* Sin punto: el chip se sostiene solo con el borde y el texto. */

.section-head {
	max-width: 720px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.section-head h2 {
	font-size: clamp(2rem, 4.6vw, 3.25rem);
}

.section-head p {
	margin-top: 18px;
	color: var(--text-soft);
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	max-width: 56ch;
}

/* Resalta una o dos palabras dentro de un título. Antes cambiaba a una
   serif en cursiva; ahora el título es todo Cabin y el acento es de color. */
.highlight {
	color: var(--accent);
}

.accent {
	color: var(--accent);
}

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	transition: transform 0.3s var(--ease), background 0.3s var(--ease),
		border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform 0.3s var(--ease);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--text);
	color: var(--bg);
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
	box-shadow: var(--shadow-lg);
}

.btn--primary:hover svg {
	transform: translate(2px, -2px);
}

.btn--ghost {
	border-color: var(--line-strong);
	background: var(--bg-elev);
	color: var(--text);
}

.btn--ghost:hover {
	border-color: var(--text);
}

.btn--sm {
	padding: 10px 16px;
	font-size: 14px;
}

/* Link with arrow */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	border-bottom: 1px solid var(--line-strong);
	padding-bottom: 2px;
	transition: gap 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.link-arrow:hover {
	gap: 11px;
	color: var(--accent);
	border-color: var(--accent);
}

.link-arrow svg {
	width: 14px;
	height: 14px;
}

/* Reveal on scroll */

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- 4. Ambient background ---------- */

.fx {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.fx__glow {
	position: absolute;
	width: 62vw;
	height: 62vw;
	max-width: 900px;
	max-height: 900px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.9;
	transition: transform 1.2s var(--ease);
}

.fx__glow--1 {
	top: -22vw;
	left: -10vw;
	background: radial-gradient(circle, var(--glow-1), transparent 68%);
}

.fx__glow--2 {
	top: 40vh;
	right: -18vw;
	background: radial-gradient(circle, var(--glow-2), transparent 68%);
}

.fx__grain {
	position: absolute;
	inset: -200%;
	opacity: var(--grain-opacity);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: grain 8s steps(6) infinite;
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	20% { transform: translate(-3%, 4%); }
	40% { transform: translate(2%, -3%); }
	60% { transform: translate(-2%, -2%); }
	80% { transform: translate(3%, 3%); }
}

/* ---------- 5. Navigation ---------- */

.nav {
	position: fixed;
	top: 18px;
	left: 50%;
	translate: -50% 0;
	z-index: 100;
	width: calc(100% - 32px);
	max-width: var(--container);
	transition: top 0.4s var(--ease);
}

.nav__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 9px 9px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease),
		background 0.4s var(--ease);
}

.nav.is-stuck .nav__inner {
	box-shadow: var(--shadow-lg);
	border-color: var(--line-strong);
}

.nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.02em;
	margin-right: auto;
}

.nav__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--on-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.03em;
	flex: none;
}

.nav__links {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__links a {
	display: block;
	position: relative;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-size: 14.5px;
	font-weight: 450;
	color: var(--text-soft);
	transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav__links a:hover {
	color: var(--text);
	background: var(--accent-soft);
}

.nav__links a.is-active {
	color: var(--text);
	background: color-mix(in srgb, var(--text) 8%, transparent);
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--bg-elev);
	color: var(--text-soft);
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
		transform 0.25s var(--ease);
}

.icon-btn:hover {
	color: var(--text);
	border-color: var(--line-strong);
	transform: translateY(-1px);
}

.icon-btn svg {
	width: 17px;
	height: 17px;
}

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

.nav__burger { display: none; }

.nav__cta { display: inline-flex; }

/* Mobile drawer */

.nav__drawer {
	display: none;
	margin-top: 8px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: var(--shadow-lg);
}

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

.nav__drawer a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--r-md);
	font-size: 16px;
	color: var(--text-soft);
}

.nav__drawer a:hover {
	background: var(--accent-soft);
	color: var(--text);
}

.nav__drawer .btn {
	width: 100%;
	margin-top: 8px;
}

/* ---------- 6. Hero ---------- */

.hero {
	position: relative;
	z-index: 1;
	padding-top: clamp(130px, 17vw, 190px);
	padding-bottom: clamp(48px, 7vw, 80px);
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg-elev);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-soft);
	box-shadow: var(--shadow-sm);
}

.status__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	flex: none;
}

.status__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #22c55e;
	animation: ping 2s var(--ease) infinite;
}

@keyframes ping {
	0% { transform: scale(1); opacity: 0.7; }
	70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* El saludo. Sin tamaño propio caía al que trae el navegador por defecto
   (~25px) y quedaba diminuto al lado del titular. Ahora mide algo menos de
   la mitad: se lee como entrada, no como subtítulo perdido. */
.hero__greeting {
	margin-top: 26px;
	font-size: clamp(1.35rem, 3.1vw, 2.1rem);
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--text-soft);
}

.hero h1 {
	/* Pegado al saludo: los dos son una misma frase partida en dos. */
	margin-top: 6px;
	font-size: clamp(2.7rem, 7.2vw, 5rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.hero h1 .line {
	display: block;
}

/* Antes envolvía el rotador de roles; ahora es una línea suelta. */
.hero__roles {
	margin-top: 20px;
	font-size: clamp(1.02rem, 1.9vw, 1.22rem);
	font-weight: 450;
	letter-spacing: -0.02em;
	color: var(--text-soft);
}

.hero__lead {
	margin-top: 26px;
	max-width: 54ch;
	color: var(--text-soft);
	font-size: clamp(1rem, 1.5vw, 1.09rem);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--text-mute);
}

.hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hero__meta svg {
	width: 15px;
	height: 15px;
	opacity: 0.8;
}

.hero__meta a:hover {
	color: var(--accent);
}

/* Portrait card */

.portrait {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 400px;
	margin: 0;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-elev);
	box-shadow: var(--shadow-lg);
	aspect-ratio: 1 / 1;
	transform: rotate(1.4deg);
	transition: transform 0.6s var(--ease);
}

.portrait:hover {
	transform: rotate(0deg) translateY(-4px);
}

.portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

.portrait__tag {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	border-radius: var(--r-pill);
	background: rgba(12, 13, 15, 0.55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	letter-spacing: -0.01em;
}

.portrait__tag strong {
	font-weight: 600;
}

.portrait__tag span {
	opacity: 0.75;
}

/* Stats strip */

.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: clamp(48px, 7vw, 84px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--line);
	overflow: hidden;
}

.stats__item {
	padding: 26px 24px;
	background: var(--bg-elev);
}

.stats__item dt {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 1;
}

.stats__item dd {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--text-mute);
	line-height: 1.4;
}

/* ---------- 7. Animación compartida de carruseles ---------- */

@keyframes scroll-x {
	to { transform: translateX(-50%); }
}

/* ---------- 8. Services ---------- */

.services {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.card {
	position: relative;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
	overflow: hidden;
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}

.card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, var(--accent), transparent 55%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	pointer-events: none;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

.card:hover::before {
	opacity: 1;
}

.card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 22px;
	border-radius: 13px;
	background: var(--accent-soft);
	color: var(--accent);
}

.card__icon svg {
	width: 22px;
	height: 22px;
}

.card h3 {
	font-size: 1.32rem;
	letter-spacing: -0.03em;
}

.card p {
	margin-top: 12px;
	color: var(--text-soft);
	font-size: 15.5px;
}

.card__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.card__list li {
	padding: 5px 11px;
	border-radius: var(--r-pill);
	background: var(--bg-sunken);
	font-size: 13px;
	color: var(--text-mute);
	letter-spacing: -0.005em;
}

/* ---------- 9. Work ---------- */

.work {
	display: grid;
	gap: clamp(20px, 3vw, 28px);
}

.project {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 3.4vw, 42px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--bg-elev);
	transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.project:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lg);
}

.project--flip .project__body {
	order: 2;
}

.project__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 18px;
}

.tag {
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-mute);
	letter-spacing: -0.005em;
}

.tag--accent {
	border-color: transparent;
	background: var(--accent-soft);
	color: var(--accent);
}

.project h3 {
	font-size: clamp(1.5rem, 3vw, 2.05rem);
}

.project__year {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--text-mute);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.project p {
	margin-top: 16px;
	color: var(--text-soft);
	font-size: 15.8px;
	max-width: 46ch;
}

.project__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 28px;
}

/* Project media */

.shots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.shot {
	position: relative;
	padding: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg-sunken);
	border: 1px solid var(--line);
	cursor: zoom-in;
	aspect-ratio: 1 / 1;
}

.shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.shot:hover img {
	transform: scale(1.05);
}

.shot--wide {
	grid-column: span 2;
	aspect-ratio: 16 / 9;
}

/* Miniatura cuyo archivo todavía no está en el repo. */

.shot--vacio {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	padding: 18px;
	border-style: dashed;
	border-width: 1.5px;
	border-color: var(--line-strong);
	cursor: default;
	text-align: center;
}

.shot--vacio svg {
	width: 22px;
	height: 22px;
	color: var(--text-mute);
}

.shot--vacio span {
	font-size: 12px;
	line-height: 1.5;
	color: var(--text-mute);
}

.shot--vacio code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	color: var(--text-mute);
	word-break: break-all;
}

.shot__zoom {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(12, 13, 15, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.shot:hover .shot__zoom {
	opacity: 1;
	transform: scale(1);
}

.shot__zoom svg {
	width: 14px;
	height: 14px;
}

/* Browser mock (for the web layout project) */

.mock {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-sunken);
	box-shadow: var(--shadow-lg);
}

.mock__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--bg-elev);
}

.mock__dots {
	display: flex;
	gap: 6px;
}

.mock__dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line-strong);
}

.mock__url {
	flex: 1;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: var(--bg-sunken);
	font-size: 12.5px;
	color: var(--text-mute);
	text-align: center;
}

.mock__body {
	position: relative;
	aspect-ratio: 16 / 10;
	padding: 26px;
	display: grid;
	align-content: center;
	gap: 14px;
	background:
		radial-gradient(60% 80% at 20% 10%, var(--accent-soft), transparent 70%),
		linear-gradient(160deg, var(--bg-elev), var(--bg-sunken));
	overflow: hidden;
}

.mock__body::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 42px 42px;
	opacity: 0.55;
	pointer-events: none;
}

/* Van anidados bajo .mock para ganarle en especificidad a `.project p`, que
   si no les impone su tamaño de párrafo. */
.mock .mock__title {
	position: relative;
	z-index: 1;
	margin-top: 0;
	max-width: none;
	color: var(--text);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

/* La bajada es descriptiva: va más chica que el título para que la maqueta
   siga leyéndose como una pantalla y no como un bloque de texto. */
.mock .mock__sub {
	position: relative;
	z-index: 1;
	margin-top: -6px;
	max-width: 34ch;
	color: var(--text-soft);
	font-size: 14px;
	line-height: 1.45;
}

.mock__rows {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 9px;
	max-width: 78%;
}

.mock__rows i {
	height: 9px;
	border-radius: var(--r-pill);
	background: var(--line-strong);
	opacity: 0.55;
}

.mock__rows i:nth-child(2) { width: 82%; }
.mock__rows i:nth-child(3) { width: 60%; }

.mock__pill {
	position: relative;
	z-index: 1;
	justify-self: start;
	margin-top: 6px;
	padding: 9px 18px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: var(--on-accent);
	font-size: 13px;
	font-weight: 500;
}

/* NDA badge sobre las capturas confidenciales */

.shot--nda {
	aspect-ratio: 4 / 3;
}

/* Tarjetas de categoría: llevan a las páginas internas de cada especialidad */

.cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.cat-card {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
	overflow: hidden;
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}

.cat-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(140deg, var(--accent), transparent 55%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	pointer-events: none;
}

.cat-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

.cat-card:hover::before {
	opacity: 1;
}

.cat-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 22px;
	border-radius: 13px;
	background: var(--accent-soft);
	color: var(--accent);
}

.cat-card__icon svg {
	width: 22px;
	height: 22px;
}

.cat-card h4 {
	font-size: 1.32rem;
	letter-spacing: -0.03em;
}

.cat-card p {
	margin-top: 12px;
	color: var(--text-soft);
	font-size: 15.5px;
}

.cat-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.cat-card__count {
	font-size: 13px;
	color: var(--text-mute);
}

.cat-card__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--accent);
	transition: gap 0.3s var(--ease);
}

.cat-card:hover .cat-card__go {
	gap: 12px;
}

.cat-card__go svg {
	width: 15px;
	height: 15px;
}

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

/* Galería de una página de categoría */

.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 28px);
}

.gallery figure {
	margin: 0;
}

.gallery__slot {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	aspect-ratio: 16 / 10;
	padding: 24px;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r-lg);
	background: var(--bg-sunken);
	text-align: center;
}

.gallery__slot svg {
	width: 26px;
	height: 26px;
	color: var(--text-mute);
}

.gallery__slot span {
	font-size: 13px;
	color: var(--text-mute);
	line-height: 1.5;
}

.gallery__slot code {
	display: inline-block;
	margin-top: 2px;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	word-break: break-all;
}

.gallery figcaption {
	margin-top: 14px;
}

.gallery figcaption b {
	display: block;
	font-size: 1.05rem;
	font-weight: 550;
	letter-spacing: -0.025em;
	color: var(--text);
}

.gallery figcaption span {
	display: block;
	margin-top: 5px;
	font-size: 14.5px;
	color: var(--text-soft);
}

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

/* Etiquetas dentro de una tarjeta */

.mini__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

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

/* Secondary work grid */

.work-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: clamp(20px, 3vw, 28px);
}

.mini {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
	transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
		box-shadow 0.4s var(--ease);
}

.mini:hover {
	transform: translateY(-5px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lg);
}

.mini__img {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-sunken);
}

.mini__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.mini:hover .mini__img img {
	transform: scale(1.06);
}

.mini__body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mini__body h4 {
	font-size: 1.12rem;
	letter-spacing: -0.03em;
}

.mini__body p {
	margin-top: 10px;
	font-size: 14.5px;
	color: var(--text-soft);
}

.mini__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
}

.pill-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-soft);
	transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
		background 0.25s var(--ease);
}

.pill-link:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-soft);
}

.pill-link svg {
	width: 11px;
	height: 11px;
}

/* ---------- 10. About ---------- */

.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.about__text p + p {
	margin-top: 18px;
}

.about__text p {
	color: var(--text-soft);
	font-size: clamp(1rem, 1.5vw, 1.08rem);
}

/* Áreas de trabajo actuales. Sin recuadro a propósito: la columna de
   habilidades de al lado ya son tarjetas, y dos bloques con borde competían. */

.about__areas {
	list-style: none;
	margin: 22px 0 4px;
	padding: 0;
	display: grid;
	gap: 0;
}

.about__areas li {
	display: flex;
	gap: 14px;
	padding: 15px 4px;
	border-top: 1px solid var(--line);
	transition: padding-left 0.35s var(--ease), background 0.35s var(--ease);
}

.about__areas li:last-child {
	border-bottom: 1px solid var(--line);
}

.about__areas li:hover {
	padding-left: 12px;
	background: var(--bg-elev);
}

.about__areas svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	color: var(--accent);
}

.about__areas b {
	display: block;
	font-size: 15.5px;
	font-weight: 550;
	letter-spacing: -0.02em;
	color: var(--text);
}

.about__areas span {
	display: block;
	margin-top: 3px;
	font-size: 14.8px;
	color: var(--text-soft);
}

/* El párrafo que sigue a la lista necesita su propio aire */
.about__areas + p {
	margin-top: 24px;
}

.about__quote {
	margin-top: 30px;
	padding: 22px 26px;
	border-left: 2px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--bg-elev);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.25rem;
	/* La cursiva necesita más aire entre líneas que la redonda */
	line-height: 1.6;
	color: var(--text);
}

/* Panel que agrupa las habilidades bajo su propio título. Como la columna
   de la izquierda es una lista sin caja, acá el recuadro marca la diferencia
   entre las dos mitades de la sección. */
.skills-panel {
	padding: clamp(26px, 3vw, 34px);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
	box-shadow: var(--shadow-sm);
}

.skills-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	/* El título respira arriba y abajo: antes la lista le quedaba encima. */
	padding-bottom: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--line);
}

.skills-panel__head h3 {
	font-size: 1.25rem;
}

.skills-panel__count {
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.skills {
	display: grid;
}

/* Dentro del panel las filas ya no llevan borde propio: alcanza una línea
   fina de separación, y así no quedan tarjetas dentro de una tarjeta. */
.skill {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 2px;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: none;
	font-size: 15.8px;
	font-weight: 450;
	transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}

/* La primera no necesita línea: ya la separa la del encabezado. */
.skill:first-child {
	border-top: 0;
	padding-top: 0;
}

.skill:last-child {
	padding-bottom: 0;
}

.skill:hover {
	transform: translateX(5px);
	color: var(--accent);
}

.skill__num {
	font-size: 12px;
	font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* La columna de texto es bastante más larga: dejamos el panel fijo para que
   acompañe la lectura en vez de quedar un hueco al costado. */
@media (min-width: 1001px) {
	.skills-panel {
		position: sticky;
		top: 110px;
	}
}

/* Timeline */

.timeline {
	margin-top: clamp(48px, 6vw, 76px);
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}

.timeline__row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 26px 8px;
	border-bottom: 1px solid var(--line);
	transition: background 0.35s var(--ease), padding 0.35s var(--ease);
}

.timeline__row:hover {
	background: var(--bg-elev);
	padding-inline: 20px;
}

.timeline__when {
	font-size: 13.5px;
	color: var(--text-mute);
	letter-spacing: 0.01em;
	padding-top: 3px;
}

.timeline__what h4 {
	font-size: 1.16rem;
	letter-spacing: -0.03em;
}

.timeline__what span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--accent);
}

.timeline__desc {
	font-size: 14.8px;
	color: var(--text-soft);
}

/* ---------- 11. Tools ---------- */

.tools-carousel {
	display: grid;
	gap: 14px;
}

.tools-row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tools-track {
	display: flex;
	width: max-content;
	animation: scroll-x 46s linear infinite;
}

/* El margen (en vez de gap) mantiene el patrón periódico:
   así el salto del bucle es invisible. */
.tools-track > * {
	margin-right: 14px;
}

.tools-carousel:hover .tools-track {
	animation-play-state: paused;
}

.tools-track .tool {
	width: 148px;
	flex: none;
}

.tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px 12px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-elev);
	text-align: center;
	transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
		box-shadow 0.35s var(--ease);
}

.tool:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

.tool img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	padding: 7px;
	border-radius: 11px;
	background: var(--tile);
}

.tool span {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-soft);
	letter-spacing: -0.01em;
}

/* ---------- 11b. Metodología ---------- */

.method {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
}

/* Diagrama circular */

.method__viz {
	position: relative;
	width: 100%;
	max-width: 420px;
	justify-self: center;
}

.method__viz svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.method-ring {
	fill: none;
	stroke: var(--line-strong);
	stroke-width: 20;
	stroke-linecap: round;
	transition: stroke 0.45s var(--ease), stroke-width 0.45s var(--ease);
	cursor: pointer;
}

.method-ring:hover {
	stroke: var(--text-mute);
}

.method-ring.is-active {
	stroke: var(--accent);
	stroke-width: 26;
}

.method-num {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	fill: var(--text-mute);
	pointer-events: none;
	transition: fill 0.45s var(--ease);
}

/* Relleno opaco del color del fondo: antes era translúcido y el arco se
   transparentaba, dejando ver el borde redondeado por debajo. El halo
   además despega la burbuja del arco, que si no se fundía con el coral. */
.method-num-bg {
	fill: var(--bg);
	stroke: var(--line-strong);
	stroke-width: 2.5;
	transition: fill 0.45s var(--ease), stroke 0.45s var(--ease);
	pointer-events: none;
	paint-order: stroke;
}

/* La fase activa se invierte: burbuja del color del fondo y número coral.
   Así se distingue del arco sin competir con él. */
.method-node.is-active .method-num-bg {
	stroke: var(--accent);
}

.method-node.is-active .method-num {
	fill: var(--accent);
	font-weight: 700;
}

/* Punto que recorre el ciclo: la señal visual de la iteración */

.method-orbit {
	transform-box: view-box;
	transform-origin: 200px 200px;
	animation: method-spin 16s linear infinite;
}

/* El punto es coral liso. Cuando su recorrido lo lleva por encima del arco
   de la fase activa —que también es coral— el JS le pone .is-over y aclara
   apenas el tono: lo justo para seguirlo sin que se vuelva un estorbo. */
.method-orbit circle {
	fill: var(--accent);
	transition: fill 0.3s var(--ease);
}

.method-orbit.is-over circle {
	fill: var(--accent-over);
}

@keyframes method-spin {
	to { transform: rotate(360deg); }
}

/* El texto y la guía del centro son decorativos: si capturan el puntero,
   se comen los clics destinados a los arcos. */
.method-center-title,
.method-center-sub,
.method-dashed,
.method-orbit {
	pointer-events: none;
}

.method-center-title {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 500;
	fill: var(--text);
}

.method-center-sub {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--text-mute);
}

.method-dashed {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.5;
	stroke-dasharray: 4 8;
}

.method-node {
	cursor: pointer;
}

/* Panel de fases */

/* Las cuatro fases comparten la misma celda de la grilla: así el alto lo fija
   la más larga y el círculo de al lado no se mueve al cambiar de pestaña. */
.method__body {
	display: grid;
	grid-template-rows: auto 1fr;
}

.method__tabs {
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.method__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg-elev);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-mute);
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
		background 0.3s var(--ease);
}

.method__tab:hover {
	color: var(--text);
	border-color: var(--line-strong);
}

.method__tab[aria-selected="true"] {
	background: var(--accent-soft);
	border-color: transparent;
	color: var(--accent);
}

.method__tab i {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.method__panel {
	grid-row: 2;
	grid-column: 1;
	transition: opacity 0.35s var(--ease);
}

/* visibility (en vez de display:none) mantiene el espacio reservado, pero
   igual saca el panel del foco y de los lectores de pantalla. */
.method__panel[hidden] {
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.method__panel h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

.method__steps {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 2px;
	counter-reset: paso;
}

.method__steps li {
	position: relative;
	padding: 16px 0 16px 40px;
	border-top: 1px solid var(--line);
}

.method__steps li::before {
	counter-increment: paso;
	content: counter(paso, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 17px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.method__steps h4 {
	font-size: 1.02rem;
	letter-spacing: -0.025em;
}

.method__steps p {
	margin-top: 6px;
	font-size: 14.8px;
	color: var(--text-soft);
}

/* Nota sobre metodología ágil */

.method__agile {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: clamp(36px, 5vw, 56px);
	padding: 22px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
}

.method__agile svg {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--accent);
	margin-top: 2px;
}

.method__agile p {
	color: var(--text-soft);
	font-size: 15.8px;
	max-width: 78ch;
}

.method__agile strong {
	color: var(--text);
	font-weight: 550;
}

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

	.method__viz {
		max-width: 340px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.method-orbit {
		animation: none;
	}
}

/* ---------- 12. Contact ---------- */

.contact-card {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background:
		radial-gradient(70% 120% at 50% 0%, var(--accent-soft), transparent 65%),
		var(--bg-elev);
	text-align: center;
	box-shadow: var(--shadow-lg);
}

.contact-card h2 {
	font-size: clamp(2rem, 5vw, 3.4rem);
	max-width: 16ch;
	margin-inline: auto;
}

.contact-card > p {
	margin-top: 20px;
	margin-inline: auto;
	max-width: 48ch;
	color: var(--text-soft);
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}

.contact-card__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

.copy-btn {
	position: relative;
}

.copy-btn.is-copied {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
}

.socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}

.social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--bg);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-soft);
	transition: transform 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease);
}

.social:hover {
	transform: translateY(-3px);
	color: var(--text);
	border-color: var(--line-strong);
}

.social svg {
	width: 16px;
	height: 16px;
}

/* ---------- 13. Footer ---------- */

.footer {
	position: relative;
	z-index: 1;
	padding-block: 40px 48px;
	border-top: 1px solid var(--line);
}

.footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 13.5px;
	color: var(--text-mute);
}

.footer__inner a:hover {
	color: var(--accent);
}

.to-top {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.to-top svg {
	width: 14px;
	height: 14px;
}

/* =========================================================
   Páginas de proyecto (proyectos/*.html)
   ========================================================= */

.case-hero {
	position: relative;
	z-index: 1;
	padding-top: clamp(120px, 15vw, 168px);
	padding-bottom: clamp(32px, 5vw, 52px);
}

.case-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-mute);
	transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}

.case-back:hover {
	gap: 13px;
	color: var(--accent);
}

.case-back svg {
	width: 15px;
	height: 15px;
}

.case-hero h1 {
	max-width: 18ch;
	font-size: clamp(2.3rem, 6vw, 4rem);
	letter-spacing: -0.045em;
	line-height: 1;
}

.case-hero__lead {
	margin-top: 24px;
	max-width: 58ch;
	color: var(--text-soft);
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
}

/* Aviso de confidencialidad: informa sin robarle protagonismo al resumen,
   por eso va en gris y no en el coral de los recuadros de pendiente. */

.case-hero__note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 22px;
	padding: 14px 18px;
	max-width: 62ch;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg-sunken);
	color: var(--text-mute);
	font-size: 14px;
	line-height: 1.6;
}

.case-hero__note svg {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 3px;
}

/* Ficha técnica */

.case-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	margin: clamp(36px, 5vw, 52px) 0 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--line);
	overflow: hidden;
}

.case-meta > div {
	padding: 22px 24px;
	background: var(--bg-elev);
}

.case-meta dt {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.case-meta dd {
	margin: 9px 0 0;
	font-size: 15.5px;
	font-weight: 450;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

/* Portada */

.case-cover {
	display: grid;
	place-items: center;
	margin-top: clamp(28px, 4vw, 44px);
	padding: clamp(28px, 5vw, 60px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background:
		radial-gradient(80% 120% at 50% 0%, var(--accent-soft), transparent 65%),
		var(--bg-elev);
	overflow: hidden;
}

.case-cover img {
	width: 100%;
	max-width: 560px;
	height: auto;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}

/* Bloques de contenido */

.case-block {
	position: relative;
	z-index: 1;
	padding-block: clamp(48px, 7vw, 88px);
}

.case-block__head {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: clamp(20px, 4vw, 48px);
	align-items: start;
}

.case-block__num {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	padding-top: 8px;
}

.case-block h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	max-width: 20ch;
}

.case-prose {
	margin-top: 20px;
	max-width: 62ch;
}

.case-prose p {
	color: var(--text-soft);
	font-size: clamp(1rem, 1.5vw, 1.09rem);
}

.case-prose p + p,
.case-prose ul + p {
	margin-top: 16px;
}

.case-prose strong {
	color: var(--text);
	font-weight: 550;
}

.case-prose ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.case-prose li {
	position: relative;
	padding-left: 26px;
	color: var(--text-soft);
	font-size: 15.8px;
}

.case-prose li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

/* Figuras e imágenes */

.case-figures {
	display: grid;
	gap: clamp(16px, 2.4vw, 24px);
	margin-top: clamp(28px, 4vw, 44px);
}

.case-figures--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-figure {
	margin: 0;
}

/* Las capturas son de 500 px: sin este tope se agrandarían y se verían
   borrosas en las figuras a ancho completo. */
.case-figure--single {
	margin-top: clamp(28px, 4vw, 44px);
	max-width: 560px;
}

.case-figure__frame {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-sunken);
	overflow: hidden;
	cursor: zoom-in;
	position: relative;
	transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
		transform 0.4s var(--ease);
}

.case-figure__frame:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lg);
}

.case-figure__frame img {
	width: 100%;
	height: auto;
	display: block;
}

.case-figure figcaption {
	margin-top: 12px;
	font-size: 14px;
	color: var(--text-mute);
	line-height: 1.5;
}

.case-figure figcaption b {
	color: var(--text-soft);
	font-weight: 550;
}

/* Hueco para una imagen que todavía no se subió */

.case-slot {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	min-height: 220px;
	padding: 28px 24px;
	border: 1.5px dashed var(--line-strong);
	border-radius: var(--r-lg);
	background: var(--bg-sunken);
	text-align: center;
}

.case-slot svg {
	width: 24px;
	height: 24px;
	color: var(--text-mute);
}

.case-slot span {
	font-size: 13.5px;
	color: var(--text-mute);
	max-width: 34ch;
	line-height: 1.5;
}

.case-slot code {
	display: inline-block;
	margin-top: 4px;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Marca un dato suelto que falta completar */
.case-fill {
	color: var(--accent);
	border-bottom: 1.5px dashed var(--accent);
	font-weight: 500;
}

/* Recuadro de pendiente: se ve a propósito para que no se publique sin querer */

.case-todo {
	margin-top: 24px;
	padding: 20px 22px;
	border: 1.5px dashed var(--accent);
	border-radius: var(--r-md);
	background: var(--accent-soft);
	max-width: 62ch;
}

.case-todo b {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.case-todo p {
	color: var(--text-soft);
	font-size: 15px;
}

/* Pie de la página de proyecto */

.case-next {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	border-top: 1px solid var(--line);
}

.case-next__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.case-next h3 {
	font-size: clamp(1.4rem, 3vw, 2rem);
}

.case-next p {
	margin-top: 8px;
	color: var(--text-soft);
	font-size: 15.5px;
}

@media (max-width: 900px) {
	.case-meta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.case-block__head {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.case-block__num {
		padding-top: 0;
	}
}

@media (max-width: 640px) {
	.case-figures--2 {
		grid-template-columns: 1fr;
	}
}

/* ---------- 14. Lightbox ---------- */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(6, 7, 9, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox img {
	max-width: min(1100px, 92vw);
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--r-md);
	transform: scale(0.96);
	transition: transform 0.35s var(--ease);
}

.lightbox.is-open img {
	transform: scale(1);
}

.lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, 0.16);
}

.lightbox__close svg {
	width: 18px;
	height: 18px;
}

.lightbox__caption {
	position: absolute;
	bottom: 22px;
	left: 50%;
	translate: -50% 0;
	padding: 8px 18px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 13.5px;
}

/* ---------- 15. Responsive ---------- */

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

	.portrait {
		justify-self: start;
		max-width: 210px;
		order: -1;
		transform: none;
		border-radius: var(--r-lg);
	}

	.portrait__tag {
		display: none;
	}

	.project,
	.about {
		grid-template-columns: 1fr;
	}

	.project--flip .project__body {
		order: 0;
	}

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

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

	.timeline__row {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.timeline__desc {
		grid-column: 2;
	}
}

@media (max-width: 860px) {
	.nav__links,
	.nav__cta {
		display: none;
	}

	.nav__burger {
		display: grid;
	}

	.nav.is-open .nav__drawer {
		display: block;
	}

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

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

	:root {
		--gutter: 18px;
	}

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

	.shots {
		gap: 10px;
	}

	.timeline__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.timeline__desc {
		grid-column: 1;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.contact-card__actions .btn {
		flex: 1 1 100%;
	}
}

/* ---------- 16. Motion preferences / print ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	/* Sin animación, los carruseles se recorren a mano. */
	.tools-track {
		transform: none !important;
	}

	.tools-row {
		overflow-x: auto;
	}
}

@media print {
	.nav,
	.fx,
	.lightbox {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}