/* ==========================================================================
   Hoolistic Web Toolkit · Portfolio
   Dos columnas en zigzag medidas en «unidades» (--u = 1/6 del ancho de columna):
   - cada tarjeta mide 4u de alto (≈ 3:2) y cada proyecto avanza --hwt-pf-step
     (4,5u por defecto; con menos de 4u las columnas se solapan);
   - el hueco que queda al lado de cada tarjeta lleva su título y descripción.
   ========================================================================== */

@font-face{font-family:"HWT Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-mono-400-latin.woff2") format("woff2")}

.hwt-pf{
	--hwt-pf-ink:#1d1b20;
	--hwt-pf-ink-2:#6b6870;
	--hwt-pf-bg:#f5f5f5;
	--hwt-pf-gap:clamp(24px,4vw,64px);
	--hwt-pf-radius:14px;
	--hwt-pf-step:4.5;
	--hwt-pf-mono:"HWT Mono",ui-monospace,Menlo,monospace;
	container-type:inline-size;
	color:var(--hwt-pf-ink);
}
.hwt-pf *{box-sizing:border-box}

/* Unidades (dentro del contenedor, para usar cqw). */
.hwt-pf__list{
	--hwt-pf-col:calc((100cqw - var(--hwt-pf-gap)) / 2);
	--u:calc(var(--hwt-pf-col) / 6);
	--hwt-pf-inset:calc(var(--u) * max(0, 4 - var(--hwt-pf-step)));
	list-style:none;margin:0;padding:0 0 var(--hwt-pf-inset) 0;
}
.hwt-pf__item{position:relative;margin:0;padding:0;height:calc(var(--u) * var(--hwt-pf-step))}
.hwt-pf__item::before,.hwt-pf__item::marker{content:none}
.hwt-pf__project{position:absolute;inset:0}

/* Tarjeta */
.hwt-pf__card{
	position:absolute;top:0;z-index:2;display:block;
	width:var(--hwt-pf-col);height:calc(var(--u) * 4);
	text-decoration:none;color:inherit;
}
.hwt-pf__media{
	display:block;width:100%;height:100%;overflow:hidden;border-radius:var(--hwt-pf-radius);background:#d8d4cf;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hwt-pf__media img,.hwt-pf__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hwt-pf__noimg{display:block;width:100%;height:100%;background:#d8d4cf}
.hwt-pf__card:hover .hwt-pf__media{transform:scale(.97)}
.hwt-pf__card:hover .hwt-pf__img{transform:scale(1.04)}

/* Hueco con el título y la descripción */
.hwt-pf__info{
	position:absolute;z-index:2;display:flex;align-items:var(--hwt-pf-valign,center);
	width:var(--hwt-pf-col);
	top:var(--hwt-pf-inset);
	height:calc(var(--u) * 4 - 2 * var(--hwt-pf-inset));
}
.hwt-pf__info-in{
	display:grid;gap:10px;max-width:var(--hwt-pf-text-w,30rem);
	padding:22px 26px;background:var(--hwt-pf-bg);border-radius:6px;
}
.hwt-pf__item--left .hwt-pf__card{left:0}
.hwt-pf__item--left .hwt-pf__info{right:0}
.hwt-pf__item--right .hwt-pf__card{right:0}
.hwt-pf__item--right .hwt-pf__info{left:0}
/* Posición horizontal del texto en el hueco: junto a la foto (por defecto), centrado o hacia el borde. */
.hwt-pf--h-near .hwt-pf__item--left .hwt-pf__info,.hwt-pf--h-far .hwt-pf__item--right .hwt-pf__info{justify-content:flex-start}
.hwt-pf--h-near .hwt-pf__item--right .hwt-pf__info,.hwt-pf--h-far .hwt-pf__item--left .hwt-pf__info{justify-content:flex-end}
.hwt-pf--h-center .hwt-pf__info{justify-content:center}
.hwt-pf__info-in{text-align:var(--hwt-pf-talign,left)}
.hwt-pf__info-in .hwt-pf__more{justify-self:var(--hwt-pf-tjustify,start)}

.hwt-pf__services{margin:0;font-family:var(--hwt-pf-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hwt-pf-ink-2)}
.hwt-pf .hwt-pf__name{margin:0;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.1;font-weight:700;color:var(--hwt-pf-ink)}
.hwt-pf__name a{color:inherit;text-decoration:none}
.hwt-pf__name a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.hwt-pf__name a:focus-visible{outline:2px solid var(--hwt-pf-ink);outline-offset:4px}
.hwt-pf__excerpt{margin:0;font-size:1rem;line-height:1.55;color:var(--hwt-pf-ink)}
.hwt-pf__more{justify-self:start;font-family:var(--hwt-pf-mono);font-size:.78rem;color:var(--hwt-pf-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

/* Aparición al entrar en pantalla (solo si hay JS) */
.hwt-pf--js .hwt-pf__card{opacity:0;transform:translateY(48px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hwt-pf--js .hwt-pf__info-in{opacity:0;transform:translateY(20px);transition:opacity .7s ease .15s,transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.hwt-pf--js .is-in .hwt-pf__card,.hwt-pf--js .is-in .hwt-pf__info-in{opacity:1;transform:none}

/* Elemento anterior fijado (título y texto de la sección, fuera del widget) */
@media (min-width:861px){
	.hwt-pf-pinned{position:sticky !important;top:var(--hwt-pf-top,140px);z-index:1}
	.hwt-pf-above{position:relative;z-index:2}
}

/* Modo oscuro del tema (Osty: <body data-theme="dark">) */
body[data-theme="dark"] .hwt-pf,html[data-theme="dark"] .hwt-pf{
	--hwt-pf-ink:var(--color-contrast-higher,#f5f5f5);
	--hwt-pf-ink-2:var(--color-contrast-medium,#929292);
	--hwt-pf-bg:var(--color-bg,#242323);
}

/* Móvil: una columna, título y descripción bajo cada tarjeta */
@media (max-width:860px){
	.hwt-pf__list{padding:0}
	.hwt-pf__item{height:auto;margin-bottom:48px}
	.hwt-pf__project{position:static}
	.hwt-pf__card{position:static;width:100%;height:auto;aspect-ratio:3/2}
	.hwt-pf__info,.hwt-pf__item--right .hwt-pf__info{position:static;width:auto;height:auto;justify-content:flex-start}
	.hwt-pf__info-in{padding:16px 0 0;background:none;max-width:none}
}

@media (prefers-reduced-motion:reduce){
	.hwt-pf--js .hwt-pf__card,.hwt-pf--js .hwt-pf__info-in{opacity:1;transform:none;transition:none}
	.hwt-pf__media,.hwt-pf__img{transition:none}
}

.hwt-pf-empty{padding:24px;border:1px dashed #b5b3b0;font-family:var(--hwt-pf-mono);font-size:.8rem;color:#6b6870;text-align:center}