@charset "UTF-8";

/* Reset y bases */

* { margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --header-h: 70px;          /* altura header (desktop por defecto) */
  --pad-x: 12px;             /* padding horizontal del header */
  --bg-default: #fff;
  --hdrfg-default: #000;
}

html { scroll-padding-top: var(--header-h); }

html, body 		{
				margin: 0;
				padding: 0;
				font-family: 'Futura Std', sans-serif;
				font-weight: 500;
				font-size: 35px;
				letter-spacing: 0.75px;
				word-spacing: -0.5px;
				-webkit-font-smoothing: antialiased;
				scroll-behavior: smooth;
				color: #000;
				max-width: 100%;
				overflow-x: hidden;
				font-synthesis: none;
				}

body 			{ margin: 1px; }

a 				{
				text-decoration: none;
				color: inherit;
				display: inline-block;
				}

.vanish 		{
				opacity: 1;
				transition: opacity .25s ease-in-out;
				text-decoration: none;
				}

.vanish:hover 	{ opacity: .5; }



/*  Grid principal */
   
.parent 		{
				display: grid;
				grid-template-columns: repeat(8, 1fr);
				grid-column-gap: 1px;
				grid-row-gap: 0;
				padding-top: var(--header-h); /* empuja el contenido bajo el header fijo */
				}

.full       	{ grid-column: 1 / 9; }
.half-left  	{ grid-column: 1 / 5; }
.half-right 	{ grid-column: 5 / 9; }



/* Header fijo */

.site-header 	{
				position: fixed;
				top: 0; left: 0; right: 0;
				height: var(--header-h);
				z-index: 1000;
				background-color: var(--active-bg, var(--bg-default));
				color: var(--header-fg, var(--hdrfg-default));
				margin: 0 1px;
				transition: background-color .25s ease, color .25s ease;
				}

.site-header .wrap 	{
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 var(--pad-x);
					}

.site-header a, .site-header a:visited { color: inherit; }

.logo 			{ padding: 1px 0 0 13px; }



/* “Galán” -> “Carlos Galán Rubio” al hacer hover */

.nombre 		{
				--wipe: .45s;
				display: inline-grid;
				align-items: center;
				line-height: 1.15;
				padding: 0;
				}

.nombre .short, .nombre .long 	{
								grid-area: 1 / 1;
								white-space: nowrap;
								}

.nombre .long 					{
								clip-path: inset(0 100% 0 0);
								transition: clip-path var(--wipe) ease;
								}

.nombre .short 						{ transition: opacity .2s ease var(--wipe); }

.nombre:has(.short:hover) .short,
.nombre:has(.long:hover)  .short 	{ opacity: 0; transition-delay: 0s; }

.nombre:has(.short:hover) .long,
.nombre:has(.long:hover)  .long  	{ clip-path: inset(0 0 0 0); }

.nombre:is(:focus-visible) .short 	{ opacity: 0; transition-delay: 0s; }

.nombre:is(:focus-visible) .long  	{ clip-path: inset(0 0 0 0); }


@media (prefers-reduced-motion: reduce) 	{ .nombre .long, .nombre .short { transition: none; } }



/* Menu header */

.info 				{
					padding-top: 8px;
					list-style: none;
					margin-right: 5px;
					}

.info li 			{
					margin-left: 15px;
					float: left;
					}

.about, .contact 	{ font-style: normal; }

.about.is-active, .contact.is-active, .about:hover, .contact:hover { font-style: italic; }


/* Icono wset */
.wset { display: inline-block; transition: transform .8s ease-in-out; transform-origin: center; will-change: transform; }
.wset img { width: 48px; }
.wset:hover { animation: spinY 1.6s ease-in-out; }
@keyframes spinY { to { transform: rotateY(1turn); } }



/* Hover de los proyectos */

body 				{
					--active-bg: var(--bg-default);
					--header-fg: var(--hdrfg-default);
					background-color: var(--active-bg);
					transition: background-color .25s ease;
					}

/* Colores por proyecto */
body:has(.vinestar:hover){     --active-bg:#FAF9A2; --header-fg: var(--hdrfg-default); }
body:has(.lacontra:hover){     --active-bg:#71E47D; --header-fg:#000; }
body:has(.casaguell:hover){    --active-bg:#336EE6; --header-fg:#fff; }
body:has(.folls:hover){        --active-bg:#000;    --header-fg:#fff; }
body:has(.vt:hover){           --active-bg:#A8BC3E; --header-fg:#fff; }
body:has(.vinovell:hover){     --active-bg:#472FD5; --header-fg:#fff; }
body:has(.anna:hover){         --active-bg:#E4BCA3; --header-fg:#fff; }
body:has(.masdelserral:hover){ --active-bg:#499EA0; --header-fg:#000; }
body:has(.peperaventos:hover){ --active-bg:#8C4142; --header-fg:#fff; }
body:has(.garage:hover){       --active-bg:#FF0000; --header-fg:#fff; }
body:has(.danone:hover){       --active-bg:#223B6E; --header-fg:#fff; }
body:has(.bancsabadell:hover){ --active-bg:#1191D4; --header-fg:#fff; }
body:has(.heinz:hover){        --active-bg:#C62929; --header-fg:#fff; }
body:has(.puig:hover){         --active-bg:#000;    --header-fg:#fff; }
body:has(.balclis:hover){      --active-bg:#BC9A6E; --header-fg:#fff; }
body:has(.movistar:hover){     --active-bg:#009BF2; --header-fg:#fff; }
body:has(.bos:hover){          --active-bg:#10102E; --header-fg:#fff; }



/* About y contacto */

.portada, .perfil, .contacto, .portada-proyecto 	{
													display: flex;
													justify-content: center; /* horizontal */
													align-items: center;     /* vertical */
													height: auto;
													min-height: calc(90dvh - var(--header-h));
													padding-block: 16px;
													box-sizing: border-box;
													scroll-margin-top: var(--header-h);
													}

.portada p, .perfil p, .contacto p, .portada-proyecto { margin: 0 0 80px 0; text-align: center; }

.portada p 			{
					transform: none;
					font-size: 150px;
					padding-bottom: 100px;
					letter-spacing: -1px;
					}

.perfil p 			{
					width: 1075px;
					max-width: 70ch;
					font-size: 36px;
					}

.stack > span 		{
					display: block;
					line-height: 48px;
					font-size: 36px;
					letter-spacing: 1px;
					}

.salto 				{ margin-top: .85rem; }



@supports not (height: 100dvh) { .portada, .perfil, .contacto, .portada-proyecto { min-height: calc(100vh - var(--header-h)); } }



/* Proyectos */

.proyecto 			{
					position: relative;
					display: block;
					overflow: hidden;
					margin-bottom: 1px;
					cursor: default;
					}
.proyecto img,
.proyecto video 	{
					display: block;
					width: 100%;
					height: auto;
					}

.proyecto .overlay 	{
					position: absolute;
					top: 18px; left: 25px;
					display: flex;
					flex-direction: column;
					gap: .6em;
					max-width: 85%;
					text-align: left;
					color: #fff;
					line-height: 42px;
					letter-spacing: 1px;
					word-spacing: -1.5px;
					opacity: 0;
					transform: translateY(-2px);
					transition: opacity .28s ease, transform .28s ease;
					pointer-events: none;
					z-index: 1;
					}

.proyecto .overlay > span:nth-child(2) { font-style: italic; } /* Solo la segunda línea */
.proyecto .negro 	{ color: #000; }

.proyecto:hover .overlay { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) { .proyecto .overlay { transition: none; transform: none; } }



/* Footer */

.footer 			{
					height: 55px;
					padding: 12px 0 0 25px;
					background-color: #fff;
					align-items: center;
					justify-content: space-between;
					}

/* Que no se corten las itálicas en los links del header */
:root { --italic-overhang: .18em; }

.about, .contact 	{
					padding-right: var(--italic-overhang);  
					overflow: visible;                   
					}


/* Responsive */

@media (max-width: 1280px) {
	
:root { --pad-x: 12px; }
	
.site-header 		{ height: var(--header-h); }
	
.portada p 			{
					  padding-bottom: 60px;
					}
	
.proyecto .overlay 	{
					  top: 16px; left: 22px;
					  line-height: 38px;
					  gap: .5em;
					}

.perfil p 			{
					  width: 85%;
					}
	
}


@media (max-width: 1024px) {
	
:root {
  --header-h: 65px;          /* altura header (desktop por defecto) */
  --pad-x: 12px;             /* padding horizontal del header */
}
	
html, body 					{ font-size: 32px; }

.half-left, .half-right 	{ grid-column: 1 / 9; }

.site-header .wrap 			{ padding: 0 0px; }
.info 						{ margin-right: 15px; padding-top: 6px; }
.logo 						{ padding: 1px 0 0 18px; }
.info li 					{ margin-left: 16px; }
	
.wset img 					{ width: 42px; }
	

.portada p 					{
							  font-size: clamp(72px, 12vw, 96px);
							  padding-bottom: 48px;
							}

.perfil p, .contacto p 		{ width: 80%; }
	
.stack > span 				{
							  font-size: 32px;
							  line-height: 42px;
							}

.proyecto .overlay 			{
							  line-height: 34px;
							  max-width: 88%;
							}
	
.footer 					{
							  height: 55px;
							  padding: 14px 0 0 18px;
							}
	
}


@media (max-width: 768px) {
		
html, body 					{ font-size: 28px; }

:root { --header-h: 60px; }
.site-header { height: var(--header-h); }

.footer 					{
							  height: 48px;
							  padding: 14px 0 0 18px;
							}

.portada, .perfil, .contacto, .portada-proyecto { min-height: calc(100dvh - var(--header-h)); }

.portada p 					{
							  font-size: clamp(52px, 13vw, 72px);
							  padding-bottom: 36px;
							}

.stack > span 				{
							  font-size: 28px;
							  line-height: 38px;
							  letter-spacing: 1px;
						  	}

.proyecto .overlay 			{
							  top: 14px;
							  left: 16px;
							  line-height: 30px;
							  max-width: 88%;
						  	}

.wset img 					{ width: 36px; }
	


}


@media (max-width: 550px) 	{
	
html, body 					{ font-size: 25px; }
	
:root { --header-h: 50px; }
.site-header { height: var(--header-h); }
	
.nombre .long--full   		{ display: none; }
.nombre .long--mobile 		{ display: block; }

.logo 						{ padding-left: 14px; }
.info 						{ padding-top: 6px; margin-right: 10px; }
.info li 					{ margin-left: 8px; }

.portada, .perfil, .contacto, .portada-proyecto { min-height: calc(90dvh - var(--header-h)); }
.portada p, .perfil p, .contacto p, .portada-proyecto { margin: 0; text-align: center; }

.portada p 					{
							  font-size: 56px;
							  padding-bottom: 28px;
							  letter-spacing: 0px;
						  	}

.perfil p, .contacto p 		{
							  width: 92vw;
							}
	
.stack > span 				{
							  font-size: 22px;
							  line-height: 28px;
							  letter-spacing: .5px;
							}

.proyecto .overlay 			{
							  font-size: 22px;
							  top: 10px; left: 14px;
							  gap: .35em;
							  line-height: 28px;
							  max-width: 90%;
							  letter-spacing: .75px;
						 	}
	
.proyecto .overlay > span:nth-child(1) { font-size: 1em; }
.proyecto .overlay > span:nth-child(2) { font-size: .95em; }

.wset img 					{ width: 33px; }
	
.footer 					{
							  height: 45px;
							  padding: 12px 0 0 14px;
							}
	

@media (hover: none), (max-width: 550px) {
	
  /* Oculta el largo y fuerza visible el corto */
  .nombre .long  			{ display: none !important; }
  .nombre .short 			{ opacity: 1 !important; }

  .nombre:has(.short:hover) .short,
  .nombre:has(.long:hover)  .short,
  .nombre:is(:focus-visible) .short { opacity: 1 !important; }

  .nombre:has(.short:hover) .long,
  .nombre:has(.long:hover)  .long,
  .nombre:is(:focus-visible) .long  { clip-path: inset(0 100% 0 0) !important; }
}
}