/*
 * HAMS Brand Studio — sistema visual
 * Concepto "Secuencia": la página se compone como una línea de edición.
 * Azul = lo planeado. Lima = lo ejecutado. Tinta y bruma son las bases.
 * La paleta se define en theme.json; aquí solo se leen sus variables.
 */

/* ---------- 1. Tokens ---------- */
:root {
	--hams-tinta: var(--wp--preset--color--tinta, #0a0c12);
	--hams-carbon: var(--wp--preset--color--carbon, #141823);
	--hams-bruma: var(--wp--preset--color--bruma, #eceef3);
	--hams-blanco: var(--wp--preset--color--blanco, #fbfbfd);
	--hams-azul: var(--wp--preset--color--azul, #2b3aff);
	--hams-azul-claro: var(--wp--preset--color--azul-claro, #9ca6ff);
	--hams-lima: var(--wp--preset--color--lima, #d6ff3d);
	--hams-gris: var(--wp--preset--color--gris, #565d6e);
	--hams-gris-claro: var(--wp--preset--color--gris-claro, #a9afbd);

	--hams-font-display: var(--wp--preset--font-family--display, "Inter Display", "Inter", "Helvetica Neue", Arial, sans-serif);
	--hams-font-text: var(--wp--preset--font-family--texto, "Inter", "Helvetica Neue", Arial, sans-serif);

	--t-mega: clamp(2.25rem, 11.3vw, 3.5rem);
	--t-xl: clamp(2.25rem, 5.2vw, 4.75rem);
	--t-l: clamp(1.625rem, 3.1vw, 2.875rem);
	--t-m: clamp(1.25rem, 1.8vw, 1.625rem);
	--t-body: 1.0625rem;
	--t-s: 0.9375rem;
	--t-label: 0.75rem;

	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--max: 90rem;
	--col-gap: clamp(1rem, 2vw, 2rem);
	--sec-y: clamp(4rem, 8vw, 7.5rem);
	--radius: 6px;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--header-h: 4.25rem;
}

@media (min-width: 48em) {
	:root {
		--t-mega: clamp(3.5rem, 7.3vw, 7.5rem);
	}
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--hams-tinta);
	color: var(--hams-tinta);
	font-family: var(--hams-font-text);
	font-size: var(--t-body);
	line-height: 1.55;
	font-feature-settings: "ss01", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

.hams-main :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote),
.hams-section :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
}

.hams-main :where(ul, ol),
.hams-section :where(ul, ol) {
	padding: 0;
}

/* WordPress puede añadir márgenes entre bloques hermanos; aquí el espaciado lo decide cada componente. */
.hams-section,
.hams-section > *,
.hams-section :where(.wp-block-group) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

:where(.hams-main, .hams-footer, .hams-header) a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 2px solid var(--focus, var(--hams-azul));
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-skip {
	position: absolute;
	left: 1rem;
	top: -5rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--hams-lima);
	color: var(--hams-tinta);
	border-radius: var(--radius);
	font-weight: 500;
}

.hams-skip:focus {
	top: 1rem;
}

.screen-reader-text,
.hams-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 3. Tonos de sección ---------- */
.is-tinta,
.is-bruma,
.is-blanco,
.is-azul,
.is-lima {
	background: var(--bg);
	color: var(--fg);
}

.is-tinta {
	--bg: var(--hams-tinta);
	--fg: #f3f4f8;
	--muted: var(--hams-gris-claro);
	--line: rgba(255, 255, 255, 0.16);
	--mark: var(--hams-lima);
	--focus: var(--hams-lima);
	--btn-bg: var(--hams-lima);
	--btn-fg: var(--hams-tinta);
	--surface: var(--hams-carbon);
	--field: rgba(255, 255, 255, 0.46);
	--error: #ff9d8f;
}

.is-bruma,
.is-blanco {
	--fg: var(--hams-tinta);
	--muted: var(--hams-gris);
	--line: rgba(10, 12, 18, 0.16);
	--mark: var(--hams-azul);
	--focus: var(--hams-azul);
	--btn-bg: var(--hams-azul);
	--btn-fg: #fff;
	--field: rgba(10, 12, 18, 0.52);
	--error: #b3261e;
}

.is-bruma {
	--bg: var(--hams-bruma);
	--surface: var(--hams-blanco);
}

.is-blanco {
	--bg: var(--hams-blanco);
	--surface: var(--hams-bruma);
}

.is-azul {
	--bg: var(--hams-azul);
	--fg: #fff;
	--muted: rgba(255, 255, 255, 0.82);
	--line: rgba(255, 255, 255, 0.32);
	--mark: var(--hams-lima);
	--focus: var(--hams-lima);
	--btn-bg: var(--hams-lima);
	--btn-fg: var(--hams-tinta);
	--surface: rgba(255, 255, 255, 0.1);
	--field: rgba(255, 255, 255, 0.7);
	--error: #fff;
}

.is-lima {
	--bg: var(--hams-lima);
	--fg: var(--hams-tinta);
	--muted: #2c3110;
	--line: rgba(10, 12, 18, 0.25);
	--mark: var(--hams-tinta);
	--focus: var(--hams-tinta);
	--btn-bg: var(--hams-tinta);
	--btn-fg: #fff;
	--surface: rgba(10, 12, 18, 0.06);
	--field: rgba(10, 12, 18, 0.6);
	--error: #7a1610;
}

/* ---------- 4. Estructura ---------- */
.hams-main {
	display: block;
	background: var(--hams-blanco);
}

.hams-section {
	padding-block: var(--sec-y);
	position: relative;
}

.hams-section.is-compacta {
	padding-block: clamp(3rem, 6vw, 5rem);
}

.hams-wrap {
	width: min(100% - 2 * var(--gutter), var(--max));
	margin-inline: auto;
}

.hams-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.hams-grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Contenido libre escrito directamente en una página o entrada */
.hams-content > :where(:not(.hams-section):not(.alignfull):not(.hams-muro)) {
	width: min(100% - 2 * var(--gutter), 46rem);
	margin-inline: auto;
	margin-block: 1.5rem;
}

.hams-content > :where(h2, h3):where(:not(.hams-section)) {
	margin-top: 3rem;
}

.hams-content > :where(ul, ol):where(:not(.hams-section)) {
	padding-left: 1.25rem;
}

.hams-content > :where(:not(.hams-section)):first-child {
	margin-top: var(--sec-y);
}

.hams-content > :where(:not(.hams-section)):last-child {
	margin-bottom: var(--sec-y);
}

/* ---------- 5. Tipografía ---------- */
.hams-mega,
.hams-xl,
.hams-l,
.hams-statement {
	font-family: var(--hams-font-display);
	font-weight: 500;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.hams-mega {
	font-size: var(--t-mega);
	line-height: 0.94;
	letter-spacing: -0.045em;
}

.hams-xl {
	font-size: var(--t-xl);
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.hams-l {
	font-size: var(--t-l);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.hams-statement {
	font-size: var(--t-l);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -0.028em;
	text-wrap: pretty;
}

.hams-statement + .hams-statement {
	margin-top: 1.25em;
}

.hams-m {
	font-family: var(--hams-font-display);
	font-size: var(--t-m);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.hams-lead {
	font-size: clamp(1.125rem, 1.45vw, 1.375rem);
	line-height: 1.45;
	letter-spacing: -0.01em;
	max-width: 36em;
	text-wrap: pretty;
}

.hams-muted {
	color: var(--muted);
}

.hams-label {
	font-family: var(--hams-font-text);
	font-size: var(--t-label);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

/* Énfasis: el texto en cursiva dentro de un titular toma el color de marca */
.hams-mega em,
.hams-xl em,
.hams-l em,
.hams-statement em {
	font-style: normal;
	color: var(--mark);
}

.hams-prosa > * + * {
	margin-top: 1.1em;
}

.hams-prosa {
	max-width: 40em;
}

/* ---------- 6. Botones y enlaces ---------- */
.wp-block-buttons.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.wp-block-button.wp-block-button {
	margin: 0;
}

.wp-block-button > .wp-block-button__link,
a.hams-btn,
.hams-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	min-height: 3.25rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid var(--btn-bg, var(--hams-azul));
	border-radius: var(--radius);
	background: var(--btn-bg, var(--hams-azul));
	color: var(--btn-fg, #fff);
	font-family: var(--hams-font-text);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.wp-block-button > .wp-block-button__link::after,
.hams-btn::after,
.hams-link a::after {
	content: "\2192";
	display: inline-block;
	transition: transform 0.3s var(--ease);
}

.wp-block-button > .wp-block-button__link:hover,
.hams-btn:hover {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
}

.wp-block-button > .wp-block-button__link:hover::after,
.hams-btn:hover::after,
.hams-link a:hover::after {
	transform: translateX(0.3em);
}

.wp-block-button.is-style-hams-secundario > .wp-block-button__link,
.hams-btn--sec {
	background: transparent;
	border-color: var(--field, var(--line));
	color: var(--fg);
}

.wp-block-button.is-style-hams-secundario > .wp-block-button__link:hover,
.hams-btn--sec:hover {
	background: transparent;
	border-color: var(--fg);
	color: var(--fg);
}

.hams-link a {
	display: inline-flex;
	gap: 0.6em;
	align-items: baseline;
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 0.2em;
	transition: background-size 0.35s var(--ease);
}

.hams-link a:hover {
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* ---------- 7. Cabecera ---------- */
.hams-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	border-bottom: 1px solid var(--line);
	transition: transform 0.35s var(--ease);
}

.hams-header.is-oculta:not(:focus-within) {
	transform: translateY(-101%);
}

.hams-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--header-h);
	width: min(100% - 2 * var(--gutter), var(--max));
	margin-inline: auto;
}

a.hams-logo,
.hams-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	text-decoration: none;
	white-space: nowrap;
}

.hams-logo img {
	max-height: 2rem;
	width: auto;
}

.hams-logo__mark {
	font-family: var(--hams-font-display);
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.hams-logo__mark::after {
	content: "";
	display: inline-block;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.14em;
	background: var(--hams-lima);
}

.hams-logo__sub {
	font-size: var(--t-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.hams-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
}

.hams-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hams-menu li {
	position: relative;
}

.hams-menu a {
	display: inline-block;
	padding-block: 0.5rem;
	font-size: var(--t-s);
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(var(--hams-lima), var(--hams-lima)) 0 100% / 0 2px no-repeat;
	transition: background-size 0.3s var(--ease);
}

.hams-menu a:hover,
.hams-menu .current-menu-item > a,
.hams-menu .current-menu-ancestor > a,
.hams-menu .current-menu-parent > a {
	background-size: 100% 2px;
}

.hams-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1.25rem;
	min-width: 15rem;
	margin: 0;
	padding: 0.75rem 1.25rem 1rem;
	list-style: none;
	background: var(--hams-carbon);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.hams-menu li:hover > .sub-menu,
.hams-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hams-menu .sub-menu a {
	display: block;
	padding-block: 0.45rem;
}

.hams-menu--cta a,
.hams-menu--cta a:hover {
	padding: 0.6rem 1rem;
	border-radius: var(--radius);
	background: var(--hams-lima);
	color: var(--hams-tinta);
	transition: background-color 0.25s var(--ease);
}

.hams-menu--cta a:hover {
	background: #fff;
}

.hams-burger {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--t-s);
	font-weight: 500;
	cursor: pointer;
}

.hams-burger__ico {
	position: relative;
	width: 1.5rem;
	height: 0.625rem;
}

.hams-burger__ico::before,
.hams-burger__ico::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s var(--ease), top 0.3s var(--ease), bottom 0.3s var(--ease);
}

.hams-burger__ico::before {
	top: 0;
}

.hams-burger__ico::after {
	bottom: 0;
}

.hams-burger[aria-expanded="true"] .hams-burger__ico::before {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}

.hams-burger[aria-expanded="true"] .hams-burger__ico::after {
	bottom: calc(50% - 1px);
	transform: rotate(-45deg);
}

@media (max-width: 59.99em) {
	/* Sin JavaScript el menú queda visible y apilado. Con JavaScript se convierte en panel. */
	.hams-header__in {
		flex-wrap: wrap;
	}

	.hams-nav {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		padding-bottom: 1.25rem;
	}

	.hams-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		width: 100%;
	}

	.hams-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0.5rem 1rem;
		background: none;
		border: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.js .hams-burger {
		display: inline-flex;
	}

	.js .hams-nav {
		position: fixed;
		inset: var(--header-h) 0 0 0;
		z-index: 49;
		display: flex;
		gap: 2rem;
		padding: 2rem var(--gutter) 3rem;
		background: var(--hams-tinta);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s var(--ease), visibility 0.25s;
	}

	.js .hams-nav.is-abierto {
		visibility: visible;
		opacity: 1;
	}

	.js .hams-menu:not(.hams-menu--cta) > li > a {
		font-family: var(--hams-font-display);
		font-size: clamp(2rem, 9vw, 3rem);
		letter-spacing: -0.035em;
		line-height: 1.1;
		padding-block: 0.3rem;
	}

	.js .hams-menu .sub-menu a {
		font-size: 1.125rem;
		color: var(--muted);
	}

	.js .hams-menu--cta a {
		padding: 1rem 1.4rem;
		font-size: 1rem;
	}

	.hams-logo__sub {
		display: none;
	}
}

.hams-bloqueado {
	overflow: hidden;
}

/* ---------- 8. Portada ---------- */
.hams-hero {
	padding-block: clamp(2rem, 4vw, 3.5rem) 0;
	overflow: clip;
}

.hams-hero__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-bottom: clamp(1.5rem, 3.5vw, 3rem);
}

/* La parte en cursiva del titular ocupa su propia línea y rota entre las frases de la lista */
.hams-hero .hams-mega em {
	display: block;
	min-height: 1.88em;
}

@media (min-width: 48em) {
	.hams-hero .hams-mega em {
		min-height: 0.94em;
	}
}

.hams-hero .hams-mega em > span {
	display: inline-block;
}

.hams-rota {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.hams-hero__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: end;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 60em) {
	.hams-hero__row {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}

	.hams-hero__row > .wp-block-buttons {
		justify-content: flex-end;
	}
}

.hams-hero .hams-muro {
	margin-top: clamp(1rem, 2vw, 2rem);
}

@media (prefers-reduced-motion: no-preference) {
	.hams-hero .hams-mega em > span.is-entra {
		animation: hams-rota 0.6s var(--ease) both;
	}
}

@keyframes hams-rota {
	from {
		opacity: 0;
		transform: translateY(0.45em) rotate(2deg);
	}
}

/* ---------- 9. Muro de trabajo y escenas de proyecto ----------
 * El muro reúne las portadas de los proyectos en tres columnas que se desplazan
 * y se enderezan al hacer scroll. Sin JavaScript queda quieto y completo. */
.hams-muro {
	--sy: 0;
	--g: clamp(0.75rem, 1.6vw, 1.5rem);
	position: relative;
	height: clamp(19rem, 44vw, 40rem);
	margin: 0;
	overflow: hidden;
	perspective: 1600px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 100%);
}

.hams-muro__plano {
	position: absolute;
	inset: -34% -7%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--g);
	transform: rotateX(calc(28deg - var(--sy) * 24deg)) rotateZ(calc(-11deg + var(--sy) * 9deg)) scale(calc(1.14 - var(--sy) * 0.1));
	will-change: transform;
}

.hams-muro__col {
	display: flex;
	flex-direction: column;
	gap: var(--g);
}

.hams-muro__col:nth-child(2) {
	margin-top: -18%;
}

.hams-muro__t {
	position: relative;
	flex: none;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background: var(--hams-carbon);
	box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.8);
}

.hams-muro__t img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 9b. Video de portada ----------
 * El HTML trae solo la imagen de respaldo; hams.js carga el video y lo reproduce sin sonido.
 * "completo": el marco toma la proporción del video, así que nunca se recorta.
 * "llenar" y la disposición "fondo" recortan alrededor del punto elegido (--fx, --fy). */
.hams-video {
	--ar: var(--ar-d, 16 / 9);
	--arn: var(--arn-d, 1.7778);
	--alto-max: min(82vh, 46rem);
	--alto-max: min(82svh, 46rem);
	width: min(100% - 2 * var(--gutter), var(--max));
	margin: clamp(1rem, 2vw, 2rem) auto 0;
}

@media (max-width: 47.99em) {
	.hams-video[data-movil] {
		--ar: var(--ar-m);
		--arn: var(--arn-m);
	}
}

.hams-video__marco {
	position: relative;
	width: min(100%, calc(var(--alto-max) * var(--arn)));
	margin-inline: auto;
	overflow: hidden;
	aspect-ratio: var(--ar);
	border-radius: var(--radius);
	background: var(--hams-carbon);
}

.hams-video__poster,
.hams-video video,
.hams-video canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: var(--fx, 50%) var(--fy, 50%);
}

.hams-video video,
.hams-video canvas {
	opacity: 0;
	transition: opacity 0.8s var(--ease);
}

.hams-video.is-video video,
.hams-video.is-video canvas,
.hams-video--sin-respaldo video {
	opacity: 1;
}

.hams-video[data-ajuste="llenar"] .hams-video__marco {
	width: 100%;
	aspect-ratio: 1 / 1;
}

.hams-video[data-ajuste="llenar"][data-movil] .hams-video__marco {
	aspect-ratio: 4 / 5;
}

.hams-video[data-ajuste="llenar"] :is(.hams-video__poster, video, canvas) {
	object-fit: cover;
}

@media (min-width: 48em) {
	.hams-video[data-ajuste="llenar"] .hams-video__marco,
	.hams-video[data-ajuste="llenar"][data-movil] .hams-video__marco {
		max-height: var(--alto-max);
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 64em) {
	.hams-video[data-ajuste="llenar"] .hams-video__marco,
	.hams-video[data-ajuste="llenar"][data-movil] .hams-video__marco {
		aspect-ratio: 21 / 9;
	}
}

/* Botón de pausa: fondo propio para que se lea sobre cualquier fotograma. */
.hams-video__pausa {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 1px solid rgba(251, 251, 253, 0.28);
	border-radius: 99px;
	background: rgba(10, 12, 18, 0.82);
	color: var(--hams-blanco);
	font: 500 var(--t-label) / 1 var(--hams-font-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.hams-video__pausa[hidden] {
	display: none;
}

.hams-video__pausa:hover {
	background: var(--hams-tinta);
}

.hams-video__pausa:focus-visible {
	outline: 2px solid var(--hams-lima);
	outline-offset: 3px;
}

.hams-video__ico {
	flex: none;
	width: 0.625rem;
	height: 0.75rem;
	border-inline: 0.2rem solid currentColor;
}

.hams-video.is-pausado .hams-video__ico {
	width: 0;
	height: 0;
	border-block: 0.375rem solid transparent;
	border-inline: 0.625rem solid currentColor;
	border-right-width: 0;
}

@media (max-width: 47.99em) {
	.hams-video__pausa {
		justify-content: center;
		padding: 0;
	}

	.hams-video__txt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hams-video:not(.hams-video--sin-respaldo) video,
	.hams-video canvas,
	.hams-video__pausa {
		display: none;
	}
}

/* Disposición "lado": titular a la izquierda, video a la derecha (pantallas amplias). */
@media (min-width: 60em) {
	.hams-hero:has(> .hams-video[data-disposicion="lado"]) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--col-gap) clamp(2rem, 4vw, 4.5rem);
		align-items: center;
		padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
		padding-bottom: clamp(2rem, 4vw, 3.5rem);
	}

	.hams-hero:has(> .hams-video[data-disposicion="lado"]) > .hams-wrap,
	.hams-hero > .hams-video[data-disposicion="lado"] {
		width: 100%;
		margin: 0;
	}

	.hams-hero:has(> .hams-video[data-disposicion="lado"]) .hams-mega {
		font-size: clamp(3rem, 5.4vw, 5.75rem);
	}

	.hams-hero:has(> .hams-video[data-disposicion="lado"]) .hams-mega em {
		min-height: 1.88em;
	}

	.hams-hero:has(> .hams-video[data-disposicion="lado"]) .hams-hero__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.hams-hero:has(> .hams-video[data-disposicion="lado"]) .hams-hero__row > .wp-block-buttons {
		justify-content: flex-start;
	}

	.hams-video[data-disposicion="lado"] {
		--alto-max: min(78vh, 44rem);
		--alto-max: min(78svh, 44rem);
	}
}

/* Disposición "fondo": el video llena la portada y el texto va encima, sobre un velo que
 * garantiza el contraste con cualquier fotograma. En móvil solo se aplica si hay versión vertical;
 * si no, el video horizontal va completo debajo del texto para no recortarlo. */
/* Todo este bloque depende de :has(). Los navegadores que no lo admiten muestran el recurso debajo del texto. */
@supports selector(:has(*)) {
	@media (max-width: 47.99em) {
		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) {
			position: relative;
			isolation: isolate;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			min-height: min(100vh - var(--header-h), 54rem);
			min-height: min(100svh - var(--header-h), 54rem);
			/* Deja libre la esquina del botón de pausa. */
			padding-bottom: 4.5rem;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) > .hams-wrap {
			position: relative;
			/* Orden: imagen y velo (0–1), texto (2), botón de pausa (3). */
			z-index: 2;
			pointer-events: none;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) > .hams-wrap > * {
			pointer-events: auto;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) .hams-hero__top {
			/* Las dos etiquetas quedan a la izquierda, dentro de la zona más oscura del velo. */
			justify-content: flex-start;
			padding-bottom: clamp(1.25rem, 3vh, 2rem);
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) .hams-hero__row {
			grid-template-columns: minmax(0, 1fr);
			max-width: 40rem;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) .hams-hero__row > .wp-block-buttons {
			justify-content: flex-start;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) .hams-lead,
		.hams-hero:has(> .hams-video[data-disposicion="fondo"][data-movil]) .hams-label {
			color: var(--hams-blanco);
		}

		.hams-hero > .hams-video[data-disposicion="fondo"][data-movil] {
			position: absolute;
			inset: 0;
			width: 100%;
			margin: 0;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"][data-movil] .hams-video__marco {
			width: 100%;
			height: 100%;
			max-height: none;
			aspect-ratio: auto;
			border-radius: 0;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"][data-movil] :is(.hams-video__poster, video, canvas) {
			object-fit: cover;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"][data-movil] .hams-video__marco::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			background:
				linear-gradient(to top, rgba(10, 12, 18, 0.9) 0, rgba(10, 12, 18, 0.72) 45%, rgba(10, 12, 18, 0.6) 100%);
			pointer-events: none;
		}
	}

	@media (min-width: 48em) {
		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) {
			position: relative;
			isolation: isolate;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			min-height: min(100vh - var(--header-h), 54rem);
			min-height: min(100svh - var(--header-h), 54rem);
			padding-bottom: clamp(2rem, 4vw, 3.5rem);
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) > .hams-wrap {
			position: relative;
			/* Orden: imagen y velo (0–1), texto (2), botón de pausa (3). */
			z-index: 2;
			pointer-events: none;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) > .hams-wrap > * {
			pointer-events: auto;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-hero__top {
			/* Las dos etiquetas quedan a la izquierda, dentro de la zona más oscura del velo. */
			justify-content: flex-start;
			padding-bottom: clamp(1.25rem, 3vh, 2rem);
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-hero__row {
			grid-template-columns: minmax(0, 1fr);
			max-width: 40rem;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-hero__row > .wp-block-buttons {
			justify-content: flex-start;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-lead,
		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-label {
			color: var(--hams-blanco);
		}

		.hams-hero > .hams-video[data-disposicion="fondo"] {
			position: absolute;
			inset: 0;
			width: 100%;
			margin: 0;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"] .hams-video__marco {
			width: 100%;
			height: 100%;
			max-height: none;
			aspect-ratio: auto;
			border-radius: 0;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"] :is(.hams-video__poster, video, canvas) {
			object-fit: cover;
		}

		.hams-hero > .hams-video[data-disposicion="fondo"] .hams-video__marco::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			background:
				linear-gradient(to top, rgba(10, 12, 18, 0.9) 0, rgba(10, 12, 18, 0.72) 45%, rgba(10, 12, 18, 0.6) 100%);
			pointer-events: none;
		}

		.hams-hero:has(> .hams-video[data-disposicion="fondo"]) .hams-video__marco::after {
			background:
				linear-gradient(90deg, rgba(10, 12, 18, 0.9) 0, rgba(10, 12, 18, 0.74) min(46rem, 85%), rgba(10, 12, 18, 0.28) 100%),
				linear-gradient(to top, rgba(10, 12, 18, 0.55) 0, rgba(10, 12, 18, 0) 40%);
		}
	}

	/* "Órbita": la imagen de respaldo se encuadra como la animación (planeta arriba y a la derecha;
	 * centrado en móvil). El lado nocturno ya queda detrás del texto, así que el velo es más leve. */
	.hams-video--orbita {
		--fx: 50%;
		--fy: 0%;
	}

	@media (min-width: 48em) {
		.hams-video--orbita {
			--fx: 70%;
		}
	}

	/* En pantallas estrechas el velo va pegado al bloque de texto, no a la portada: así cubre el texto
	 * sea cual sea el alto de la pantalla. Con 0.58 de opacidad el blanco mantiene 4.5:1 incluso sobre
	 * la parte más clara del planeta. */
	.hams-hero > .hams-video.hams-video--orbita[data-disposicion="fondo"][data-movil] .hams-video__marco::after {
		background: none;
	}

	.hams-hero:has(> .hams-video--orbita[data-disposicion="fondo"]) > .hams-wrap::before {
		content: "";
		position: absolute;
		inset: -5.5rem -50vw -6rem;
		z-index: -1;
		background: linear-gradient(to top, rgba(10, 12, 18, 0.8) 0, rgba(10, 12, 18, 0.58) 30%, rgba(10, 12, 18, 0.58) 86%, rgba(10, 12, 18, 0) 100%);
		pointer-events: none;
	}

	/* En pantallas amplias el texto va a la izquierda, sobre el lado nocturno: el velo es lateral. */
	@media (min-width: 60em) {
		.hams-hero:has(> .hams-video--orbita[data-disposicion="fondo"]) > .hams-wrap::before {
			content: none;
		}

		.hams-hero > .hams-video.hams-video--orbita[data-disposicion="fondo"][data-movil] .hams-video__marco::after {
			background:
				linear-gradient(90deg, rgba(10, 12, 18, 0.82) 0, rgba(10, 12, 18, 0.66) min(40rem, 50%), rgba(10, 12, 18, 0) min(66rem, 80%)),
				linear-gradient(to top, rgba(10, 12, 18, 0.6) 0, rgba(10, 12, 18, 0) 28%);
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hams-muro.is-play .hams-muro__col {
		animation: hams-deriva 70s linear infinite;
	}

	.hams-muro.is-play .hams-muro__col:nth-child(2) {
		animation-duration: 90s;
		animation-direction: reverse;
	}

	.hams-muro.is-play .hams-muro__col:nth-child(3) {
		animation-duration: 56s;
	}

	.hams-muro.is-pausa .hams-muro__col {
		animation-play-state: paused;
	}
}

@keyframes hams-deriva {
	to {
		transform: translateY(calc(-50% - var(--g) / 2));
	}
}

/* Barra de ventana (marcos de evidencia y panel de alcance) */
.hams-win__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.35rem;
	height: 1.75rem;
	padding-inline: 0.7rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--hams-carbon);
}

.hams-win__bar i {
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.24);
}

.hams-win__t {
	margin-left: 0.45rem;
	overflow: hidden;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	line-height: 1.6;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hams-gris-claro);
}

.hams-win__url {
	flex: 0 1 55%;
	height: 0.7rem;
	margin-left: 0.6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.09);
}

/* Escenas: ilustraciones provisionales por tipo de trabajo. Todas las medidas dependen
 * del ancho de la escena, así que sirven igual en una tarjeta grande que en el muro. */
.hams-escena {
	--e-bg: var(--hams-azul);
	--e-ui: var(--hams-blanco);
	--e-ink: var(--hams-tinta);
	--e-ac: var(--hams-azul);
	--e-on: #fff;
	--e-ac2: var(--hams-lima);
	--e-soft: rgba(10, 12, 18, 0.1);
	--e-sombra: 0 3cqw 6cqw -2.5cqw rgba(10, 12, 18, 0.55);
	position: absolute;
	inset: 0;
	container-type: inline-size;
	overflow: hidden;
	background: var(--e-bg);
	color: var(--e-ink);
}

.hams-escena i,
.hams-escena b,
.hams-escena span {
	display: block;
	font-style: normal;
	font-weight: 500;
}

.hams-escena > * {
	transition: transform 0.7s var(--ease);
}

.e-win {
	position: absolute;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1.4cqw;
	background: var(--e-ui);
	box-shadow: var(--e-sombra);
}

.e-bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.7cqw;
	height: 3.4cqw;
	padding-inline: 1.6cqw;
	border-bottom: 1px solid var(--e-soft);
}

.e-bar i {
	width: 0.9cqw;
	height: 0.9cqw;
	border-radius: 50%;
	background: var(--e-soft);
}

.e-bar b {
	flex: 0 1 45%;
	height: 1.3cqw;
	margin-left: 1.2cqw;
	border-radius: 99px;
	background: var(--e-soft);
}

.e-pag {
	display: grid;
	flex: 1;
	gap: 2.4cqw;
	min-height: 0;
	padding: 2.4cqw;
}

.e-l {
	flex: none;
	width: calc(var(--w, 80) * 1%);
	height: 1.5cqw;
	border-radius: 99px;
	background: currentColor;
}

.e-l--f {
	height: 0.8cqw;
	opacity: 0.35;
}

.hams-escena .e-btn {
	align-self: flex-start;
	min-width: 6cqw;
	min-height: 3.6cqw;
	padding: 1.2cqw 2.6cqw;
	border-radius: 0.8cqw;
	background: var(--e-ac);
	color: var(--e-on);
	font-size: 1.7cqw;
	line-height: 1;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.e-tel {
	position: absolute;
	aspect-ratio: 9 / 18.5;
	padding: 0.7cqw;
	border-radius: 3cqw;
	background: var(--hams-tinta);
	box-shadow: var(--e-sombra);
}

.hams-escena .e-tel__p {
	display: flex;
	flex-direction: column;
	gap: 1.2cqw;
	height: 100%;
	padding: 2.2cqw 1.6cqw;
	overflow: hidden;
	border-radius: 2.4cqw;
	background: var(--hams-carbon);
	color: #f3f4f8;
}

/* Reservas */
.hams-escena--reservas[data-v="2"] {
	--e-bg: var(--hams-azul-claro);
	--e-ui: var(--hams-carbon);
	--e-ink: #f3f4f8;
	--e-ac: var(--hams-lima);
	--e-on: var(--hams-tinta);
	--e-ac2: var(--hams-azul);
	--e-soft: rgba(255, 255, 255, 0.14);
}

.hams-escena--reservas .e-win {
	top: 11%;
	left: 6%;
	width: 72%;
	height: 78%;
}

.hams-escena--reservas .e-pag {
	grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}

.e-foto {
	position: relative;
	overflow: hidden;
	border-radius: 1cqw;
	background: var(--hams-azul);
}

.e-arco {
	position: absolute;
	right: 16%;
	bottom: 0;
	left: 16%;
	height: 58%;
	border-radius: 20cqw 20cqw 0 0;
	background: rgba(255, 255, 255, 0.24);
}

.e-sol {
	position: absolute;
	top: 12%;
	right: 13%;
	width: 14%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hams-lima);
}

.hams-escena .e-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.4cqw;
	min-width: 0;
}

.hams-escena .e-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1cqw;
}

.e-campos b {
	height: 3.6cqw;
	border: 1px solid var(--e-soft);
	border-radius: 0.7cqw;
}

.hams-escena .e-cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.7cqw;
}

.e-cal i {
	aspect-ratio: 1;
	border-radius: 0.5cqw;
	background: var(--e-soft);
}

.e-cal i.is-r {
	background: var(--e-ac);
	opacity: 0.55;
}

.e-cal i.is-x {
	background: var(--e-ac);
}

.hams-escena--reservas .e-tel {
	right: 5%;
	bottom: -10%;
	width: 19%;
}

.e-ok {
	position: relative;
	width: 5cqw;
	height: 5cqw;
	margin: auto auto 0.6cqw;
	border-radius: 50%;
	background: var(--hams-lima);
}

.e-ok::after {
	content: "";
	position: absolute;
	top: 28%;
	left: 36%;
	width: 26%;
	height: 42%;
	border: solid var(--hams-tinta);
	border-width: 0 0.5cqw 0.5cqw 0;
	transform: rotate(40deg);
}

.hams-escena .e-btn--s {
	align-self: stretch;
	margin-top: auto;
	background: var(--hams-lima);
}

.hams-escena .e-nota {
	position: absolute;
	top: 8%;
	right: 4%;
	display: grid;
	gap: 1cqw;
	width: 21%;
	padding: 1.6cqw;
	border-radius: 1.2cqw;
	background: var(--e-ui);
	box-shadow: var(--e-sombra);
}

.e-pin {
	width: 2.6cqw;
	height: 2.6cqw;
	margin: 0 0 0.4cqw 0.5cqw;
	border-radius: 50% 50% 50% 0;
	background: var(--e-ac);
	transform: rotate(-45deg);
}

/* Identidad */
.hams-escena--identidad {
	--e-bg: #cdd2e2;
}

.hams-escena .e-plano {
	position: absolute;
	top: 12%;
	left: 6%;
	display: grid;
	grid-template-columns: 5fr 3fr;
	grid-template-rows: 3fr 2fr;
	gap: 1.2cqw;
	width: 42%;
	height: 76%;
}

.e-plano i {
	border: 1px solid var(--e-ink);
	background:
		repeating-linear-gradient(90deg, rgba(10, 12, 18, 0.5) 0 1px, transparent 1px 2.6cqw),
		repeating-linear-gradient(0deg, rgba(10, 12, 18, 0.5) 0 1px, transparent 1px 2.6cqw);
}

.e-plano i:first-child {
	grid-row: 1 / 3;
}

.e-plano i:nth-child(2) {
	background: var(--hams-tinta);
}

.e-plano i:nth-child(3) {
	background: var(--hams-azul);
	border-color: var(--hams-azul);
}

.hams-escena .e-tarjeta {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1cqw;
	width: 31%;
	aspect-ratio: 8.5 / 5.4;
	padding: 2.2cqw;
	border-radius: 1cqw;
	box-shadow: var(--e-sombra);
}

.e-tarjeta--a {
	top: 15%;
	right: 8%;
	background: var(--hams-tinta);
	color: #f3f4f8;
	transform: rotate(6deg);
}

.e-tarjeta--b {
	top: 43%;
	right: 17%;
	justify-content: flex-end !important;
	background: var(--hams-blanco);
	transform: rotate(-5deg);
}

.e-marca {
	width: 3.6cqw;
	height: 3.6cqw;
	background: var(--hams-lima);
}

.e-nombre {
	font-family: var(--hams-font-display);
	font-size: 3.4cqw;
	letter-spacing: -0.03em;
	line-height: 1;
}

.hams-escena .e-placa {
	position: absolute;
	right: 7%;
	bottom: 9%;
	display: grid;
	place-items: center;
	width: 11%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hams-azul);
	box-shadow: var(--e-sombra);
}

.e-placa .e-marca {
	width: 36%;
	height: 36%;
	background: #fff;
}

.hams-escena .e-sw {
	position: absolute;
	bottom: 10%;
	left: 52%;
	display: flex;
	gap: 0.9cqw;
}

.e-sw i {
	width: 4.4cqw;
	height: 4.4cqw;
	border-radius: 50%;
	background: var(--hams-tinta);
}

.e-sw i:nth-child(2) { background: var(--hams-azul); }
.e-sw i:nth-child(3) { background: var(--hams-lima); }
.e-sw i:nth-child(4) { background: var(--hams-blanco); }

/* Contenido */
.hams-escena--contenido {
	--e-bg: var(--hams-lima);
}

.hams-escena--contenido .e-tel {
	top: 9%;
	left: 11%;
	width: 24%;
}

.hams-escena .e-post {
	display: flex;
	align-items: center;
	gap: 1cqw;
}

.e-av {
	flex: none;
	width: 3cqw;
	height: 3cqw;
	border-radius: 50%;
	background: var(--hams-lima);
}

.e-img {
	flex: none;
	height: 40%;
	border-radius: 1cqw;
	background: var(--hams-azul);
}

.hams-escena .e-pieza {
	position: absolute;
	display: grid;
	align-content: center;
	gap: 1.3cqw;
	padding: 2.6cqw;
	border-radius: 1.4cqw;
	box-shadow: var(--e-sombra);
}

.e-pieza--a {
	top: 13%;
	left: 41%;
	width: 29%;
	height: 44%;
	background: var(--hams-tinta);
	color: #f3f4f8;
	transform: rotate(-4deg);
}

.e-comillas {
	width: 5cqw;
	height: 3.4cqw;
	margin-bottom: 0.6cqw;
	background:
		radial-gradient(circle at 25% 50%, var(--hams-lima) 0 1.4cqw, transparent 1.45cqw),
		radial-gradient(circle at 75% 50%, var(--hams-lima) 0 1.4cqw, transparent 1.45cqw);
}

.e-pieza--b {
	top: 34%;
	right: 6%;
	place-items: center;
	width: 21%;
	aspect-ratio: 4 / 5;
	background: var(--hams-azul);
	transform: rotate(5deg);
}

.e-play {
	width: 0;
	height: 0;
	border-block: 2.6cqw solid transparent;
	border-left: 4.2cqw solid #fff;
}

.hams-escena .e-chips {
	position: absolute;
	bottom: 9%;
	left: 41%;
	display: flex;
	flex-wrap: wrap;
	gap: 1cqw;
	width: 54%;
}

.e-chips b {
	padding: 1cqw 2cqw;
	border: 1px solid var(--hams-tinta);
	border-radius: 99px;
	font-size: 1.7cqw;
	line-height: 1;
}

/* Producto */
.hams-escena--producto {
	--e-bg: #1a1f2e;
	--e-ink: #f3f4f8;
}

.hams-escena .e-bolsa {
	position: absolute;
	top: 10%;
	left: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27%;
	height: 82%;
	border-radius: 1cqw 1cqw 1.8cqw 1.8cqw;
	background: var(--hams-bruma);
	color: var(--hams-tinta);
	box-shadow: var(--e-sombra);
}

.e-bolsa__d {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 13%;
	border-bottom: 1px dashed rgba(10, 12, 18, 0.4);
	border-radius: 1cqw 1cqw 0 0;
	background: rgba(10, 12, 18, 0.12);
}

.hams-escena .e-bolsa__e {
	display: grid;
	gap: 1.1cqw;
	width: 72%;
	padding: 2.2cqw;
	border-radius: 0.6cqw;
	background: var(--hams-tinta);
	color: #f3f4f8;
}

.e-bolsa__e b {
	font-family: var(--hams-font-display);
	font-size: 7.4cqw;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: var(--hams-lima);
}

.hams-escena .e-taza {
	position: absolute;
	top: 14%;
	right: 17%;
	display: grid;
	place-items: center;
	width: 22%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hams-blanco);
	box-shadow: var(--e-sombra);
}

.e-taza::before {
	content: "";
	position: absolute;
	top: 34%;
	right: -24%;
	z-index: -1;
	width: 34%;
	height: 32%;
	border: 1.8cqw solid var(--hams-blanco);
	border-radius: 50%;
}

.e-taza i {
	width: 76%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hams-tinta);
	box-shadow: inset 0 0 0 1.2cqw #2a3040;
}

.hams-escena .e-carta {
	position: absolute;
	right: 9%;
	bottom: 9%;
	display: grid;
	gap: 1.2cqw;
	width: 30%;
	padding: 2.2cqw;
	border-radius: 1cqw;
	background: var(--hams-lima);
	color: var(--hams-tinta);
	transform: rotate(-4deg);
	box-shadow: var(--e-sombra);
}

.hams-escena .e-granos {
	position: absolute;
	bottom: 12%;
	left: 46%;
	display: flex;
	gap: 1.2cqw;
}

.e-granos i {
	width: 2.6cqw;
	height: 3.8cqw;
	border-radius: 50%;
	background: var(--hams-azul-claro);
	transform: rotate(24deg);
}

.e-granos i:nth-child(2) {
	transform: rotate(-30deg) translateY(1.4cqw);
}

/* Tienda */
.hams-escena--tienda {
	--e-bg: var(--hams-tinta);
}

.hams-escena--tienda[data-v="2"] {
	--e-bg: var(--hams-azul);
	--e-ui: var(--hams-carbon);
	--e-ink: #f3f4f8;
	--e-ac: var(--hams-lima);
	--e-on: var(--hams-tinta);
	--e-soft: rgba(255, 255, 255, 0.12);
}

.hams-escena--tienda .e-win {
	top: 11%;
	left: 7%;
	width: 86%;
	height: 82%;
}

.hams-escena--tienda .e-pag {
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

.hams-escena .e-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 1.4cqw;
	min-height: 0;
}

.hams-escena .e-prod {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	border-radius: 1cqw;
	background: var(--e-soft);
}

.e-obj {
	width: 26%;
	height: 56%;
	border-radius: 1.4cqw 1.4cqw 0.8cqw 0.8cqw;
	background: var(--hams-azul);
}

.hams-escena--tienda[data-v="2"] .e-obj {
	background: var(--hams-azul-claro);
}

.e-obj--2 {
	width: 40%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hams-lima) !important;
}

.e-obj--3 {
	width: 46%;
	height: 38%;
	border-radius: 0.8cqw;
	background: var(--e-ink) !important;
}

.e-obj--4 {
	width: 34%;
	height: 50%;
	border-radius: 50% 50% 0.8cqw 0.8cqw;
}

.e-obj--5 {
	width: 20%;
	height: 60%;
	border-radius: 99px;
	background: var(--e-ink) !important;
}

.e-obj--6 {
	width: 44%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 1.2cqw;
	background: var(--hams-lima) !important;
	transform: rotate(45deg) scale(0.72);
}

.e-mas {
	position: absolute;
	right: 1cqw;
	bottom: 1cqw;
	width: 2.6cqw;
	height: 2.6cqw;
	border-radius: 50%;
	background:
		linear-gradient(var(--e-ui), var(--e-ui)) center / 50% 0.3cqw no-repeat,
		linear-gradient(var(--e-ui), var(--e-ui)) center / 0.3cqw 50% no-repeat,
		var(--e-ink);
	transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.hams-escena .e-carro {
	display: flex;
	flex-direction: column;
	gap: 1.5cqw;
	min-width: 0;
	padding-left: 2cqw;
	border-left: 1px solid var(--e-soft);
}

.hams-escena .e-item {
	display: flex;
	align-items: center;
	gap: 1cqw;
}

.e-item i:first-child {
	flex: none;
	width: 4.4cqw;
	height: 4.4cqw;
	border-radius: 0.8cqw;
	background: var(--e-soft);
}

.e-total {
	height: 1px;
	margin-top: auto;
	background: var(--e-soft);
}

.hams-escena--tienda .e-carro .e-btn {
	align-self: stretch;
	text-align: center;
}

.hams-escena .e-estado {
	position: absolute;
	bottom: 5%;
	left: 3%;
	display: flex;
	align-items: center;
	gap: 3cqw;
	padding: 1.5cqw 2cqw;
	border-radius: 99px;
	background: var(--hams-tinta);
	box-shadow: var(--e-sombra);
}

.e-estado b {
	position: relative;
	width: 1.8cqw;
	height: 1.8cqw;
	border-radius: 50%;
	background: var(--hams-lima);
}

.e-estado b:last-child {
	background: rgba(255, 255, 255, 0.3);
}

.e-estado b + b::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: 3cqw;
	height: 1px;
	background: rgba(255, 255, 255, 0.4);
}

/* Las escenas reaccionan cuando se interactúa con su tarjeta */
.hams-card:hover .e-tel,
.hams-card:focus-within .e-tel {
	transform: translateY(-7%);
}

.hams-card:hover .e-nota,
.hams-card:focus-within .e-nota {
	transform: translate(-6%, 8%);
}

.hams-card:hover .hams-escena--reservas .e-btn,
.hams-card:focus-within .hams-escena--reservas .e-btn,
.hams-card:hover .hams-escena--tienda .e-btn,
.hams-card:focus-within .hams-escena--tienda .e-btn {
	background: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-card:hover .e-tarjeta--a,
.hams-card:focus-within .e-tarjeta--a {
	transform: rotate(11deg) translate(4%, -6%);
}

.hams-card:hover .e-tarjeta--b,
.hams-card:focus-within .e-tarjeta--b {
	transform: rotate(-10deg) translate(-6%, 6%);
}

.hams-card:hover .e-pieza--a,
.hams-card:focus-within .e-pieza--a {
	transform: rotate(-8deg) translate(-3%, -4%);
}

.hams-card:hover .e-pieza--b,
.hams-card:focus-within .e-pieza--b {
	transform: rotate(10deg) translate(4%, -5%);
}

.hams-card:hover .e-bolsa,
.hams-card:focus-within .e-bolsa {
	transform: rotate(-4deg);
}

.hams-card:hover .e-taza,
.hams-card:focus-within .e-taza {
	transform: rotate(40deg);
}

.hams-card:hover .e-carta,
.hams-card:focus-within .e-carta {
	transform: rotate(-9deg) translateY(-6%);
}

.hams-card:hover .e-mas,
.hams-card:focus-within .e-mas {
	background-color: var(--hams-lima);
	transform: scale(1.25);
}

.hams-card:hover .e-estado,
.hams-card:focus-within .e-estado {
	transform: translateY(-30%);
}

@media (prefers-reduced-motion: no-preference) {
	.hams-card:hover .e-cal i.is-r,
	.hams-card:hover .e-cal i.is-x,
	.hams-card:focus-within .e-cal i.is-r,
	.hams-card:focus-within .e-cal i.is-x {
		animation: hams-dia 0.35s var(--ease) both;
		animation-delay: calc(var(--d) * 0.07s);
	}
}

@keyframes hams-dia {
	from {
		transform: scale(0.2);
	}
}

/* ---------- 10. Perspectiva ---------- */
@media (min-width: 60em) {
	.hams-perspectiva .hams-grid > .hams-label {
		grid-column: 1 / span 3;
	}

	.hams-perspectiva__body {
		grid-column: 4 / -1;
	}
}

.hams-principios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	column-gap: var(--col-gap);
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	list-style: none;
}

.hams-principios li {
	padding: 1rem 0 1.1rem;
	border-top: 1px solid var(--line);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* ---------- 11. Filas (problemas, listados editoriales) ---------- */
@media (min-width: 60em) {
	.hams-split > :first-child {
		grid-column: 1 / span 4;
	}

	.hams-split > :last-child {
		grid-column: 6 / -1;
	}

	.hams-split.is-mitades > :first-child {
		grid-column: 1 / span 6;
	}

	.hams-split.is-mitades > :last-child {
		grid-column: 7 / -1;
	}

	.hams-sticky {
		position: sticky;
		top: calc(var(--header-h) + 2rem);
		align-self: start;
	}
}

.hams-sticky > * + * {
	margin-top: 1.25rem;
}

.hams-row {
	position: relative;
	display: grid;
	gap: 0.6rem;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-top: 1px solid var(--line);
}

.hams-row:last-child {
	border-bottom: 1px solid var(--line);
}

.hams-row::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--mark);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.5s var(--ease);
}

.hams-row:hover::before,
.hams-row:focus-within::before {
	transform: scaleX(1);
}

.hams-row > p:not(.hams-link) {
	max-width: 34em;
	color: var(--muted);
}

.hams-row .hams-link {
	margin-top: 0.4rem;
	font-size: var(--t-s);
}

/* ---------- 12. Soluciones: pistas ---------- */
.hams-head {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 60em) {
	.hams-head {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: end;
		gap: var(--col-gap);
	}

	.hams-head > .hams-link {
		justify-self: end;
	}
}

.hams-pista {
	--s: 0;
	--w: 100;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	padding: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.hams-pista--1 { --s: 0; --w: 34; }
.hams-pista--2 { --s: 20; --w: 40; }
.hams-pista--3 { --s: 44; --w: 36; }
.hams-pista--4 { --s: 66; --w: 34; }
.hams-pista--5 { --s: 0; --w: 100; }

/* carril y clip de cada pista */
.hams-pista::before,
.hams-pista::after {
	content: "";
	position: absolute;
	top: 0;
	height: 0.625rem;
	border-radius: 2px;
}

.hams-pista::before {
	left: 0;
	right: 0;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12.5%), rgba(255, 255, 255, 0.05);
}

.hams-pista::after {
	left: calc(var(--s) * 1%);
	width: calc(var(--w) * 1%);
	background: var(--hams-azul);
	transform-origin: 0 50%;
	transition: background-color 0.35s var(--ease), transform 0.9s var(--ease);
}

.hams-pista:hover::after,
.hams-pista:focus-within::after {
	background: var(--hams-lima);
}

.hams-pista.is-pendiente::after {
	transform: scaleX(0);
}

.hams-pista__n {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.hams-pista__t {
	font-family: var(--hams-font-display);
	font-size: clamp(2.25rem, 5.6vw, 5rem);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.045em;
	overflow-wrap: normal;
}

.hams-pista__t a {
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.hams-pista__t a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hams-pista:hover .hams-pista__t a,
.hams-pista__t a:focus-visible {
	color: var(--hams-lima);
}

.hams-pista__d {
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.4;
	max-width: 30em;
}

.hams-pista__l {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.1rem;
	list-style: none;
	font-size: var(--t-s);
	color: var(--muted);
}

.hams-pista__l li:not(:last-child)::after {
	content: "/";
	margin-left: 1.1rem;
	opacity: 0.5;
}

@media (min-width: 60em) {
	.hams-pista {
		grid-template-columns: minmax(0, 1fr) minmax(0, 6fr) minmax(0, 5fr);
		column-gap: var(--col-gap);
		align-items: start;
	}

	.hams-pista__n {
		padding-top: 0.9rem;
	}

	.hams-pista__t {
		grid-row: span 2;
	}

	.hams-pista__d,
	.hams-pista__l {
		grid-column: 3;
	}

	.hams-pista__d {
		padding-top: 0.5rem;
	}
}

.hams-nota {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 1rem;
}

@media (min-width: 60em) {
	.hams-nota {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--col-gap);
		align-items: start;
	}

	.hams-nota > .hams-link {
		justify-self: end;
	}
}

.hams-nota > p:first-child {
	max-width: 38em;
	color: var(--muted);
}

/* Rutas compactas: las cinco soluciones en una sola franja */
.hams-rutas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--line);
}

.hams-ruta {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.6rem;
	padding: 1.25rem 0 1.5rem;
	border-bottom: 1px solid var(--line);
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.hams-ruta__n {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	transition: color 0.35s var(--ease);
}

.hams-ruta h3 {
	font-family: var(--hams-font-display);
	font-size: clamp(1.5rem, 1.95vw, 1.875rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.035em;
	overflow-wrap: normal;
}

.hams-ruta h3 a {
	text-decoration: none;
}

.hams-ruta h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hams-ruta > p:last-child {
	color: var(--muted);
	transition: color 0.35s var(--ease);
}

@media (min-width: 48em) {
	.hams-rutas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-left: 1px solid var(--line);
	}

	.hams-ruta {
		min-height: 13rem;
		padding: 1.25rem 1.25rem 1.5rem;
		border-right: 1px solid var(--line);
	}

	.hams-ruta:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.hams-ruta > p:last-child {
		margin-top: auto;
	}

	.hams-ruta {
		grid-template-rows: auto auto 1fr;
	}

	.hams-ruta > p:last-child {
		align-self: end;
	}
}

@media (min-width: 68em) {
	.hams-rutas {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.hams-ruta:last-child:nth-child(odd) {
		grid-column: auto;
		min-height: 13rem;
	}
}

.hams-ruta:hover,
.hams-ruta:focus-within {
	background: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-ruta:hover .hams-ruta__n,
.hams-ruta:hover > p:last-child,
.hams-ruta:focus-within .hams-ruta__n,
.hams-ruta:focus-within > p:last-child {
	color: var(--hams-tinta);
}

@media (max-width: 47.99em) {
	.hams-ruta:hover,
	.hams-ruta:focus-within {
		background: transparent;
		color: inherit;
	}

	.hams-ruta:hover .hams-ruta__n,
	.hams-ruta:hover > p:last-child,
	.hams-ruta:focus-within .hams-ruta__n,
	.hams-ruta:focus-within > p:last-child {
		color: var(--muted);
	}
}

/* ---------- 13. Proyectos: tarjetas y placas ---------- */
.hams-proyectos {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
	row-gap: clamp(3rem, 6vw, 5.5rem);
}

.hams-card {
	position: relative;
	grid-column: 1 / -1;
	display: grid;
	gap: 1.25rem;
	align-content: start;
	min-width: 0;
}

.hams-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 16 / 10;
	background: var(--hams-carbon);
}

.hams-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hams-card__media > * {
	transition: transform 0.9s var(--ease);
}

.hams-card:hover .hams-card__media > *,
.hams-card:focus-within .hams-card__media > * {
	transform: scale(1.035);
}

.hams-card__ver {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	padding: 0.55rem 0.9rem;
	border-radius: var(--radius);
	background: var(--hams-lima);
	color: var(--hams-tinta);
	font-size: var(--t-s);
	font-weight: 500;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.hams-card:hover .hams-card__ver,
.hams-card:focus-within .hams-card__ver {
	opacity: 1;
	transform: none;
}

.hams-card__body {
	display: grid;
	gap: 0.6rem;
}

.hams-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.hams-card__meta span + span::before {
	content: "·";
	margin-right: 1rem;
}

.hams-card__t {
	font-family: var(--hams-font-display);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.035em;
}

.hams-card__t a {
	text-decoration: none;
}

.hams-card__t a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hams-card__x {
	max-width: 36em;
	color: var(--muted);
}

.hams-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hams-chips li,
.hams-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 1.875rem;
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.hams-chips li:has(a) {
	padding: 0;
	border: 0;
}

.hams-chips a {
	position: relative;
	z-index: 2;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.hams-chips a:hover {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
}

@media (min-width: 48em) {
	.hams-proyectos--destacados .hams-card:first-child .hams-card__media {
		aspect-ratio: 21 / 9;
	}

	.hams-proyectos--destacados .hams-card:first-child .hams-card__body {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--col-gap);
	}

	.hams-proyectos--destacados .hams-card:first-child .hams-card__meta,
	.hams-proyectos--destacados .hams-card:first-child .hams-card__t {
		grid-column: 1;
	}

	.hams-proyectos--destacados .hams-card:first-child .hams-card__x,
	.hams-proyectos--destacados .hams-card:first-child .hams-chips {
		grid-column: 2;
	}

	.hams-proyectos--destacados .hams-card:first-child .hams-card__x {
		grid-row: 1 / span 2;
		font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
		color: var(--fg);
	}

	.hams-proyectos--destacados .hams-card:nth-child(2) {
		grid-column: 1 / span 7;
	}

	.hams-proyectos--destacados .hams-card:nth-child(3) {
		grid-column: 8 / -1;
		margin-top: clamp(2rem, 6vw, 6rem);
	}

	.hams-proyectos--destacados .hams-card:nth-child(3) .hams-card__media {
		aspect-ratio: 4 / 5;
	}

	.hams-proyectos--destacados .hams-card:nth-child(n + 4),
	.hams-proyectos--rejilla .hams-card {
		grid-column: span 6;
	}
}

/* Carrete: recorrido horizontal por los proyectos con desplazamiento nativo */
.hams-carrete {
	--lado: max(var(--gutter), (100% - var(--max)) / 2);
	position: relative;
}

.hams-carrete__pista {
	display: flex;
	gap: var(--col-gap);
	padding-inline: var(--lado);
	padding-block: 0.25rem 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--lado);
	scrollbar-width: none;
}

.hams-carrete__pista::-webkit-scrollbar {
	display: none;
}

.hams-carrete .hams-card {
	flex: 0 0 min(82vw, 54rem);
	scroll-snap-align: start;
}

.hams-carrete .hams-card__media {
	aspect-ratio: 16 / 10;
}

.hams-carrete .hams-card__media > :first-child {
	transform: translateX(calc(var(--px, 0) * 2.5%)) scale(1.05);
}

.hams-carrete .hams-card:hover .hams-card__media > :first-child,
.hams-carrete .hams-card:focus-within .hams-card__media > :first-child {
	transform: translateX(calc(var(--px, 0) * 2.5%)) scale(1.01);
}

@media (min-width: 48em) {
	.hams-carrete .hams-card__body {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: var(--col-gap);
	}

	.hams-carrete .hams-card__meta,
	.hams-carrete .hams-card__t {
		grid-column: 1;
	}

	.hams-carrete .hams-card__x,
	.hams-carrete .hams-chips {
		grid-column: 2;
	}

	.hams-carrete .hams-card__x {
		grid-row: 1 / span 2;
		color: var(--fg);
	}

	.hams-carrete .hams-card__body:not(:has(.hams-card__meta)) .hams-card__x {
		grid-row: 1;
	}
}

.hams-carrete__ctl {
	display: none;
	align-items: center;
	gap: 1rem;
	width: min(100% - 2 * var(--gutter), var(--max));
	margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
}

.js .hams-carrete__ctl {
	display: flex;
}

.hams-carrete__n {
	font-size: var(--t-s);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.hams-carrete__n b {
	font-weight: 500;
	color: var(--fg);
}

.hams-carrete__barra {
	position: relative;
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: var(--line);
}

.hams-carrete__barra i {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background: var(--mark);
	transform: scaleX(var(--avance, 0.14));
	transform-origin: 0 50%;
}

.hams-carrete__btn {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--field, var(--line));
	border-radius: 50%;
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-size: 1.125rem;
	cursor: pointer;
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.hams-carrete__btn:hover:not([disabled]) {
	border-color: var(--hams-lima);
	background: var(--hams-lima);
	color: var(--hams-tinta);
	transform: scale(1.06);
}

.hams-carrete__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.hams-card__clip {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s var(--ease);
}

.hams-card.is-clip .hams-card__clip {
	opacity: 1;
}

/* Panel de alcance: portada de tarjeta cuando el proyecto aún no tiene imagen destacada */
.hams-panel {
	position: absolute;
	inset: 0;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	background: var(--hams-carbon);
	color: #f3f4f8;
}

.hams-panel__nodos {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(auto-fit, minmax(max(22cqw, 8.5rem), 1fr));
	grid-auto-rows: 1fr;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: nodo;
}

.hams-panel__nodos li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
	padding: clamp(0.7rem, 2.2cqw, 1.5rem);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--hams-carbon);
	font-family: var(--hams-font-display);
	font-size: clamp(0.9375rem, 2.3cqw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	counter-increment: nodo;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.hams-panel__nodos li::before {
	content: counter(nodo, decimal-leading-zero);
	font-family: var(--hams-font-text);
	font-size: var(--t-label);
	letter-spacing: 0.09em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--hams-gris-claro);
	transition: color 0.3s var(--ease);
}

.hams-panel__nodos li:first-child {
	background: var(--hams-azul);
}

.hams-panel__nodos li:first-child::before {
	color: #fff;
}

.hams-card:hover .hams-panel__nodos li,
.hams-card:focus-within .hams-panel__nodos li {
	background: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-card:hover .hams-panel__nodos li::before,
.hams-card:focus-within .hams-panel__nodos li::before {
	color: var(--hams-tinta);
}

.hams-panel__nodos li:nth-child(2) { transition-delay: 0.05s; }
.hams-panel__nodos li:nth-child(3) { transition-delay: 0.1s; }
.hams-panel__nodos li:nth-child(4) { transition-delay: 0.15s; }
.hams-panel__nodos li:nth-child(5) { transition-delay: 0.2s; }
.hams-panel__nodos li:nth-child(6) { transition-delay: 0.25s; }
.hams-panel__nodos li:nth-child(n + 7) { transition-delay: 0.3s; }

/* En pantallas pequeñas el panel crece con su contenido para no recortar capacidades */
@media (max-width: 47.99em) {
	.hams-card__media:has(> .hams-panel) {
		aspect-ratio: auto;
	}

	.hams-card__media > .hams-panel {
		position: relative;
	}

	.hams-panel__nodos li {
		min-height: 4.75rem;
	}
}

.hams-panel__falta {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.4rem 0.6rem;
	border: 1px dashed rgba(255, 255, 255, 0.45);
	border-radius: 4px;
	font-size: var(--t-label);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--hams-lima);
}

.hams-card:hover .hams-card__media > .hams-panel,
.hams-card:focus-within .hams-card__media > .hams-panel {
	transform: none;
}

/* Marcos de evidencia: navegador, móvil, panel y fotografía */
.hams-marco {
	display: grid;
	gap: 0.6rem;
	min-width: 0;
	margin: 0;
}

.hams-marco__cuerpo {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background: var(--hams-carbon);
	box-shadow: 0 2rem 4rem -2.5rem rgba(10, 12, 18, 0.6);
}

.hams-marco__pantalla {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--hams-carbon);
}

.hams-marco__pantalla img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.hams-marco--movil {
	justify-self: center;
	width: 100%;
	max-width: 17rem;
}

.hams-marco--movil .hams-marco__cuerpo {
	padding: 0.4rem;
	border-color: rgba(255, 255, 255, 0.24);
	border-radius: 1.75rem;
	background: #05060a;
}

.hams-marco--movil .hams-marco__pantalla {
	aspect-ratio: 9 / 19.5;
	border-radius: 1.4rem;
}

.hams-marco--panel .hams-marco__pantalla {
	aspect-ratio: 4 / 3;
}

.hams-marco--foto .hams-marco__cuerpo {
	border: 0;
	border-radius: var(--radius);
	box-shadow: none;
}

.hams-marco--foto .hams-marco__pantalla {
	aspect-ratio: 3 / 2;
}

.hams-marco--foto .hams-marco__pantalla img {
	object-position: 50% 50%;
}

.hams-marco figcaption {
	font-size: var(--t-s);
	color: var(--muted);
}

/* Espacio aún sin material: solo se ve en el editor y en modo revisión */
.hams-marco.is-vacio .hams-marco__pantalla {
	display: grid;
	place-items: center;
	outline: 1px dashed rgba(255, 255, 255, 0.4);
	outline-offset: -0.6rem;
}

.hams-marco__falta {
	max-width: 24em;
	margin: 0;
	padding: 1.25rem;
	font-size: var(--t-s);
	line-height: 1.4;
	text-align: center;
	color: #c9cdd8;
}

.hams-marco__falta strong {
	display: block;
	margin-bottom: 0.45rem;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--hams-lima);
}

.hams-vitrina {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: clamp(1.25rem, 3vw, 2.5rem) var(--col-gap);
}

.hams-vitrina > * {
	grid-column: 1 / -1;
	min-width: 0;
}

@media (min-width: 48em) {
	.hams-vitrina > :is(.hams-marco--web, :has(> .hams-marco--web)) {
		grid-column: span 9;
	}

	.hams-vitrina > :is(.hams-marco--movil, :has(> .hams-marco--movil)) {
		grid-column: span 3;
	}

	.hams-vitrina > :is(.hams-marco--panel, :has(> .hams-marco--panel)) {
		grid-column: span 4;
	}

	.hams-vitrina > :is(.hams-marco--foto, :has(> .hams-marco--foto)) {
		grid-column: span 6;
	}

	.hams-vitrina > .hams-marco:only-child {
		grid-column: 1 / -1;
	}
}

/* Una sección de evidencia sin ninguna imagen no se muestra */
.hams-evidencia:not(:has(.hams-marco)) {
	display: none;
}

/* Listado por grupos (archivo de proyectos) */
.hams-grupo + .hams-grupo {
	margin-top: clamp(4rem, 8vw, 7rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--line);
}

.hams-grupo__head {
	display: grid;
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 60em) {
	.hams-grupo__head {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--col-gap);
		align-items: baseline;
	}
}

.hams-grupo__head p {
	max-width: 38em;
	color: var(--muted);
}

/* ---------- 14. Metodología: línea de tiempo ----------
 * Cuatro fases como clips de una línea de edición. Con JavaScript el cabezal avanza
 * con el scroll; sin él, la línea se muestra completa. */
.hams-linea {
	--p: 1;
	--lx: 0px;
	position: relative;
	padding-top: 1.75rem;
}

.hams-linea::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: var(--lx);
	height: 0.875rem;
	background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 5%);
}

.hams-linea::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--lx) + (100% - var(--lx)) * var(--p));
	width: 0.75rem;
	height: 1.75rem;
	margin-left: -0.375rem;
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 30%, 58% 52%, 58% 100%, 42% 100%, 42% 52%, 0 30%);
}

.hams-fase {
	--s: 0;
	--w: 34;
	display: grid;
	gap: 0.5rem;
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid var(--line);
}

.hams-fase:nth-child(2) { --s: 22; }
.hams-fase:nth-child(3) { --s: 44; }
.hams-fase:nth-child(4) { --s: 66; }

.hams-fase__n {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.hams-fase h3 {
	font-family: var(--hams-font-display);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.035em;
	transition: color 0.4s var(--ease);
}

.hams-fase > p:last-child {
	position: relative;
	padding-top: 2.5rem;
	color: var(--muted);
}

/* carril y clip de cada fase */
.hams-fase > p:last-child::before,
.hams-fase > p:last-child::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	height: 1.25rem;
	border-radius: 3px;
}

.hams-fase > p:last-child::before {
	right: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.12);
}

.hams-fase > p:last-child::after {
	left: calc(var(--s) * 1%);
	width: calc(var(--w) * 1%);
	background: var(--hams-lima);
	transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.hams-fase h3 {
	color: var(--hams-lima);
}

/* Con el cabezal activo, las fases aún no alcanzadas quedan en reposo */
.hams-linea.is-viva .hams-fase:not(.is-on) h3 {
	color: inherit;
}

.hams-linea.is-viva .hams-fase:not(.is-on) > p:last-child::after {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

@media (min-width: 60em) {
	.hams-linea {
		--lx: calc((100% - var(--col-gap)) / 3 + var(--col-gap));
	}

	.hams-fase {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: var(--col-gap);
		row-gap: 0.4rem;
		align-items: start;
	}

	.hams-fase > p:last-child {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* el texto de cada fase queda bajo su clip */
	.hams-fase > p:last-child {
		padding-right: calc((100 - var(--s) - var(--w)) * 1%);
		padding-left: calc(var(--s) * 1%);
	}
}

/* ---------- 15. Listas de apoyo ---------- */
.hams-checks {
	display: grid;
	list-style: none;
	margin-block: 1.75rem;
}

.hams-checks li {
	position: relative;
	padding: 0.9rem 0 0.9rem 1.75rem;
	border-top: 1px solid var(--line);
}

.hams-checks li:last-child {
	border-bottom: 1px solid var(--line);
}

.hams-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	width: 0.9rem;
	height: 0.4rem;
	border-radius: 2px;
	background: var(--mark);
}

.hams-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem) var(--col-gap);
}

.hams-item {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.hams-item > p {
	color: var(--muted);
	max-width: 30em;
}

.hams-stack > * + * {
	margin-top: 1.25rem;
}

.hams-stack > .wp-block-buttons {
	margin-top: 2rem;
}

/* ---------- 15b. Oferta: situaciones, opciones comparables y condiciones ----------
 * Componentes de la página Construir. Sirven para cualquier ruta que se presente como oferta. */

/* Situaciones: frases del cliente, numeradas, en dos columnas. */
.hams-situaciones .hams-wrap > .hams-label {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hams-citas {
	display: grid;
	list-style: none;
	counter-reset: cita;
}

.hams-citas li {
	counter-increment: cita;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	padding: clamp(1.25rem, 2.4vw, 1.75rem) 0 clamp(1.75rem, 3.6vw, 3rem);
	border-top: 1px solid var(--line);
	font-family: var(--hams-font-display);
	font-size: clamp(1.375rem, 2.35vw, 2.125rem);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

.hams-citas li::before {
	content: counter(cita, decimal-leading-zero);
	font-family: var(--hams-font-text);
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	font-variant-numeric: tabular-nums;
	color: var(--mark);
}

@media (min-width: 48em) {
	.hams-citas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 5rem);
	}
}

/* Opciones: dos productos lado a lado. Las filas (para quién, qué incluye, datos y resultado)
 * comparten altura entre columnas para poder compararlas; en móvil se apilan. */
.hams-opciones {
	display: grid;
	gap: var(--col-gap);
}

.hams-opcion {
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-top: 3px solid var(--mark);
	border-radius: var(--radius);
	background: var(--surface);
}

.hams-opcion > * + * {
	margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
	padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
	border-top: 1px solid var(--line);
}

@media (min-width: 54em) {
	.hams-opciones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(4, auto);
		row-gap: 0;
	}

	@supports (grid-template-rows: subgrid) {
		.hams-opcion {
			grid-row: span 4;
			grid-template-rows: subgrid;
		}
	}
}

.hams-opcion__cab .hams-l {
	margin-top: 0.75rem;
}

.hams-opcion__para {
	margin-top: 1rem;
	max-width: 30em;
	color: var(--muted);
}

.hams-opcion .hams-checks {
	margin-block: 0.75rem 0;
}

.hams-opcion .hams-checks li {
	padding-block: 0.75rem;
}

.hams-opcion .hams-checks li:first-child {
	border-top: 0;
}

.hams-opcion .hams-checks li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hams-opcion .hams-checks li::before {
	top: 1.25rem;
}

.hams-opcion .hams-checks strong {
	font-weight: 600;
}

.hams-opcion__datos {
	display: grid;
	gap: 1.5rem var(--col-gap);
}

@media (min-width: 30em) {
	.hams-opcion__datos {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.hams-dato > p + p {
	margin-top: 0.6rem;
}

.hams-dato__v {
	font-family: var(--hams-font-display);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.035em;
}

.hams-opcion__fin {
	display: grid;
	align-content: space-between;
}

.hams-opcion__resultado {
	margin-top: 0.6rem;
	font-family: var(--hams-font-display);
	font-size: var(--t-m);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hams-opcion__fin .wp-block-buttons {
	margin-top: 1.75rem;
}

/* Línea de tiempo con cinco fases: los clips se reparten en cinco tramos. */
.hams-linea--5 .hams-fase:nth-child(2) { --s: 16.5; }
.hams-linea--5 .hams-fase:nth-child(3) { --s: 33; }
.hams-linea--5 .hams-fase:nth-child(4) { --s: 49.5; }
.hams-linea--5 .hams-fase:nth-child(5) { --s: 66; }

/* Condiciones: lista compacta. En pantallas amplias fluye en dos columnas equilibradas. */
.hams-condiciones__lista {
	list-style: none;
	font-size: var(--t-s);
	line-height: 1.5;
}

.hams-condiciones__lista li {
	padding-bottom: 0.9rem;
	margin-bottom: 0.9rem;
	border-bottom: 1px solid var(--line);
	break-inside: avoid;
}

@media (min-width: 48em) {
	.hams-condiciones__lista {
		columns: 2;
		column-gap: var(--col-gap);
	}
}

/* ---------- 16. Sobre HAMS ---------- */
.hams-sobre__nombre {
	font-family: var(--hams-font-display);
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.04em;
	margin-top: 1.25rem;
}

.hams-sobre .wp-block-image {
	margin: 0 0 1.5rem;
	overflow: hidden;
	border-radius: var(--radius);
}

/* ---------- 17. Conversión y formulario ---------- */
.hams-form {
	display: grid;
	gap: 0.35rem;
}

.hams-form__fila {
	display: grid;
	gap: 0.35rem 1.25rem;
}

.hams-form__pie {
	margin-top: 0.5rem;
}

.hams-form__estado {
	margin-top: 1rem;
}

@media (min-width: 40em) {
	.hams-form__fila {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hams-campo {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
}

.hams-campo label {
	font-size: var(--t-s);
	font-weight: 500;
}

.hams-campo label small {
	font-size: inherit;
	font-weight: 400;
	color: var(--muted);
}

.hams-campo input,
.hams-campo select,
.hams-campo textarea {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.8rem 0.95rem;
	border: 1px solid var(--field, var(--line));
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.2s var(--ease);
}

.hams-campo textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.hams-campo select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
	background-size: 0.36rem 0.36rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.hams-campo select option {
	background: #fff;
	color: #0a0c12;
}

.hams-campo input:hover,
.hams-campo select:hover,
.hams-campo textarea:hover {
	border-color: var(--fg);
}

.hams-campo input:focus-visible,
.hams-campo select:focus-visible,
.hams-campo textarea:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
	border-color: var(--focus);
}

.hams-campo [aria-invalid="true"] {
	border-color: var(--error);
}

/* El espacio del mensaje de error está reservado: el formulario no salta al validar. */
.hams-campo__error {
	min-height: 1.5em;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--error);
}

.hams-form__trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hams-form__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

.hams-form__pie .hams-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.hams-form__nota {
	flex: 1 1 16rem;
	font-size: var(--t-s);
	color: var(--muted);
}

.hams-form__nota a {
	text-decoration: underline;
}

.hams-form__estado {
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 500;
}

.hams-form__estado:empty {
	display: none;
}

.hams-form__estado[data-tipo="ok"] {
	border-color: var(--hams-lima);
	background: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-form__estado[data-tipo="error"] {
	border-color: var(--error);
	color: var(--error);
}

.hams-directo {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: 2rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.hams-directo span {
	display: block;
	font-size: var(--t-label);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.hams-directo a {
	font-weight: 500;
}

/* ---------- 18. Caso de estudio ---------- */
.hams-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0 0 clamp(2rem, 5vw, 4rem);
	padding: 0;
	list-style: none;
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.hams-migas li + li::before {
	content: "/";
	margin-right: 0.75rem;
	opacity: 0.6;
}

.hams-migas a {
	text-decoration: none;
}

.hams-migas a:hover {
	color: var(--fg);
	text-decoration: underline;
}

.hams-pagehead {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}

.hams-pagehead__intro {
	margin-top: clamp(1.75rem, 4vw, 3.5rem);
}

@media (min-width: 60em) {
	.hams-pagehead__intro > :first-child {
		grid-column: 1 / span 6;
	}

	.hams-pagehead__intro > :last-child:not(:first-child) {
		grid-column: 8 / -1;
	}
}

.hams-ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.1rem var(--col-gap);
	margin: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.hams-ficha dt {
	font-size: var(--t-label);
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.3rem;
}

.hams-ficha dd {
	margin: 0;
	font-weight: 500;
}

.hams-caso__cover {
	position: relative;
	margin-top: clamp(2rem, 4vw, 3.5rem);
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 16 / 10;
	background: var(--hams-carbon);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.hams-caso__cover > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 60em) {
	.hams-caso__cover {
		aspect-ratio: 2 / 1;
	}
}

.hams-fila + .hams-fila {
	padding-top: 0;
}

.hams-fila .hams-grid {
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--line);
}

@media (min-width: 60em) {
	.hams-fila .hams-grid > :first-child {
		grid-column: 1 / span 3;
	}

	.hams-fila .hams-grid > :last-child {
		grid-column: 4 / -1;
	}
}

.hams-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.75rem), 1fr));
	gap: 0.625rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	list-style: none;
	counter-reset: nodo;
}

.hams-flow li {
	position: relative;
	display: grid;
	align-content: space-between;
	gap: 2.5rem;
	min-height: 9rem;
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--hams-font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	counter-increment: nodo;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hams-flow li::before {
	content: counter(nodo, decimal-leading-zero);
	font-family: var(--hams-font-text);
	font-size: var(--t-label);
	letter-spacing: 0.09em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.hams-flow li:hover {
	background: var(--hams-lima);
	border-color: var(--hams-lima);
	color: var(--hams-tinta);
}

.hams-flow li:hover::before {
	color: var(--hams-tinta);
}

.hams-resultados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--col-gap);
	list-style: none;
}

.hams-resultados li {
	padding-top: 1rem;
	border-top: 3px solid var(--mark);
}

.hams-resultados strong {
	display: block;
	font-family: var(--hams-font-display);
	font-size: var(--t-xl);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.5rem;
}

.hams-galeria.wp-block-gallery,
.hams-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--col-gap);
	margin: 0;
}

.hams-galeria.wp-block-gallery .wp-block-image,
.hams-galeria .wp-block-image {
	width: auto !important;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.hams-galeria figcaption,
.hams-content .wp-block-image figcaption {
	margin-top: 0.6rem;
	font-size: var(--t-s);
	color: var(--muted);
}

.hams-main img:not([src]) {
	display: none;
}

.hams-siguiente {
	display: block;
	padding-block: clamp(3.5rem, 8vw, 7rem);
}

.hams-siguiente a {
	display: grid;
	gap: 1rem;
	text-decoration: none;
}

.hams-siguiente__t {
	font-family: var(--hams-font-display);
	font-size: var(--t-mega);
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: -0.045em;
	transition: color 0.3s var(--ease);
}

.hams-siguiente__t::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.16em;
	transition: transform 0.4s var(--ease);
}

.hams-siguiente a:hover .hams-siguiente__t {
	color: var(--hams-lima);
}

.hams-siguiente a:hover .hams-siguiente__t::after {
	transform: translateX(0.12em);
}

.hams-cta .hams-xl {
	max-width: 14em;
}

.hams-cta__row {
	display: grid;
	gap: 1.75rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 60em) {
	.hams-cta__row {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		column-gap: var(--col-gap);
		align-items: end;
	}

	.hams-cta__row > :last-child {
		justify-self: end;
	}
}

/* ---------- 19. Pie ---------- */
.hams-footer {
	padding-block: clamp(3rem, 6vw, 5rem) 1.75rem;
	border-top: 1px solid var(--line);
	overflow: hidden;
}

.hams-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 2.25rem var(--col-gap);
}

.hams-footer__grid > :first-child {
	grid-column: span 2;
	max-width: 26rem;
}

@media (max-width: 30em) {
	.hams-footer__grid > :first-child {
		grid-column: auto;
	}
}

.hams-footer h2 {
	margin: 0 0 0.9rem;
}

.hams-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.15rem;
}

.hams-footer li a {
	display: inline-block;
	padding-block: 0.3rem;
	text-decoration: none;
}

.hams-footer li a:hover {
	text-decoration: underline;
	text-decoration-color: var(--hams-lima);
	text-decoration-thickness: 2px;
}

.hams-footer .sub-menu {
	display: none;
}

.hams-footer__firma {
	margin: clamp(3rem, 8vw, 6.5rem) 0 0;
	font-family: var(--hams-font-display);
	font-size: clamp(1.6rem, 8.3vw, 8.3rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

.hams-footer__firma em {
	font-style: normal;
	color: var(--hams-lima);
}

.hams-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: 1.75rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
	font-size: var(--t-s);
	color: var(--muted);
}

.hams-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

/* ---------- 20. Entradas (fase futura: Perspectivas) ---------- */
.hams-entradas {
	display: grid;
}

.hams-entradas .hams-row h2 {
	font-family: var(--hams-font-display);
	font-size: var(--t-l);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hams-entradas .hams-row h2 a {
	text-decoration: none;
}

.hams-paginacion {
	margin-top: 3rem;
	display: flex;
	gap: 1.5rem;
}

/* ---------- 21. Movimiento ----------
 * La entrada al hacer scroll solo desplaza. Nunca cambia la opacidad: si el observador
 * no se dispara, el contenido sigue a la vista. */
@media (prefers-reduced-motion: no-preference) {
	.js .hams-rv {
		transition: transform 0.8s var(--ease);
	}

	.js .hams-rv.is-pendiente {
		transform: translateY(1.75rem);
	}

	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.hams-pista.is-pendiente::after {
		transform: none;
	}

}

@media print {
	.hams-header,
	.hams-muro,
	.hams-form {
		display: none;
	}
}