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

   Diseno "CV Grid" (disenyado en Claude Design, sep 2026): nombre
   grande con "Reina" en hueco, franja de contacto, experiencia a la
   izquierda y columna fina a la derecha con software, estudios e
   info adicional. Tipografia Unbounded y azul de Azurio.

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

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

   Los COLORES y los TAMANYOS DE LETRA estan todos juntos al
   principio del bloque .cv-sheet, para poder retocarlos sin buscar.

   TRES REGLAS QUE NO CONVIENE TOCAR (las aprendimos probando el PDF
   en formularios de empleo de verdad):
     1. En el PDF, cero separacion entre letras. Los formularios
        reconstruyen las palabras midiendo el hueco entre letras y
        con separacion las parten ("Atla ntis Anima tion").
     2. Nada con texto puede llevar position relative/absolute: el
        navegador lo pinta al final y en el PDF el texto sale
        desordenado.
     3. El puesto nunca se parte en dos lineas: el formulario se
        quedaria con la primera mitad. Por eso lleva nowrap y, si
        no cabe junto a las fechas, son las fechas las que bajan.
   --------------------------------------------------------------- */


/* --- 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 {
	/* COLORES */
	--cv-bg: #f3f2f2;        /* fondo de la hoja */
	--cv-ink: #201e1d;       /* texto principal y titulos */
	--cv-company: #3d3a39;   /* empresa y proyectos */
	--cv-soft: #605d5d;      /* fechas, centros, etiquetas */
	--cv-place: #6f6b6b;     /* ubicacion de cada trabajo */
	--cv-accent: #002bba;    /* azul Azurio: "FX Artist", anyos, web, Houdini y Nuke */
	--cv-accent-bar: #002bba;/* la barrita junto a "FX Artist" */
	--cv-rule: rgba(32, 30, 29, 0.22);      /* lineas fuertes */
	--cv-rule-soft: rgba(32, 30, 29, 0.13); /* linea sobre cada trabajo */
	--cv-rule-cell: rgba(32, 30, 29, 0.14); /* separadores del contacto */
	--cv-chip-line: rgba(32, 30, 29, 0.3);  /* borde de los programas */

	/* TIPOGRAFIA Y TAMANYOS
	   Unbounded es de cartel y ocupa bastante: los tamanyos estan
	   medidos para que todo quepa en un A4 y ningun puesto se parta.
	   OJO: si cambias --fs-nombre, hay que rehacer el dibujo del
	   contorno de "Reina" (ver el bloque "Aspecto del PDF"). */
	--cv-font: 'Unbounded', sans-serif;
	--fs-nombre: 46px;
	--fs-puesto-cabecera: 11px; /* "FX ARTIST" */
	--fs-resumen: 11px;
	--fs-etiqueta: 7.5px;       /* PHONE, EMAIL, WEB, BASED IN */
	--fs-contacto: 10px;
	--fs-titulo: 9.5px;         /* WORK EXPERIENCE, EDUCATION... */
	--fs-puesto: 10.5px;
	--fs-fecha: 8px;
	--fs-empresa: 10px;
	--fs-proyectos: 9.5px;
	--fs-programa: 9px;         /* los recuadros de software */
	--fs-anyos: 8.5px;
	--fs-estudio: 10.5px;
	--fs-centro: 9px;
	--fs-adicional: 10px;

	/* Grosores finos: el resumen y los proyectos van en Light (300).
	   En 400 se veian muy negritas y en 200 casi no se veian. */
	--fw-resumen: 300;
	--fw-proyectos: 300;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 794px;
	max-width: 100%;
	min-height: 1123px;
	margin: 0 auto;
	/* Margenes de la hoja. Los laterales son 72 (el diseno traia 84)
	   para que los puestos largos quepan en una sola linea. */
	padding: 76px 72px 72px;
	background: var(--cv-bg);
	color: var(--cv-ink);
	font-family: var(--cv-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	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 de la web da margenes, tamanyos y colores (titulos en
   blanco incluso) a estas etiquetas. Aqui se anulan dentro de la
   hoja, para que se vea igual dentro y fuera de la web. */
.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;
	font-weight: 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: nombre, puesto, resumen y foto --------------------- */

.cv-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 138px;
	gap: 26px;
	align-items: start;
	padding-bottom: 20px;
}

.cv-sheet .cv-name {
	font-size: var(--fs-nombre);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* "Reina" en hueco, como en la portada de la web: relleno del color
   del papel y contorno del color del texto. */
.cv-sheet .cv-name-outline {
	color: var(--cv-bg);
	-webkit-text-stroke: 1.7px var(--cv-ink);
	paint-order: stroke fill;
}

.cv-sheet .cv-role {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: var(--fs-puesto-cabecera);
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cv-accent);
}

/* La barrita azul delante de "FX Artist" */
.cv-sheet .cv-role::before {
	content: '';
	display: block;
	flex: none;
	width: 26px;
	height: 3px;
	background: var(--cv-accent-bar);
}

.cv-sheet .cv-summary {
	margin-top: 14px;
	font-size: var(--fs-resumen);
	font-weight: var(--fw-resumen);
	line-height: 1.6;
	text-wrap: pretty;
}

.cv-sheet .cv-photo {
	width: 138px;
	height: 164px;
	object-fit: cover;
	object-position: 50% 18%;
}


/* --- Franja de contacto ------------------------------------------- */

.cv-contact-strip {
	border-top: 1px solid var(--cv-rule);
	border-bottom: 1px solid var(--cv-rule);
}

/* Los -14px hacen que el texto de la primera y la ultima celda quede
   alineado con el resto de la hoja. El hueco de 1px entre celdas deja
   ver el fondo y hace de separador. */
.cv-sheet .cv-contact {
	display: flex;
	gap: 1px;
	margin: 0 -14px;
	background: var(--cv-rule-cell);
}

.cv-sheet .cv-contact-item {
	flex: 1 1 auto;
	padding: 10px 14px;
	background: var(--cv-bg);
}

.cv-sheet .cv-label {
	display: block;
	font-size: var(--fs-etiqueta);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cv-soft);
}

.cv-sheet .cv-value {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-contacto);
	font-weight: 600;
}

.cv-sheet .cv-link {
	color: var(--cv-accent);
}


/* --- Cuerpo en dos columnas --------------------------------------- */

/* La columna de la derecha mide 218px (el diseno traia 232) para que
   los puestos largos quepan en una linea. */
.cv-body {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 218px;
	padding-top: 34px;
}

.cv-work {
	display: flex;
	flex-direction: column;
	padding-right: 24px;
}

/* COLUMNA DERECHA A LA MISMA ALTURA QUE LA IZQUIERDA
   Todo lo de esta columna (titulos, programas, cada estudio y cada
   dato adicional) se coloca como una sola lista, y el alto que sobra
   se reparte solo, asi acaba abajo a la vez que la experiencia:
     - encima de EDUCATION y de ADDITIONAL INFO: 2 partes cada uno
       (son los huecos que separan secciones, los que mas respiran)
     - entre estudio y estudio: 1 parte cada uno
     - entre los datos de Additional Info: nada, van juntos (8px)
   Minimos: 14px hasta la linea de cada seccion y 9px entre estudios. */
.cv-aside {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--cv-rule);
	padding-left: 24px;
}

.cv-aside section,
.cv-aside .cv-studies,
.cv-aside .cv-extras {
	display: contents;
}

/* Lo ultimo de cada seccion: 14px minimo hasta la linea, y una parte
   del hueco que sobra */
.cv-aside .cv-skills,
.cv-aside .cv-study:last-child {
	padding-bottom: 14px;
	margin-bottom: auto;
}

/* La linea que separa las secciones va encima de su titulo, y otra
   parte del hueco que sobra justo encima de la linea */
.cv-education .cv-title,
.cv-extra .cv-title {
	margin-top: auto;
	border-top: 1px solid var(--cv-rule);
	padding-top: 12px;
}

.cv-aside .cv-study + .cv-study {
	padding-top: 9px;
	margin-top: auto;
}

.cv-aside .cv-extras li + li {
	margin-top: 8px;
}

/* OJO con letter-spacing (separacion entre letras): en pantalla da
   aire a los titulos, pero en el PDF queda anulado (ver el bloque
   "Aspecto del PDF"). 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: 12px;
	font-size: var(--fs-titulo);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cv-aside .cv-title {
	margin-bottom: 13px;
}


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

/* Los trabajos se reparten el alto que sobra, para que las dos
   columnas terminen a la misma altura. El hueco entre trabajos
   nunca baja de 11px. */
.cv-sheet .cv-jobs {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 11px;
}

.cv-sheet .cv-job {
	border-top: 1px solid var(--cv-rule-soft);
	padding-top: 10px;
}

/* Puesto a la izquierda y fechas a la derecha, en la misma linea.
   Si algun dia escribes un puesto tan largo que no quepa junto a las
   fechas, estas bajan solas a la linea siguiente y el puesto se queda
   entero: nunca se parte en dos. */
.cv-job-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 2px;
}

.cv-sheet .cv-job-role {
	font-size: var(--fs-puesto);
	line-height: 1.5;
	font-weight: 800;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.cv-sheet .cv-date {
	flex: none;
	font-size: var(--fs-fecha);
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cv-soft);
	text-align: right;
	white-space: nowrap;
}

/* Las tres lineas de cada trabajo (puesto+fechas, empresa, proyectos)
   van juntas y con el mismo hueco entre ellas, para que se lean como
   un bloque. El aire que sobra se reparte ENTRE trabajos, no dentro. */
.cv-sheet .cv-company {
	margin-top: 2px;
	font-size: var(--fs-empresa);
	font-weight: 500;
	color: var(--cv-company);
}

/* La ubicacion va en la misma linea que la empresa, como en LinkedIn,
   pero normal y gris clara para que no se lea como parte del nombre. */
.cv-sheet .cv-location {
	margin-left: 0.7em;
	font-weight: 400;
	color: var(--cv-place);
}

/* Los proyectos: cada peli (o la descripcion del trabajo) en su
   propia linea. Van en letra FINA y mas oscura que la ubicacion, para
   que no se confundan con "Barcelona, Spain": la ubicacion es normal
   y gris clara, los proyectos finos y oscuros. */
.cv-sheet .cv-projects {
	margin-top: 3px;
	font-size: var(--fs-proyectos);
	font-weight: var(--fw-proyectos);
	color: var(--cv-company);
}

.cv-sheet .cv-projects span {
	display: block;
}

.cv-sheet .cv-projects span + span {
	margin-top: 2px;
}


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

.cv-sheet .cv-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cv-sheet .cv-skill {
	padding: 4px 6px;
	border: 1px solid var(--cv-chip-line);
	font-size: var(--fs-programa);
	font-weight: 600;
	white-space: nowrap;
}

/* Los programas principales, rellenos en azul */
.cv-sheet .cv-skill-main {
	border-color: var(--cv-accent);
	background: var(--cv-accent);
	color: var(--cv-bg);
	font-weight: 800;
}


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

.cv-sheet .cv-years {
	font-size: var(--fs-anyos);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--cv-accent);
}

.cv-sheet .cv-degree {
	margin-top: 1px;
	font-size: var(--fs-estudio);
	line-height: 1.3;
	font-weight: 700;
}

.cv-sheet .cv-school {
	margin-top: 3px;
	font-size: var(--fs-centro);
	color: var(--cv-soft);
}


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

.cv-sheet .cv-extras {
	font-size: var(--fs-adicional);
	line-height: 1.4;
}


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

/* "body:not(.cv-pdf)": la vista previa del PDF lleva la clase cv-pdf
   y debe verse siempre como el A4, aunque el panel sea estrecho. */
@media screen and (max-width: 920px) {

	body:not(.cv-pdf) .cv-sheet {
		width: 100%;
		min-height: 0;
		padding: 30px 22px 40px;
		box-shadow: none;
	}

	/* Nombre en dos lineas y foto mas pequenya al lado */
	body:not(.cv-pdf) .cv-head {
		grid-template-columns: minmax(0, 1fr) 92px;
		gap: 18px;
		padding-bottom: 16px;
	}

	body:not(.cv-pdf) .cv-head-text {
		display: contents;
	}

	body:not(.cv-pdf) .cv-sheet .cv-name {
		grid-column: 1;
		font-size: 40px;
		line-height: 1.02;
		white-space: normal;
	}

	body:not(.cv-pdf) .cv-sheet .cv-photo {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 92px;
		height: 110px;
	}

	body:not(.cv-pdf) .cv-sheet .cv-role {
		grid-column: 1;
	}

	body:not(.cv-pdf) .cv-sheet .cv-summary {
		grid-column: 1 / -1;
		font-size: 13px;
	}

	/* El contacto conserva los mismos espaciados que en el A4 (cada
	   casilla con 10px arriba y abajo y 14px a los lados, y el -14px
	   que alinea el texto con el resto de la hoja). Lo unico que
	   cambia es que las casillas que no caben bajan a la fila de
	   abajo, y cada fila se reparte el ancho entre sus casillas. El
	   texto nunca se parte: el email se queda entero. */
	body:not(.cv-pdf) .cv-sheet .cv-contact {
		flex-wrap: wrap;
	}

	/* La linea entre filas sobresaldria 14px por cada lado (por el
	   -14px); asi mide lo mismo que las lineas de arriba y abajo. */
	body:not(.cv-pdf) .cv-contact-strip {
		overflow: hidden;
	}

	body:not(.cv-pdf) .cv-sheet .cv-value {
		font-size: 12px;
		white-space: nowrap;
	}

	body:not(.cv-pdf) .cv-body {
		grid-template-columns: 1fr;
		padding-top: 26px;
	}

	body:not(.cv-pdf) .cv-work {
		padding-right: 0;
	}

	body:not(.cv-pdf) .cv-aside {
		border-left: 0;
		padding-left: 0;
		margin-top: 26px;
	}

	/* En movil el puesto si puede partirse: aqui no lo lee ningun
	   formulario, y asi no se sale de la pantalla. */
	body:not(.cv-pdf) .cv-sheet .cv-job-role {
		font-size: 14px;
		white-space: normal;
	}

	body:not(.cv-pdf) .cv-sheet .cv-company,
	body:not(.cv-pdf) .cv-sheet .cv-extras {
		font-size: 12px;
	}

	body:not(.cv-pdf) .cv-sheet .cv-projects {
		font-size: 11.5px;
	}
}


/* --- Aspecto del PDF (clase cv-pdf) ----------------------------------- */
/* La usan el generador del PDF (D:\Claude\generar-cv.ps1) y la vista
   previa en vivo (localhost:8080/_vista-pdf), para que la pantalla
   muestre exactamente lo que saldra en el PDF. */

.cv-pdf .cv-sheet {
	box-shadow: none;
	font-synthesis: none;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "clig" 0;
}

.cv-pdf .cv-sheet,
.cv-pdf .cv-sheet * {
	letter-spacing: 0 !important;
}

/* "Reina" en hueco TAMBIEN en el PDF, con un truco: al imprimir, las
   letras con contorno (-webkit-text-stroke) salen como dibujos (Type3)
   y los formularios de empleo no las leen: perderiamos el apellido.
   Por eso aqui el contorno es un dibujo aparte
   (images/cv/reina-contorno-unbounded.svg) puesto de fondo detras de
   la palabra, y encima va "Reina" como texto normal del color del
   papel, que tapa la mitad interior del trazo. Se ve igual que en
   pantalla y el formulario lee el apellido como texto.
   OJO: el dibujo esta hecho para Unbounded ExtraBold (800) a 46px y
   sin separacion entre letras. Si cambias el tamanyo o el grosor del
   nombre, hay que rehacerlo. */
.cv-pdf .cv-sheet .cv-name-outline {
	-webkit-text-stroke: 0;
	color: var(--cv-bg);
	background: url(../images/cv/reina-contorno-unbounded.svg) no-repeat 0 0 / 100% 100%;
}


/* --- Impresion (Ctrl+P desde la web) --------------------------------- */

@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;
	}

	/* CERO separacion entre letras, como en el PDF */
	.cv-sheet,
	.cv-sheet * {
		letter-spacing: 0 !important;
	}

	/* "Reina" en hueco con el mismo truco que en el PDF */
	.cv-sheet .cv-name-outline {
		-webkit-text-stroke: 0;
		color: var(--cv-bg);
		background: url(../images/cv/reina-contorno-unbounded.svg) no-repeat 0 0 / 100% 100%;
	}
}