/* =========================================================
   9astr4l Portfolio — estilos globales
   Migrado desde Cargo. Las medidas usan rem, y el rem
   escala con el ancho de la ventana (igual que en Cargo).
   ========================================================= */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Colores del sitio */
	--text: rgba(0, 0, 0, 0.85);
	--naranja: #ff4b00;
	--azul: #2351fc;
	--rosa: #ffdddd;
	--amarillo: #ffff00;
	--fondo: #ffffff;

	/* Tipografía: Cargo usaba "Neue Haas Grotesk" (fuente con licencia de Cargo).
	   Si tienes la licencia, pon aquí su nombre en primer lugar. */
	--font: "Neue Haas Grotesk Text", "Neue Haas Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--peso: 560;                   /* grosor del texto (400 normal, 700 negrita) */

	/* Alturas de cabecera y pie fijos (para que el contenido no quede debajo) */
	--header-h: 8.9rem;
	--footer-h: 8.4rem;
}

html {
	/* Igual que Cargo: el tamaño base depende sobre todo de la ALTURA de la ventana
	   (≈ 13px en una pantalla de 900px de alto), limitado por el ancho. */
	font-size: clamp(8px, min(1.44vh, 1.6vw), 22px);
	-webkit-text-size-adjust: none;
}
@media (max-width: 767px) {
	html { font-size: 2.4vw; }     /* en móvil todo se ve algo más grande */
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--fondo);
	color: var(--text);
	font-family: var(--font);
	letter-spacing: -0.015em;      /* Inter es algo más ancha que Neue Haas */
	font-weight: var(--peso);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	flex-direction: column;
}

/* ---------- Texto ---------- */
.bodycopy {
	font-size: 3rem;
	font-weight: var(--peso);
	line-height: 1.3;
	color: var(--text);
}
.bodycopy a { color: var(--azul); text-decoration: none; }

h1, h2 { margin: 0; font-weight: var(--peso); color: var(--text); }
h1 { font-size: 4rem; line-height: 1.1; }
h2 { font-size: 2.4rem; line-height: 1.2; }
.bodycopy h1 a, .bodycopy h2 a { color: var(--text); text-decoration: none; }
.page a.active, .bodycopy h2 a.active { color: var(--naranja); }

.caption {
	display: block;
	font-size: 1.3rem;
	font-weight: var(--peso);
	line-height: 1.3;
	color: var(--text);
}
.caption a { color: var(--text); text-decoration: underline; }
.media .caption, .media figcaption { margin-top: 0.6em; }

.h2-border {
	display: inline-block;
	font-size: 2.4rem;
	line-height: 1.2;
	font-weight: var(--peso);
	color: var(--text);
	border: 2px solid black;
	border-radius: 10rem;
	padding: 0 1.5rem;
}
.h2-orange {
	display: inline-block;
	font-size: 2.4rem;
	line-height: 1.2;
	font-weight: var(--peso);
	color: var(--naranja);
}
.h2-orange a { color: var(--naranja); text-decoration: none; }

.fake-link { text-decoration: underline; }

a:active, .media a:active { opacity: 0.7; }

/* ---------- Estructura de página ---------- */
.page {
	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: flex-start;
	width: 100%;
}
.page-layout { flex-grow: 1; max-width: 100%; }
.page-content { padding: 3rem; text-align: left; height: 100%; }

.main-page {
	flex: 1;
	padding-top: var(--header-h);
}

/* Cabecera fija, por encima del contenido */
.pinned {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10;
	pointer-events: none;
}
.pinned a, .pinned .media { pointer-events: auto; }
.pinned-top { top: 0; }

/* Pie: solo aparece al final de la página. El reloj va centrado
   sobre la misma línea que "Information" e "Instagram". */
.site-footer { position: relative; }
.site-footer .clock-bar { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }

/* Móvil: tamaños de texto algo menores y el reloj encima de los enlaces del pie */
@media (max-width: 767px) {
	h1 { font-size: 3rem; }
	.bodycopy { font-size: 2.4rem; }
	.site-footer .clock-bar { position: static; }
	.site-footer .clock-bar .page-content { padding-bottom: 0; }
}

/* Fondo degradado (página Information) */
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgb(255, 255, 253) 0%, rgb(255, 255, 253) 25%, rgb(254, 34, 1) 75%, rgb(254, 34, 1) 100%);
}

/* ---------- Columnas (12 columnas, como Cargo) ---------- */
.columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap, 2rem);
	align-items: start;
}
.columns > .col { grid-column: span var(--span, 12); min-width: 0; }
/* Columnas del mismo ancho (cuando en Cargo no se indicaba el ancho) */
.columns.equal { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.columns.equal > .col { grid-column: auto; }
@media (max-width: 767px) {
	.columns.stack-mobile { row-gap: var(--gap-mobile, var(--gap, 2rem)); }
	.columns.stack-mobile > .col { grid-column: 1 / -1; }
}

/* Fila de canciones: portada y título alineados igual en todas */
.music-row .col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.music-row .col > * { width: 100%; }
.music-row .media { display: block; }
.music-row br { display: none; }
.music-row .caption { margin-top: 0.6em; }
.music-row .col > .caption:has(.media) { margin-top: 0; }

/* ---------- Imágenes y vídeos ---------- */
.media {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	width: var(--scale, 100%);
	max-width: 100%;
}
.media > a { display: block; color: inherit; }
.media img, .media video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 11px;
	object-position: var(--pos, 50% 50%);
}
.media.zoomable img, .media.zoomable video { cursor: zoom-in; }

/* Ceniceros decorativos */
.ashtray { height: 0; }
.ashtray .media img { transform: translateY(-50%); position: relative; z-index: 1; }
@media (max-width: 767px) { .ashtray { display: none; } }

/* ---------- Galería en rejilla ---------- */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--gap-x, 1rem);
	row-gap: var(--gap-y, 1rem);
	align-items: start;
}
.gallery-grid > .media { width: 100%; grid-column: span var(--grid-span, 1); }

/* "Todos los tattoos": nombres centrados y algo más grandes */
#L1902299572 .gallery-grid .caption { text-align: center; font-size: 1.7rem; margin-top: 0.7em; }
.gallery-grid > .media img, .gallery-grid > .media video {
	aspect-ratio: var(--frame);
	object-fit: cover;
}
@media (max-width: 767px) {
	.gallery-grid { grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr)); }
	.gallery-grid > .media { grid-column: span 1; }
}

/* ---------- Galería justificada (filas de igual altura) ---------- */
.gallery-justify { display: flex; flex-direction: column; gap: var(--gap, 1rem); }
.gallery-justify .row { display: flex; gap: var(--gap, 1rem); align-items: flex-start; }
.gallery-justify .row > .media { width: auto; flex: var(--ratio, 1) 1 0; min-width: 0; }
@media (max-width: 767px) {
	.gallery-justify .row { flex-direction: column; }
	.gallery-justify .row > .media { width: 100%; }
}

/* ---------- Pase de diapositivas ---------- */
/* El marco toma la proporción de la primera foto y todas las demás
   se recortan a ese mismo marco, así no se mueve nada al cambiar. */
.slideshow { position: relative; width: 100%; aspect-ratio: var(--ratio, 3 / 4); }
.slideshow > .media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--speed, 0.5s) ease;
	pointer-events: none;
}
.slideshow > .media > a { height: 100%; }
.slideshow > .media img, .slideshow > .media video { width: 100%; height: 100%; object-fit: cover; }
.slideshow > .media.active { opacity: 1; pointer-events: auto; }
.slideshow figcaption { display: none; }

/* ---------- Ficha de cada tattoo ---------- */
/* Datos (Size, Technique…) y descripción con el mismo tamaño, como en "Sinchan (SPC)" */
.tattoo-page .main-page .columns > .col:first-child { font-size: 1.3rem; line-height: 1.3; }
.tattoo-page .main-page .columns > .col:first-child .caption { font-size: inherit; display: inline; }
.tattoo-page .main-page .columns > .col:first-child h2 { font-size: 2.4rem; }

/* ---------- Visor de imágenes (zoom) ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	cursor: zoom-out;
}
.lightbox img, .lightbox video {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 11px;
}
.lightbox[hidden] { display: none; }

/* Enlaces a páginas que ya no existían en Cargo */
a[data-missing] { cursor: not-allowed; }