/* Variables de diseño sacadas de Figma (frame de 1920×1080). */
:root {
	/* Colores: negro puro y blanco puro */
	--c-black: #000000;
	--c-white: #ffffff;
	--c-bg: var(--c-white);
	--c-text: var(--c-black);

	/* Tipografía */
	--ff-base: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ff-heading: var(--ff-base);
	--ff-body: var(--ff-base);

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-extrabold: 800;

	--fs-nav: 20.23px;       /* logo y menú */
	--lh-nav: 27px;          /* separación entre enlaces del menú */
	--fs-display: 40.23px;   /* títulos de la home */
	--fs-small: 13.23px;     /* textos pequeños: "[ Ver proyectos ]", etiqueta de foto */
	--fs-text: 15.23px;      /* descripciones de proyecto */
	--lh-text: 22px;
	--o-muted: .3;           /* opacidad de los textos secundarios */

	/* Layout */
	--header-pad-top: 17px;
	--header-pad-left: 20px;
	--header-pad-right: 20px;
	--header-tagline-x: 375px; /* "Creative. Photographer. Director" */
	--lang-gap: 14px;         /* del menú al selector de idioma */
	--footer-pad-y: 17px;    /* igual arriba y abajo; deja 23px del texto al borde, como el header */
	--footer-pad-x: 20px;
	--footer-h: calc(var(--footer-pad-y) * 2 + var(--lh-nav)); /* 61px */
	--home-more-gap: 9px;    /* del título al "[ Ver proyectos ]" */
	--home-blur: 8px;        /* desenfoque del título no activo */
	--info-w: 492px;          /* ficha de proyecto del carrusel */
	--info-gap: 29px;         /* del título de la ficha al texto */
	--label-gap: 21px;        /* de la etiqueta a la foto */
	--label-inset: 20px;      /* sangría de la etiqueta en fotos no centrales */
	--hover-zoom: 1.04;       /* zoom de la foto del carrusel en hover */
	--lh-project: 30px;       /* ficha y textos de la página de proyecto (medium 20.23) */
	--stage-top: 159px;       /* página de proyecto: del borde de arriba a las fotos */
	--stage-bottom: 117px;    /* página de proyecto: de las fotos al borde de abajo (flechas y contador) */
	--media-top: 215px;       /* plantilla foto y vídeo: del borde de arriba a la foto */
	--media-info-gap: 240px;  /* plantilla foto y vídeo: de la foto y el vídeo a los textos */
	--grid-top: 125px;        /* grid de fotos: del borde de arriba a la primera fila */
	--grid-w: 69.43vw;        /* grid de fotos: 1333px en 1920 */
	--grid-gap: 20px;         /* grid de fotos: entre fotos y entre filas */
	--grid-info-gap: 120px;   /* grid de fotos: de la última fila al título */
	--about-top: 155px;       /* about: del borde de arriba al texto */
	--about-bottom: 250px;    /* about: del correo al pie */
	--about-text-w: 826px;    /* about: ancho del texto */
	--about-photo-top: 352px; /* about: del borde de arriba a la foto */
	--about-photo-right: 10.52vw; /* about: 202px del borde derecho en 1920 */
	--about-photo-w: 16.3vw;  /* about: 313px en 1920 */
	--about-photo-rotate: 4.5deg; /* about: giro de la polaroid */
	--about-contact-gap: 178px; /* about: del texto al Instagram */
	--gallery-gap: 9.0625vw;  /* entre las dos fotos: 174px en 1920 */
	--project-text-w: 1010px; /* columna de los bloques de información */
	--container: 1440px;
	--gutter: clamp(1rem, 4vw, 5rem);
}