/* ---------------------------------------------------------------
   ESTILOS DEL CV  -  cv.html y los PDF

   Solo afectan a la hoja blanca del CV (.cv-sheet) y a la barra
   del boton de descarga (.cv-toolbar). El resto de la web no se
   entera de que existe este archivo.

   La hoja esta disenyada a tamanyo A4 (794 x 1123 px), igual que
   el PDF. En pantallas estrechas se reordena en una sola columna.

   Colores del CV, por si algun dia los quieres retocar: estan
   todos juntos en el bloque .cv-sheet de aqui abajo.
   --------------------------------------------------------------- */


/* --- Barra con el boton de descarga (solo en la web) ----------- */

.cv-toolbar {
	max-width: 794px;
	margin: 0 auto 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 30px;
}

.cv-toolbar p {
	margin: 0;
}


/* --- La hoja ---------------------------------------------------- */

.cv-sheet {
	--cv-ink: #4a4a4a;     /* nombre y titulos en negrita */
	--cv-role: #535353;    /* titulo del puesto: el gris exacto del CV de Illustrator */
	--cv-text: #5c5c5c;    /* texto normal */
	--cv-soft: #808080;    /* fechas, centros, detalles */
	--cv-band: #efefef;    /* franja gris de la cabecera */
	--cv-line: #6f6f6f;    /* linea central y sus puntos */

	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 794px;
	max-width: 100%;
	min-height: 1123px;
	margin: 0 auto;
	padding: 55px 0 42px;
	background: #fff;
	color: var(--cv-text);
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

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

/* La plantilla da margenes, tamanyos y colores (titulos en blanco
   incluso) a estas etiquetas. Aqui se anulan dentro de la hoja. */
.cv-sheet h2,
.cv-sheet h3,
.cv-sheet h4,
.cv-sheet p,
.cv-sheet ul,
.cv-sheet ol,
.cv-sheet li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	color: inherit;
}

.cv-sheet h2,
.cv-sheet h3,
.cv-sheet h4 {
	color: var(--cv-ink) !important;
}

.cv-sheet a,
.cv-sheet a:hover {
	color: inherit;
	text-decoration: none;
}

.cv-sheet img {
	display: block;
	max-width: none;
}


/* --- Cabecera ----------------------------------------------------- */

.cv-head {
	display: grid;
	grid-template-columns: 161px 1fr;
	grid-template-rows: 100px auto;
	margin-left: 57px;
}

.cv-sheet .cv-photo {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 161px;
	height: 151px;
	object-fit: cover;
	object-position: 50% 35%;
}

.cv-band {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 57px 2px 88px;
	background: var(--cv-band);
}

.cv-sheet .cv-name {
	font-size: 24px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.cv-sheet .cv-role {
	margin-top: 3px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 300;
}

.cv-intro {
	grid-column: 2;
	grid-row: 2;
	padding: 10px 57px 0 88px;
}

.cv-sheet .cv-summary {
	font-size: 10px;
	line-height: 1.65;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--cv-soft);
}

.cv-sheet .cv-contact {
	display: grid;
	grid-template-columns: 252px auto;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: 13px 0;
	margin-top: 20px;
}

/* Sin telefono (web y PDF publico) quedan tres datos: se colocan
   por filas, email y web arriba y Barcelona debajo. */
.cv-sheet .cv-contact:has(> :nth-child(3):last-child) {
	grid-auto-flow: row;
}

.cv-sheet .cv-contact-item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 11px;
	line-height: 18px;
	font-weight: 500;
}

.cv-sheet .cv-contact-item img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	flex: none;
}


/* --- Cuerpo en dos columnas con la linea central ------------------ */

.cv-body {
	position: relative;
	flex: 1;
	display: grid;
	/* minmax(0, 1fr): las dos columnas miden siempre lo mismo aunque un
	   texto sin cortes (un puesto largo) sea mas ancho que su columna. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	column-gap: 86px;
	margin: 34px 57px 0;
	padding-top: 26px;
}

.cv-sheet .cv-timeline {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--cv-line);
}

.cv-sheet .cv-timeline::before,
.cv-sheet .cv-timeline::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--cv-line);
}

.cv-sheet .cv-timeline::before { top: -4px; }
.cv-sheet .cv-timeline::after { bottom: -4px; }

/* La experiencia va primero en el archivo (asi la leen los
   formularios), pero se pinta en la columna derecha. */
.cv-work {
	grid-column: 2;
	grid-row: 1;
}

.cv-aside {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
}

.cv-aside section + section {
	margin-top: 38px;
}

/* OJO con letter-spacing (separacion entre letras): en pantalla se
   usa para dar aire, pero en el PDF queda anulado (ver el bloque de
   impresion al final). Los formularios de empleo reconstruyen las
   palabras midiendo el hueco entre letras, y cualquier separacion les
   hace partirlas: un formulario real leyo "Atla ntis Anima tion". */
.cv-sheet .cv-title {
	margin-bottom: 20px;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* El espaciado entre letras deja un hueco tras la ultima letra;
   esto lo compensa para que el titulo quede alineado a la linea. */
.cv-aside .cv-title {
	margin-right: -0.08em;
}


/* --- Experiencia ---------------------------------------------------- */

/* En cv-sheet.php la empresa va DESPUES de los proyectos, porque los
   formularios de empleo toman la ultima linea como empresa. Esta
   rejilla la vuelve a pintar debajo del puesto, como en el diseno.
   Colocar con grid-row no cambia el orden en que se lee el texto. */
.cv-sheet .cv-job {
	display: grid;
	align-content: start;
}

.cv-sheet .cv-date     { grid-row: 1; }
.cv-sheet .cv-job-role { grid-row: 2; }
.cv-sheet .cv-company  { grid-row: 3; }
.cv-sheet .cv-projects { grid-row: 4; }

.cv-sheet .cv-job + .cv-job {
	margin-top: 13px;
}

.cv-sheet .cv-date {
	font-size: 12px;
	line-height: 16px;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--cv-soft);
}

.cv-sheet .cv-job-role {
	margin-top: 5px;
	font-size: 14.5px;
	line-height: 19px;
	font-weight: 700;
	color: var(--cv-role) !important;
	/* Nunca en dos lineas: un formulario se quedaria solo con la primera
	   mitad del puesto. "Graphic Designer and Multimedia Artist" se pasa
	   5px del ancho de la columna y los invade del margen, sin notarse. */
	white-space: nowrap;
}

.cv-sheet .cv-company {
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	font-style: italic;
	letter-spacing: 0.06em;
}

.cv-sheet .cv-projects {
	margin-top: 5px;
	font-size: 9px;
	line-height: 12px;
	color: var(--cv-soft);
}


/* --- Formacion ------------------------------------------------------ */

/* OJO: nada con texto dentro de la hoja puede llevar position
   relative/absolute. El navegador pinta esos elementos al final,
   y en el PDF su texto acaba desordenado (los titulos de estudios
   salian despues de ADDITIONAL INFO). Los iconos se colocan con
   flex, que respeta el orden. */

.cv-sheet .cv-study + .cv-study {
	margin-top: 13px;
}

.cv-sheet .cv-school,
.cv-sheet .cv-years {
	margin-right: 32px;
}

.cv-sheet .cv-school {
	font-size: 11px;
	line-height: 15px;
	font-weight: 300;
	color: var(--cv-soft);
}

.cv-sheet .cv-degree {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
	margin-top: 3px;
	font-size: 14.5px;
	line-height: 19px;
	font-weight: 700;
}

/* Ancho maximo para que "Virtual production with / Unreal Engine"
   parta la linea en el mismo sitio que el CV original. */
.cv-sheet .cv-degree span {
	max-width: 225px;
}

.cv-sheet .cv-degree em {
	font-style: italic;
}

.cv-sheet .cv-check {
	flex: none;
	width: 17px;
	height: 17px;
}

.cv-sheet .cv-years {
	margin-top: 3px;
	font-size: 11px;
	line-height: 15px;
	font-weight: 500;
}


/* --- Software ------------------------------------------------------- */

.cv-sheet .cv-logos {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 19px;
}

.cv-sheet .cv-logos img {
	width: 26px;
	height: 26px;
}

.cv-sheet .cv-software-list {
	margin-top: 12px;
	font-size: 9.5px;
	line-height: 15px;
	color: var(--cv-soft);
}


/* --- Informacion adicional ------------------------------------------ */

.cv-sheet .cv-extras-item {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	font-size: 10.5px;
	line-height: 20px;
}

.cv-sheet .cv-extras-item + .cv-extras-item {
	margin-top: 11px;
}

.cv-sheet .cv-extras-item img {
	flex: none;
	width: 22px;
	height: 20px;
	object-fit: contain;
}


/* --- Pantallas estrechas: una sola columna -------------------------- */

@media screen and (max-width: 920px) {

	.cv-sheet {
		width: 100%;
		min-height: 0;
		padding: 26px 0 36px;
		box-shadow: none;
	}

	.cv-head {
		grid-template-columns: 96px 1fr;
		grid-template-rows: auto auto;
		margin: 0 24px;
	}

	.cv-sheet .cv-photo {
		grid-row: 1;
		width: 96px;
		height: 96px;
	}

	.cv-band {
		padding: 0 20px;
	}

	.cv-sheet .cv-job-role { white-space: normal; }
	.cv-sheet .cv-name { font-size: 20px; }
	.cv-sheet .cv-role { font-size: 15px; }

	.cv-intro {
		grid-column: 1 / span 2;
		padding: 18px 0 0;
	}

	.cv-sheet .cv-summary { font-size: 12px; }

	.cv-sheet .cv-contact {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 10px;
	}

	.cv-sheet .cv-contact-item { font-size: 12px; }

	.cv-body {
		grid-template-columns: 1fr;
		margin: 34px 24px 0;
		padding-top: 0;
	}

	.cv-sheet .cv-timeline { display: none; }

	.cv-work { grid-column: 1; grid-row: 1; }

	.cv-aside {
		grid-column: 1;
		grid-row: 2;
		margin-top: 38px;
		text-align: left;
	}

	.cv-aside .cv-title { margin-right: 0; }
	.cv-sheet .cv-title { font-size: 18px; }

	/* Iconos a la izquierda del texto */
	.cv-sheet .cv-school,
	.cv-sheet .cv-years { margin: 0 0 0 32px; }
	.cv-sheet .cv-degree,
	.cv-sheet .cv-extras-item { flex-direction: row-reverse; }
	.cv-sheet .cv-degree span { max-width: none; }

	.cv-sheet .cv-logos {
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 16px;
	}

	.cv-sheet .cv-software-list,
	.cv-sheet .cv-projects { font-size: 11px; line-height: 16px; }
	.cv-sheet .cv-software-list br { display: none; }

	.cv-sheet .cv-extras-item { font-size: 12px; gap: 14px; }
	.cv-sheet .cv-extras-item img { width: 18px; }
}


/* --- Impresion y PDF -------------------------------------------------- */

@page {
	size: A4;
	margin: 0;
}

@media print {

	html, body {
		background: #fff !important;
	}

	/* Si alguien imprime la pagina de la web (Ctrl+P), sale solo
	   la hoja, sin menu, portada ni pie. */
	.preloader-wrap, header.classic-menu, footer, #hero, #hero-bg-wrapper,
	.cv-toolbar, #project-nav, .cd-cover-layer, #ball, #rotate-device {
		display: none !important;
	}

	body.hidden,
	.has-animation {
		opacity: 1 !important;
		transform: none !important;
	}

	#page-content, #main, #main-content, #main-page-content, .vc_row, .container {
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
		background: #fff !important;
	}

	.cv-sheet {
		width: 210mm;
		height: 297mm;
		min-height: 0;
		margin: 0;
		overflow: hidden;
		box-shadow: none;
		font-synthesis: none;

		/* Sin ligaduras: si no, "fi" sale como un unico caracter
		   especial y un formulario lee "film" en vez de "film". */
		font-variant-ligatures: none;
		font-feature-settings: "liga" 0, "clig" 0;
	}

	/* En el PDF, CERO separacion entre letras en todo el texto. Con
	   separacion, los formularios de empleo parten las palabras
	   ("Brown Ba g Films") y confunden la empresa con el proyecto. */
	.cv-sheet,
	.cv-sheet * {
		letter-spacing: 0 !important;
	}

	.cv-aside .cv-title {
		margin-right: 0 !important;
	}
}