/* ==========================================================================
   Hambone Comedy · hoja de estilo del sitio estatico
   --------------------------------------------------------------------------
   Misma identidad que el tema de WordPress, sin una sola dependencia: ni
   framework, ni CDN, ni fuentes de Google. Las tres familias van autoalojadas
   en ../fonts/.

   Los componentes .hb-* vienen literalmente del tema de bloques. Cambian dos
   cosas: los selectores que apuntaban a marcado de WordPress, porque aqui el
   HTML es semantico, y los tokens, que ya no se llaman --wp--preset--* sino
   --hb-*. Mismos valores, nombre honesto.
   ========================================================================== */


/* ==========================================================================
   0 · Self-hosted fonts. No network requests, no Google Fonts.
   ========================================================================== */

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

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1 · The tokens theme.json used to generate.
   Same custom-property names on purpose: the section styling below was written
   against them, and keeping the names means that CSS moves over untouched.
   ========================================================================== */

:root {
	/* Palette */
	--hb-c-base: #0A0A0A;
	--hb-c-stage: #141010;
	--hb-c-contrast: #F7F1E8;
	--hb-c-muted: #9A8B7E;
	--hb-c-rust: #A2451A;
	--hb-c-rust-deep: #6B2C10;
	--hb-c-gold: #E5C450;
	--hb-c-glow: #FBF6A1;
	--hb-c-ham: #B5764C;
	--hb-c-plum: #4D3A6A;

	/* Gradients */
	--hb-g-stage-wash: linear-gradient(160deg, #4D3A6A 0%, #1B1220 55%, #0A0A0A 100%);
	--hb-g-rust-fade: linear-gradient(180deg, #A2451A 0%, #6B2C10 100%);
	--hb-g-footlight: radial-gradient(120% 80% at 50% 0%, rgba(229,196,80,0.20) 0%, rgba(10,10,10,0) 70%);

	/* Families */
	--hb-f-display: Koulen, Impact, "Haettenschweiler", sans-serif;
	--hb-f-body: Montserrat, "Helvetica Neue", Helvetica, sans-serif;
	--hb-f-ui: Jost, "Futura", "Century Gothic", sans-serif;

	/* Fluid scale. clamp() reproduces theme.json's fluid typography. */
	--hb-s-x-small: clamp(0.7rem, 0.69rem + 0.05vw, 0.75rem);
	--hb-s-small: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem);
	--hb-s-medium: clamp(0.95rem, 0.92rem + 0.12vw, 1.0625rem);
	--hb-s-large: clamp(1.125rem, 1.05rem + 0.31vw, 1.375rem);
	--hb-s-x-large: clamp(1.625rem, 1.44rem + 0.78vw, 2.25rem);
	--hb-s-xx-large: clamp(2.25rem, 1.81rem + 1.88vw, 3.75rem);
	--hb-s-poster: clamp(3rem, 1.83rem + 5vw, 7rem);
	--hb-s-billboard: clamp(3.75rem, 1.77rem + 8.44vw, 10.5rem);

	/* Spacing */
	--hb-sp-10: 0.5rem;
	--hb-sp-20: 1rem;
	--hb-sp-30: 1.5rem;
	--hb-sp-40: 2.5rem;
	--hb-sp-50: 4rem;
	--hb-sp-60: 6rem;
	--hb-sp-70: 9rem;

	/* Shadows */
	--hb-sh-hard: 6px 6px 0 #0A0A0A;
	--hb-sh-gold: 6px 6px 0 #E5C450;
	--hb-sh-marquee: 0 0 0 1px rgba(229,196,80,0.35), 0 18px 50px -20px rgba(229,196,80,0.45);

	/* Local tokens */
	--hb-ink: #0A0A0A;
	/* Figma V2 (24/09) */
	--hb2-amarillo: #FAEC1E;
	--hb2-oro: #E0A500;
	--hb2-naranja: #A2451A;
	--hb2-panel: #1C1C1C;
	--hb-outline: 3px;
	--hb-rule: 1px solid rgba(229, 196, 80, 0.22);
	--hb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--hb-grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}


/* ==========================================================================
   1b · Base. Lo que en WordPress ponia theme.json y aqui hay que escribir.
   Va ANTES de los componentes a proposito: .hb-poster y compania tienen que
   poder pisar estos valores por defecto.
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--hb-c-base);
	color: var(--hb-c-contrast);
	font-family: var(--hb-f-body);
	font-size: var(--hb-s-medium);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: 0.005em;
	/* No overflow-x: hidden here. It hid nothing (audit at six widths is zero
	   without it, 23/09) and it would hide the next overflow instead of
	   letting the audit see it — the same mask the old Nomadic site had. */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* El grano que impide que los negros planos parezcan un tema oscuro por defecto. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: var(--hb-grain-url);
	opacity: 0.055;
	mix-blend-mode: overlay;
}

@media print {
	body::after { display: none; }
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hb-f-display);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0.005em;
	color: var(--hb-c-contrast);
	margin: 0;
}

h1 { font-size: var(--hb-s-poster); }
h2 { font-size: var(--hb-s-xx-large); }
h3 { font-size: var(--hb-s-x-large); }
h4 { font-size: var(--hb-s-large); line-height: 1.1; }

h5 {
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--hb-c-gold);
}

h6 {
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hb-c-muted);
	margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--hb-c-gold); text-decoration: none; }
a:hover { color: var(--hb-c-glow); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--hb-c-gold); outline-offset: 2px; }

/* El boton. En WordPress lo generaba theme.json como .wp-element-button. */
.hb-btn {
	display: inline-block;
	font-family: var(--hb-f-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	/* Figma V2 (24/09): el degradado sale de sus dos colores, #FAEC1E y #E0A500. */
	background: linear-gradient(180deg, var(--hb2-amarillo) 0%, var(--hb2-oro) 100%);
	color: var(--hb-ink);
	border: 1px solid var(--hb2-amarillo);
	border-radius: 5px;
	padding: 0.95rem 1.6rem 0.85rem;
	cursor: pointer;
	transition: filter 0.2s var(--hb-ease), transform 0.2s var(--hb-ease);
}

.hb-btn:hover {
	filter: brightness(1.08);
	color: var(--hb-ink);
	text-decoration: none;
	transform: translateY(-2px);
}

.hb-btn:focus-visible { outline: 3px solid var(--hb-c-glow); outline-offset: 3px; }

/* El contorno del Figma: borde amarillo y el texto en amarillo, sin fondo. */
.hb-btn--outline {
	background: transparent;
	color: var(--hb2-amarillo);
	border-color: var(--hb2-amarillo);
}

.hb-btn--outline:hover {
	background: var(--hb2-amarillo);
	color: var(--hb-ink);
}

/* Sobre naranja el amarillo no llega a 3:1; ahi el contorno va en crema. */
.hb-btn--claro { color: var(--hb-c-contrast); border-color: var(--hb-c-contrast); }
.hb-btn--claro:hover { background: var(--hb-c-contrast); color: var(--hb-ink); }

/* Saltar al contenido. Obligatorio para teclado y lector de pantalla. */
.hb-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hb-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 10000;
	background: var(--hb-c-gold);
	color: var(--hb-c-base);
	padding: 0.75rem 1.25rem;
	font-family: var(--hb-f-ui);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Contenedor de seccion. El equivalente al ancho "wide" de theme.json. */
.hb-wrap {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.hb-section { padding-block: var(--hb-sp-60); }
.hb-section--tall { padding-block: var(--hb-sp-70); }

/* ==========================================================================
   1 · Display typography · the poster voice
   ========================================================================== */

/* Koulen has no lowercase personality to speak of; it wants to be shouted. */
.hb-poster,
h1, h2 {
	text-transform: uppercase;
}

.hb-poster {
	font-family: var(--hb-f-display);
	line-height: 0.82;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/* The signature move: a headline knocked out in gold with the logo's hard
   offset shadow.
   The shadow is burnt orange, not black, on purpose: this treatment sits on
   near-black sections as often as it sits on a photo, and a black shadow on a
   black background is no shadow at all. */
.hb-knockout {
	color: var(--hb-c-gold);
	text-shadow: 5px 5px 0 var(--hb-c-rust-deep);
}

.hb-eyebrow {
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--hb-c-gold);
	display: flex;
	align-items: center;
	gap: 0.85rem;
}
.hb-eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: var(--hb-c-rust);
	flex: none;
}
.hb-eyebrow.is-centered { justify-content: center; }
.hb-eyebrow.is-centered::after {
	content: "";
	width: 2.5rem;
	height: 2px;
	background: var(--hb-c-rust);
	flex: none;
}

.hb-lede {
	font-size: var(--hb-s-large);
	line-height: 1.5;
	color: var(--hb-c-contrast);
	max-width: 46ch;
	/* Every sibling in a constrained group is a wide-size block that WordPress
	   centres with `margin: auto !important`. This one is deliberately narrower
	   for readability, so centring would drift it away from the headline and
	   `margin-left: 0` would slam it against the padding edge — 83px left of
	   everything else at 1440px. Reproducing the siblings' own offset keeps it
	   in line, and derives it rather than hardcoding a number.
	   Only visible under real WordPress; the static preview never shows it. */
	margin-inline: max(0px, (100% - var(--wp--style--global--wide-size, 1240px)) / 2) auto !important;
}
.has-text-align-center .hb-lede,
.hb-lede.has-text-align-center { margin-inline: auto !important; }

.hb-muted { color: var(--hb-c-muted); }

/* A small label that has to stay readable when it lands on a photograph. */
.hb-tag {
	display: inline-block;
	background: rgba(10, 10, 10, 0.78);
	border: 1px solid rgba(229, 196, 80, 0.4);
	color: var(--hb-c-gold);
	padding: 0.45rem 0.9rem;
	font-family: var(--hb-f-ui);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
}

/* ==========================================================================
   2 · Surfaces · butcher paper, stage light, hard outlines
   ========================================================================== */

.hb-panel-rust {
	position: relative;
	background-color: var(--hb-c-rust);
	background-image: image-set(
		url("../images/newsletter-bg.webp") 1x
	);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}
.hb-panel-rust::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.05) 40%, rgba(10, 10, 10, 0.45) 100%);
	z-index: -1;
}

.hb-panel-stage {
	position: relative;
	background: var(--hb-c-stage);
}

.hb-panel-stage__foto {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

/* A footlight bleeding up from the bottom edge, like a stage lip.
   Va ENCIMA de la foto y debajo del texto: antes iba a z-index -1 porque
   detrás solo había un color plano. */
.hb-panel-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(rgba(10, 10, 10, 0.72), rgba(10, 10, 10, 0.72)),
		radial-gradient(120% 70% at 50% 108%, rgba(77, 58, 106, 0.55) 0%, rgba(10, 10, 10, 0) 68%);
}

.hb-panel-stage > .hb-wrap { position: relative; z-index: 3; }
.hb-panel-stage > picture { position: static; }

/* ── Panel con la comica a la izquierda de la foto ──────────────────────────
   El PDF del 17/09 pedia «replace image so title isn't blocking the comic».
   No hacia falta otra foto: en `upcoming-shows-bg` ella esta al 43 % del
   ancho y quien la tapaba era el texto, centrado sobre toda la caja.

   Asi que el texto se va a la mitad derecha —donde solo hay publico y pared—
   y el velo, que antes era plano sobre todo el panel, se inclina: casi
   transparente a la izquierda para que se la vea, opaco a la derecha para que
   el titular siga leyendose. Se mantiene un velo base tenue en toda la caja
   porque sin el, en una foto clara, el texto blanco se pierde igual.

   El corte va en `em` sobre el contenedor y no en px: si manana el panel vive
   en una columna estrecha, vuelve solo a una sola columna. */
@media (min-width: 62rem) {
	.hb-panel-stage--comica-izq > .hb-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.hb-panel-stage--comica-izq > .hb-wrap > * { grid-column: 2; }

	.hb-panel-stage--comica-izq::before {
		background:
			linear-gradient(90deg,
				rgba(10, 10, 10, 0.18) 0%,
				rgba(10, 10, 10, 0.30) 34%,
				rgba(10, 10, 10, 0.78) 52%,
				rgba(10, 10, 10, 0.86) 100%),
			radial-gradient(120% 70% at 50% 108%, rgba(77, 58, 106, 0.55) 0%, rgba(10, 10, 10, 0) 68%);
	}
}

/* Por debajo de 62rem el texto ocupa el ancho entero y no hay hueco que
   repartir, asi que se reencuadra la foto: la comica sube y el texto cae
   sobre el publico del primer plano, que ya estaba oscuro. */
@media (max-width: 61.999rem) {
	.hb-panel-stage--comica-izq .hb-panel-stage__foto { object-position: 46% 18%; }
}

/* The logo's language, turned into a container: thick black keyline, hard
   offset shadow, no blur anywhere. */
.hb-card {
	position: relative;
	/* One step lighter than the page, or the black keyline below is invisible
	   and the card stops reading as a card at all. */
	background: var(--hb-c-stage);
	border: var(--hb-outline) solid var(--hb-ink);
	box-shadow: 6px 6px 0 var(--hb-c-rust);
	transition: transform 0.18s var(--hb-ease), box-shadow 0.18s var(--hb-ease);
}
.hb-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 10px 10px 0 var(--hb-c-gold);
}
.hb-card--gold { box-shadow: 6px 6px 0 var(--hb-c-gold); }
.hb-card--flat { box-shadow: none; }
.hb-card--flat:hover { transform: none; box-shadow: none; }

.hb-rule { border: 0; border-top: var(--hb-rule); margin: 0; }

/* Slight rotations. Used sparingly — three degrees is a poster, ten is a mess. */
.hb-tilt-l { transform: rotate(-1.6deg); }
.hb-tilt-r { transform: rotate(1.4deg); }

/* ==========================================================================
   3 · Marquee · the scrolling club sign
   ========================================================================== */

.hb-marquee {
	position: relative;
	overflow: hidden;
	background: var(--hb-c-gold);
	border-top: var(--hb-outline) solid var(--hb-ink);
	border-bottom: var(--hb-outline) solid var(--hb-ink);
	padding: 0.7rem 0;
	--hb-marquee-duration: 38s;
}
.hb-marquee__track {
	display: flex;
	width: max-content;
	animation: hb-scroll var(--hb-marquee-duration) linear infinite;
}
.hb-marquee:hover .hb-marquee__track { animation-play-state: paused; }
.hb-marquee__group {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	flex: none;
}
.hb-marquee__item {
	font-family: var(--hb-f-display);
	font-size: clamp(1.1rem, 2.4vw, 1.7rem);
	/* Koulen's caps overshoot a line-height of 1 and the band's overflow:hidden
	   then shaves the tops off every letter. */
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--hb-ink);
	white-space: nowrap;
}
.hb-marquee__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--hb-c-rust-deep);
	flex: none;
}
@keyframes hb-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.hb-marquee__track { animation: none; }
	.hb-marquee { overflow-x: auto; }
}

/* ==========================================================================
   4 · Ticket stubs · the show listings
   ========================================================================== */

.hb-tickets {
	display: grid;
	gap: 1.25rem;
}

.hb-ticket {
	display: grid;
	grid-template-columns: minmax(6.5rem, 8rem) 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	background: var(--hb-c-base);
	border: var(--hb-outline) solid var(--hb-ink);
	box-shadow: 6px 6px 0 rgba(229, 196, 80, 0.85);
	padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
	transition: transform 0.18s var(--hb-ease), box-shadow 0.18s var(--hb-ease);
}
.hb-ticket:hover {
	transform: translate(-3px, -3px);
	box-shadow: 10px 10px 0 var(--hb-c-gold);
}

/* The date block, and the perforation that makes it read as a stub. */
.hb-ticket__date {
	position: relative;
	text-align: center;
	padding-right: clamp(1rem, 3vw, 2.25rem);
	font-family: var(--hb-f-display);
	line-height: 0.85;
	color: var(--hb-c-gold);
}
.hb-ticket__date::after {
	content: "";
	position: absolute;
	top: -1.25rem;
	bottom: -1.25rem;
	right: 0;
	width: 0;
	border-right: 2px dashed rgba(229, 196, 80, 0.45);
}
.hb-ticket__month {
	display: block;
	font-size: 1.05rem;
	letter-spacing: 0.18em;
	/* El rust puro sobre el negro se queda en 3,2:1 y la etiqueta es texto pequeno:
	   el `ham` es de la misma familia y llega a 5,3:1. Auditado el 23/08/2026. */
	color: var(--hb-c-ham);
}
.hb-ticket__day {
	display: block;
	font-size: clamp(2.6rem, 6vw, 3.6rem);
}
.hb-ticket__year {
	display: block;
	font-family: var(--hb-f-ui);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: var(--hb-c-muted);
	margin-top: 0.25rem;
}

.hb-ticket__title {
	font-family: var(--hb-f-display);
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.hb-ticket__meta {
	font-family: var(--hb-f-ui);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hb-c-muted);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
}
.hb-ticket__meta span::after {
	content: "·";
	margin-left: 0.55rem;
	color: var(--hb-c-rust);
}
.hb-ticket__meta span:last-child::after { content: none; }

.hb-ticket__cta { justify-self: end; }

.hb-ticket--sold { opacity: 0.55; }
.hb-ticket--sold .hb-ticket__cta { pointer-events: none; }

@media (max-width: 760px) {
	.hb-ticket {
		grid-template-columns: minmax(5rem, auto) 1fr;
		row-gap: 1rem;
	}
	.hb-ticket__cta { grid-column: 1 / -1; justify-self: stretch; }
	.hb-ticket__cta .hb-btn { flex: 1; display: block; text-align: center; }
}

/* ==========================================================================
   5 · Contact sheet · the gallery
   ========================================================================== */

.hb-sheet {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1rem;
}
.hb-sheet figure,
.hb-sheet figure {
	margin: 0;
	overflow: hidden;
	border: var(--hb-outline) solid var(--hb-ink);
	background: var(--hb-c-stage);
	transition: transform 0.25s var(--hb-ease), filter 0.25s var(--hb-ease);
	filter: saturate(0.85) contrast(1.05);
}
.hb-sheet img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.hb-sheet figure:hover,
.hb-sheet figure:hover {
	transform: scale(1.03) rotate(-0.8deg);
	filter: saturate(1.15) contrast(1.05);
	z-index: 2;
	position: relative;
}

/* Category chips above the sheet. */
.hb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
/* Los chips pasaron de <a> a <button> al hacerlos filtrar de verdad, y estas
   reglas apuntaban solo a `a`: los botones se quedaron con el aspecto por
   defecto del navegador —gris, texto negro, 16px— en toda la galeria. El
   WordPress si tenia el bloque para `button`; esta hoja no. 23/08/2026. */
.hb-chips a,
.hb-chips button {
	font-family: var(--hb-f-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hb-c-contrast);
	background: transparent;
	/* min-height en vez de perseguirlo con padding: el objetivo tactil comodo
	   son 44px y asi queda dicho, no calculado. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.1rem;
	border: 2px solid rgba(229, 196, 80, 0.35);
	border-radius: 0;
	cursor: pointer;
	transition: background 0.15s var(--hb-ease), color 0.15s var(--hb-ease), border-color 0.15s var(--hb-ease);
}
.hb-chips a:hover,
.hb-chips a[aria-current="true"],
.hb-chips button:hover,
.hb-chips button[aria-pressed="true"] {
	background: var(--hb-c-gold);
	border-color: var(--hb-c-gold);
	color: var(--hb-ink);
	text-decoration: none;
}
.hb-chips button:focus-visible {
	outline: 3px solid var(--hb-c-glow);
	outline-offset: 2px;
}

/* ==========================================================================
   6 · Stats · the About numbers
   ========================================================================== */

.hb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 0;
	border: var(--hb-outline) solid var(--hb-ink);
	background: var(--hb-c-base);
}
.hb-stat {
	padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
	text-align: center;
	border-right: var(--hb-rule);
}
.hb-stat:last-child { border-right: 0; }
.hb-stat__num {
	display: block;
	font-family: var(--hb-f-display);
	font-size: clamp(2.75rem, 7vw, 4.25rem);
	line-height: 0.85;
	color: var(--hb-c-gold);
	font-variant-numeric: tabular-nums;
}
.hb-stat__label {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--hb-f-ui);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hb-c-muted);
}
/* Placeholder numbers, until the real ones arrive from the client. */
.hb-stat__num[data-placeholder] { color: var(--hb-c-rust); }
.hb-stat__num[data-placeholder]::after {
	content: "?";
	font-size: 0.5em;
	vertical-align: super;
}

@media (max-width: 700px) {
	.hb-stat { border-right: 0; border-bottom: var(--hb-rule); }
	.hb-stat:last-child { border-bottom: 0; }
}

/* ==========================================================================
   7 · Header and navigation
   ========================================================================== */

.hb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(229, 196, 80, 0.18);
}

.hb-header img {
	height: clamp(44px, 6vw, 62px);
	width: auto;
}

.hb-nav a {
	justify-content: center;
	min-width: 44px;
	/* Figma V2: el menu en Koulen, blanco, y la pagina actual en amarillo. */
	font-family: var(--hb-f-display);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hb-c-contrast);
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	transition: color 0.15s var(--hb-ease), border-color 0.15s var(--hb-ease);
}
.hb-nav a:hover,
.hb-nav a[aria-current="page"] {
	color: var(--hb2-amarillo);
	border-bottom-color: transparent;
	text-decoration: none;
}

/* ==========================================================================
   8 · Footer
   ========================================================================== */

.hb-social {
	/* Es un <ul>: sin esto salen las viñetas colgando entre los iconos. */
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
.hb-social a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid rgba(229, 196, 80, 0.35);
	color: var(--hb-c-contrast);
	transition: background 0.15s var(--hb-ease), color 0.15s var(--hb-ease), transform 0.15s var(--hb-ease);
}
.hb-social a:hover {
	background: var(--hb-c-gold);
	border-color: var(--hb-c-gold);
	color: var(--hb-ink);
	transform: translateY(-2px);
}
.hb-social svg { width: 20px; height: 20px; fill: currentColor; }

.hb-colophon {
	font-family: var(--hb-f-ui);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--hb-c-muted);
}

/* ==========================================================================
   9 · Forms · newsletter and contact
   ========================================================================== */

.hb-form {
	display: grid;
	gap: 1rem;
}
.hb-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 1rem;
}
.hb-field {
	display: grid;
	gap: 0.4rem;
}
.hb-field > span {
	font-family: var(--hb-f-ui);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hb-c-muted);
}
.hb-form input[type="text"],
.hb-form input[type="email"],
.hb-form input[type="tel"],
.hb-form select,
.hb-form textarea {
	/* WordPress does not apply a border-box reset to raw form controls, so
	   `width: 100%` plus padding and border overflowed the viewport by exactly
	   36px on a phone. The static preview hid this: its shim resets every
	   element, WordPress does not. */
	box-sizing: border-box;
	width: 100%;
	font-family: var(--hb-f-body);
	font-size: 1rem;
	color: var(--hb-c-contrast);
	background: rgba(255, 255, 255, 0.04);
	border: 2px solid rgba(229, 196, 80, 0.3);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	transition: border-color 0.15s var(--hb-ease), background 0.15s var(--hb-ease);
}
.hb-form input::placeholder,
.hb-form textarea::placeholder { color: rgba(154, 139, 126, 0.75); }
.hb-form input:focus,
.hb-form select:focus,
.hb-form textarea:focus {
	border-color: var(--hb-c-gold);
	background: rgba(255, 255, 255, 0.07);
}
.hb-form textarea { min-height: 9rem; resize: vertical; }

.hb-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--hb-c-muted);
}
.hb-consent input { margin-top: 0.2rem; accent-color: var(--hb-c-gold); }

.hb-form button {
	justify-self: start;
	/* Figma V2: el mismo boton que .hb-btn. Esta regla le gana por especificidad. */
	font-family: var(--hb-f-display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hb-ink);
	background: linear-gradient(180deg, var(--hb2-amarillo) 0%, var(--hb2-oro) 100%);
	border: 1px solid var(--hb2-amarillo);
	border-radius: 5px;
	padding: 0.95rem 2rem 0.85rem;
	cursor: pointer;
	transition: filter 0.15s var(--hb-ease), transform 0.15s var(--hb-ease);
}
.hb-form button:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* El aviso de que el formulario no envía lo pone ahora un <p class="hb-notice">
   ENCIMA del formulario, no un ::after debajo del botón. Dos razones: se lee
   antes de rellenar y no después, y es texto de verdad en el DOM — el contenido
   generado por CSS lo saltan algunos lectores de pantalla.
   El atributo data-unwired se queda: es lo que marca el formulario como no
   conectado, y es lo que hay que buscar para quitarlo todo cuando se conecte. */
.hb-form[data-unwired] { position: relative; }

/* Forms sitting on the burnt-orange panel need their own contrast: the muted
   grey that works on black turns to mud on rust. */
.hb-panel-rust .hb-field > span,
.hb-panel-rust .hb-consent,
	color: var(--hb-c-contrast);
}
.hb-panel-rust .hb-form input,
.hb-panel-rust .hb-form select,
.hb-panel-rust .hb-form textarea,
.hb-form input,
.hb-form select,
.hb-form textarea {
	background: rgba(10, 10, 10, 0.42);
	border-color: rgba(247, 241, 232, 0.45);
}
.hb-panel-rust .hb-form input::placeholder,
.hb-form input::placeholder {
	color: rgba(247, 241, 232, 0.65);
}

/* ==========================================================================
/* ==========================================================================
   10 · Piezas propias del sitio estatico
   El tema de bloques resolvia la cabecera con el bloque de navegacion y el pie
   con columnas. Aqui son HTML normal, asi que la maquetacion se escribe.
   ========================================================================== */

.hb-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.hb-header__logo { display: block; line-height: 0; }
.hb-header__logo img { width: 120px; height: auto; }

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

/* El menu de movil. Sin JavaScript el menu se queda visible, que es el modo
   correcto de fallar: se ve todo, solo que apilado. */
.hb-burger {
	display: none;
	align-items: center;
	gap: 0.6rem;
	background: none;
	border: 2px solid rgba(247, 241, 232, 0.3);
	border-radius: 2px;
	padding: 0.55rem 0.9rem;
	color: var(--hb-c-contrast);
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
}

.hb-burger__box {
	width: 18px;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (max-width: 860px) {
	.hb-burger { display: inline-flex; }

	.hb-nav {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		padding-top: 1rem;
	}

	/* Solo se oculta cuando el JS ha tomado el control y ha marcado el estado. */
	.hb-nav[data-collapsed="true"] { display: none; }
}

.hb-footer {
	background-color: var(--hb-c-stage);
	border-top: 3px solid var(--hb-c-rust);
	padding-block: var(--hb-sp-50) var(--hb-sp-40);
}

.hb-footer__inner {
	display: grid;
	grid-template-columns: 38fr 26fr 26fr;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 860px) {
	.hb-footer__inner { grid-template-columns: 1fr; }
}

.hb-footer__col h5 { margin: 0 0 1.25rem; }
.hb-footer__col p { font-size: var(--hb-s-small); line-height: 1.6; }
.hb-footer__logo { width: 150px; height: auto; margin-bottom: 1.25rem; }

.hb-footer__menu {
	display: grid;
	gap: 0.65rem;
}

.hb-footer__menu a {
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hb-c-contrast);
}

.hb-footer__menu a:hover { color: var(--hb-c-gold); }

.hb-footer .hb-rule { margin: var(--hb-sp-40) 0 var(--hb-sp-30); }

.hb-footer__colophon {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

/* El heroe. En WordPress era un bloque de portada; aqui, una seccion con foto. */
.hb-hero {
	position: relative;
	min-height: 88vh;
	display: grid;
	align-items: center;
	/* Sin `background-color`: la foto va debajo y este color la tapaba.
	   Y sin `isolation`, que no hace falta cuando las capas usan z-index
	   positivos y ordenados. */
}

/* Las tres capas del hero, de abajo arriba: foto (1), velo (2), texto (3). */
.hb-hero__foto {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.hb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(10, 10, 10, 0.7);
}

.hb-hero > .hb-wrap { position: relative; z-index: 3; }
.hb-hero > picture { position: static; }

/* La rejilla de dos columnas de "What's Hambone". */
.hb-split {
	display: grid;
	grid-template-columns: 44fr 52fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (max-width: 860px) {
	.hb-split { grid-template-columns: 1fr; }
}

/* La fila de tarjetas: CTA, formatos y servicios. */
.hb-cards {
	display: grid;
	/* 22rem y no 260px, y el motivo es sutil: con 260 la rejilla creaba CUATRO
	   pistas a 1280 y `auto-fit` colapsaba la cuarta a 0 px... pero los huecos
	   de esa pista colapsada SIGUEN contando. Resultado: tres tarjetas con
	   48 px muertos a la derecha, que se leen como «esto esta descuadrado» y
	   no como una rejilla. Con 22rem solo se crean tres pistas y llegan al
	   borde. Medido a 1280 y a 1440. */
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	gap: var(--hb-sp-30);
	align-items: stretch;
}

.hb-cards--two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.hb-center { text-align: center; }
.hb-stack > * + * { margin-top: 1.25rem; }

/* Los chips de la galeria. Aqui SI filtran de verdad, con JavaScript, que es
   lo que el comentario #22 pedia y en WordPress se quedo pendiente. */
.hb-sheet figure[hidden] { display: none; }

/* El aviso de que los formularios todavia no envian. Deliberadamente visible:
   un formulario que traga datos en silencio es peor que uno que avisa. */
.hb-notice {
	border: 2px dashed rgba(229, 196, 80, 0.5);
	border-radius: 2px;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.5rem;
	font-family: var(--hb-f-ui);
	font-size: var(--hb-s-x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hb-c-gold);
}

/* Utilidades de tamaño. En WordPress esto lo daba el selector de tamaño del
   bloque ("billboard", "poster"); aqui hay que poder pedirlo por clase, porque
   la segunda linea del titular no siempre es un heading — a veces es un <p>
   para no encadenar dos h1 y romper la jerarquia del documento. */
.hb-t-billboard { font-size: var(--hb-s-billboard); line-height: 0.9; }
.hb-t-poster    { font-size: var(--hb-s-poster);    line-height: 0.9; }
.hb-t-xxl       { font-size: var(--hb-s-xx-large);  line-height: 0.95; }

/* Objetivos táctiles del menú en pantallas de dedo. Ver la nota equivalente en
   el tema de WordPress: 16px de alto es la mitad de lo aceptable. */
@media (max-width: 1024px) {
	.hb-nav a { display: inline-block; padding-block: 1.15rem; }
	.hb-footer__menu a { display: inline-block; padding-block: 0.9rem; }
}


/* ── Correcciones del 18/09/2026 ──────────────────────────────────────────
   Los antetítulos eran <h5> y <h6> puestos por encima de un <h2>. Visualmente
   daba igual; para un lector de pantalla rompía el índice de la página, que es
   como alguien ciego la recorre. Ahora son <p> y el estilo vive aquí.        */

.hb-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--hb-font-heading, inherit);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Todo lo que se pulsa, con tamaño de dedo. Había 72 enlaces de 45x36 y las
   casillas medían 13x13: en un móvil eso se falla una vez de cada tres. */
.hb-nav a,
.hb-footer a,
.hb-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Y la excepción, que es la lección: `.hb-footer a` es un selector ANCHO y se
   llevó por delante el `display: grid` de los iconos sociales, que ya tenían
   su caja de 44 px. Sin la rejilla no había centrado, y los cuatro iconos se
   quedaron a 2 px del borde izquierdo y 22 del derecho — parecían recortados.
   Una regla genérica sobre un contenedor pisa los componentes que hay dentro:
   si se añade una, hay que mirar qué había ya ahí. */
.hb-social a {
  display: grid;
  place-items: center;
}

.hb-form input[type="checkbox"],
.hb-form input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--hb-accent, currentColor);
}
/* La casilla en sí no puede medir 44 px sin verse ridícula, así que el
   objetivo táctil es su ETIQUETA, que es lo que de verdad se pulsa. */
.hb-form label:has(input[type="checkbox"]),
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

/* El título de la sección de servicios, que llevaba el margen en línea. */
.hb-servicios-titulo { margin-bottom: 2.5rem; }

/* El título de página, para las cinco que no traen h1 en sus secciones. */
.hb-pagehead { padding-block: 3.5rem 1.5rem; }
.hb-pagehead h1 { margin: 0; }

/* Sustituyen a tres `style=` en línea que había en las secciones. Un tamaño
   en el marcado es un tamaño que nadie encuentra cuando hay que cambiarlo. */
.hb-wrap--estrecho { max-width: 760px; }
.hb-mb-2 { margin-bottom: 2rem; }

/* La trampa de spam. `display:none` la saltan algunos robots: esto la saca de
   la pantalla sin quitarla del árbol, y `tabindex="-1"` evita que la pille el
   tabulador de alguien que navega con teclado. */
.hb-form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hb-mt-25 { margin-top: 2.5rem; }
.hb-mb-25 { margin-bottom: 2.5rem; }

/* ── La lista de correo, con la foto al lado ────────────────────────────────
   Del PDF del 17/09. Dos columnas a partir de 56rem, una sola por debajo.

   La foto va DESPUES en el HTML, no antes: asi, cuando el diseno se pliega a
   una columna en movil, el formulario queda arriba —que es a lo que viene la
   gente— y la foto debajo, sin tener que reordenar nada con `order`, que es
   lo que rompe el orden de tabulacion del teclado.

   `align-self: stretch` + `object-fit: cover` hacen que la foto llene su
   columna sea cual sea el alto del formulario, sin deformarse. */
.hb-lista-correo {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.hb-lista-correo__texto > * + * { margin-top: 1rem; }

.hb-lista-correo__foto {
	margin: 0;
	align-self: stretch;
	border: var(--hb-outline) solid var(--hb-ink);
	box-shadow: 6px 6px 0 var(--hb-c-gold);
	overflow: hidden;
	min-height: 14rem;
}
.hb-lista-correo__foto picture,
.hb-lista-correo__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 56rem) {
	.hb-lista-correo { grid-template-columns: 1.15fr 0.85fr; }
}

/* ── «Our services», en rejilla 2x2 ─────────────────────────────────────────
   PDF del 17/09: la maqueta las pinta como cuatro tejas en cuadro, no como
   cuatro tarjetas en fila. En fila, la cuarta caia sola a una segunda linea y
   la seccion se leia como «tres servicios y un sobrante».

   `minmax(min(20rem, 100%), 1fr)` da DOS columnas en cuanto caben y una sola
   cuando no: la rejilla decide, no una media query.

   Las tejas alternan ocre y oscuro por posicion, con `:nth-child`, asi que
   anadir una quinta no obliga a tocar ninguna clase.

   La altura minima esta puesta para que la teja tenga sitio para la foto que
   falta. Cuando lleguen las cuatro, se mete el <picture> dentro y se le anade
   `position:absolute; inset:0; object-fit:cover` con el texto por delante: la
   caja ya tiene la forma correcta. */
.hb-servicios {
	display: grid;
	/* 26rem, no 20: con 20 cabian TRES tejas a 1280 y la cuarta caia sola a una
	   segunda fila, que es justo el «tres y un sobrante» que se venia a quitar.
	   Con 26 caben dos y solo dos, asi que sale el cuadro 2x2 de la maqueta, y
	   por debajo de ~880 px se pliega solo a una columna. */
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
	gap: var(--hb-sp-30);
}
.hb-teja {
	position: relative;
	display: grid;
	align-content: end;
	gap: 0.4rem;
	min-height: 11rem;
	padding: var(--hb-sp-30);
	overflow: hidden;
}
.hb-teja:nth-child(odd)  { background: var(--hb-c-stage); }
.hb-teja:nth-child(even) { background: var(--hb-c-rust); color: var(--hb-c-contrast); }
.hb-teja:nth-child(even) .hb-poster,
.hb-teja:nth-child(even) .hb-muted { color: inherit; }
.hb-teja:nth-child(even) .hb-muted { opacity: 0.85; }

/* ── El equipo, en burbuja ──────────────────────────────────────────────────
   Edu, 22/09: «coger bien las fotos con burbujas, no rectangular».

   El retrato es 316x408 —vertical— y el circulo es cuadrado, asi que la foto
   NO se deforma: se recorta con `object-fit: cover` y se sube el encuadre a
   `object-position: 50% 18%`, que es donde cae la cara en un retrato de
   estudio. Estirarla a cuadrado habria ensanchado a los tres.

   El aro doble —oro fuera, tinta dentro— es el unico sitio de la web donde
   hay un circulo, y es a proposito: el resto del diseno es cartel de esquina
   dura, asi que la burbuja solo se gana su excepcion aqui, donde hay caras.

   `min(14rem, 60cqi)` mide contra la TARJETA, no contra la ventana: si manana
   el equipo se mete en una columna estrecha, el circulo encoge solo. */
.hb-equipo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}

.hb-persona {
	container-type: inline-size;
	display: grid;
	/* `start`, no el `stretch` por defecto: una rejilla con filas automaticas
	   reparte el hueco sobrante ENTRE las filas, asi que la persona con una
	   linea menos de biografia bajaba su foto y su nombre unos pixeles y las
	   tres burbujas dejaban de estar a la misma altura. */
	align-content: start;
	justify-items: center;
	text-align: center;
	gap: 0.5rem;
}

.hb-persona__foto {
	margin: 0 0 0.6rem;
	width: min(14rem, 60cqi);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--hb-c-stage);
	/* Dos aros concentricos sin una sola sombra difusa: el interior de tinta
	   separa la foto del oro, que si no se ensucia contra un retrato oscuro. */
	box-shadow:
		0 0 0 var(--hb-outline) var(--hb-ink),
		0 0 0 calc(var(--hb-outline) + 5px) var(--hb-c-gold);
}
.hb-persona__foto picture,
.hb-persona__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
}

.hb-persona h3 { margin: 0; }
.hb-persona .hb-kicker { color: var(--hb-c-gold); margin: 0; }
.hb-persona .hb-muted { margin: 0; max-width: 34ch; }

/* ── Las tres tarjetas de «Work with us», con foto ──────────────────────────
   Del PDF del 17/09. Cada una de un color y con una foto dentro.

   El texto de la tarjeta NO hereda el color de fondo: cada modificador fija
   su propio color de texto, calculado contra ese fondo. El ocre con crema da
   5,50:1 y el oro con tinta 11,8:1; el `--hb-c-ham` es mas claro, asi que
   sobre el va tinta, no crema, o se queda en 2,9:1 y no se lee.

   `margin-top:auto` en el enlace final alinea los tres «Contact us» a la
   misma altura aunque un texto sea dos lineas mas largo. */
.hb-cta {
	display: grid;
	align-content: start;
	gap: 0.85rem;
	padding: var(--hb-sp-30);
}
.hb-cta > p:last-child { margin-top: auto; padding-top: 0.5rem; }

.hb-cta__foto {
	margin: 0.25rem 0 0;
	border: var(--hb-outline) solid var(--hb-ink);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.hb-cta__foto picture,
.hb-cta__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-cta--rust { background: var(--hb-c-rust);  color: var(--hb-c-contrast); }
.hb-cta--ham  { background: var(--hb-c-ham);   color: var(--hb-ink); }
.hb-cta--gold { background: var(--hb-c-gold);  color: var(--hb-ink); }

/* Dentro de una tarjeta de color, el texto tenue y los enlaces heredan: si no,
   el gris `--hb-c-muted` sobre ocre se queda en 2,1:1. */
/* `.hb-poster` y `.hb-kicker` fijan su propio color, asi que heredar hay que
   pedirlo: sin esta linea el titular «Perform» salia crema sobre oro, 1,52:1.
   Lo cazo la auditoria de contraste, no el ojo — sobre oro el crema se lee
   «claro», no «ilegible», hasta que lo mides. */
.hb-cta .hb-poster { color: inherit; }
.hb-cta .hb-muted,
.hb-cta .hb-kicker { color: inherit; opacity: 0.85; }
/* Todo enlace hereda el color de la tarjeta MENOS el boton, que trae su propio
   par fondo/texto ya medido. Sin el `:not`, `.hb-cta a` (0,2,0) le ganaba a
   `.hb-btn` (0,1,0) y el boton salia crema sobre oro: 1,52:1. */
.hb-cta a:not(.hb-btn) { color: inherit; }
.hb-cta--ham .hb-btn,
.hb-cta--gold .hb-btn { background: var(--hb-ink); color: var(--hb-c-contrast); }

/* ── «Work with us», como el Figma (.hb-ww) ─────────────────────────────────────
   La maqueta del Figma (revisada el 24/09): esquinas redondas, titulo y texto
   centrados, la foto a sangre en la mitad de abajo fundiendose con el color
   de la tarjeta, el publico teñido de fondo y el mismo «Contact us» dorado en
   las tres. No lleva el trazo negro ni la sombra dura de `.hb-card`.

   Contraste, medido: crema sobre ocre 5,50:1; tinta sobre `--hb-c-ham` y
   sobre oro, 6,9:1 y 11,8:1. El fondo teñido va al 14 % y en luminosidad,
   asi que no mueve esas cifras de forma apreciable. El boton lleva su propio
   par oro/negro y va encima de la foto, nunca encima de texto. */
.hb-ww {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	min-height: 30rem;
	padding: var(--hb-sp-30) var(--hb-sp-30) 0;
	border-radius: 16px;
	text-align: center;
}
.hb-ww > p { max-width: 30ch; }

.hb-ww__fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.14;
	mix-blend-mode: luminosity;
}
.hb-ww__fondo img { width: 100%; height: 100%; object-fit: cover; }

/* La foto ocupa todo lo que queda hasta el borde inferior, y la parte de
   arriba se funde con el color de la tarjeta en vez de cortarse en seco. */
.hb-ww__foto {
	display: block;
	flex: 1;
	width: calc(100% + 2 * var(--hb-sp-30));
	margin: 0.5rem calc(-1 * var(--hb-sp-30)) 0;
	min-height: 15rem;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%);
	        mask-image: linear-gradient(to bottom, transparent, #000 28%);
}
.hb-ww__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.hb-ww__sello {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	margin: 1rem 0 6rem;
	padding: 1.25rem 1.5rem;
	border: 2px solid var(--hb-c-gold);
	border-radius: 12px;
	background: rgb(0 0 0 / 0.12);
}
.hb-ww__sello img { width: 9rem; height: auto; }
.hb-ww__sello .hb-ww__tinder { width: 13rem; } /* 208 px, el tamaño del Figma */

/* El boton va anclado abajo, sobre la foto, a la misma altura en las tres. */
.hb-ww__accion {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5rem;
	margin: 0;
	max-width: none !important;
}
.hb-ww .hb-btn {
	background: linear-gradient(180deg, var(--hb-c-glow), var(--hb-c-gold) 55%);
	color: var(--hb-ink);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}


/* `.hb-poster` fija su propio color: heredar hay que pedirlo, o «Perform»
   sale crema sobre oro, 1,52:1. */
.hb-ww .hb-poster { color: inherit; margin: 0; }

/* ── Las dos tarjetas de «Powered by» ───────────────────────────────────────
   Del PDF del 17/09: la maqueta las pinta una en ocre y otra en oscuro, con
   el logo de cada casa arriba y un boton «Click here» abajo.

   El crema sobre el ocre da 5,50:1 —calculado, no estimado—, asi que pasa el
   4,5:1 de texto normal. El oro del boton sobre ocre NO lo pasaria, por eso
   el boton de esa tarjeta hereda el estilo normal y no se le cambia el color.

   `align-content: start` y el `margin-top:auto` del ultimo parrafo hacen que
   los dos botones queden a la misma altura aunque un texto sea mas largo:
   sin eso, una tarjeta con dos parrafos y otra con tres se ven torcidas. */
.hb-socio {
	display: grid;
	align-content: start;
	gap: 1.1rem;
	padding: var(--hb-sp-30);
}
.hb-socio > p:last-child { margin-top: auto; padding-top: 0.4rem; }

.hb-socio--rust { background: var(--hb-c-rust); }
.hb-socio--ink  { background: var(--hb-c-stage); }

/* El logo manda en la tarjeta, asi que se le da altura fija y se centra: dos
   logos de proporciones distintas alineados por su caja, no por su ancho. */
.hb-socio__logo {
	display: flex;
	align-items: center;
	min-height: 5.5rem;
	margin: 0;
}
.hb-socio__logo img {
	width: auto;
	max-width: min(100%, 17rem);
	height: auto;
	max-height: 5.5rem;
}

/* Lo que se enseña cuando no hay ninguna fecha publicable. Decirlo es mejor
   que inventarse una: una web que anuncia un show que ya pasó miente. */
.hb-sin-fechas {
  padding: 1.5rem;
  border: 2px dashed currentColor;
  border-radius: 4px;
  opacity: 0.85;
}


/* ==========================================================================
   Home V2 · la maqueta del Figma del 24/09
   Todo lo nuevo cuelga de `v2-`. Las imagenes vienen del Figma exportadas
   capa a capa (static/assets/images/v2/); los recortes llevan transparencia.
   ========================================================================== */

.v2-seccion { position: relative; isolation: isolate; padding-block: var(--hb-sp-60); overflow: hidden; }
/* El fondo va en la capa 0 y el contenido en la 1. Con z-index negativo
   detras de una seccion con color de fondo, la foto se descarga y no se ve
   (lo caza img-tapada). */
.v2-fondo {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%; object-fit: cover;
}
.v2-fondo--tenue { opacity: 0.6; filter: grayscale(1); }
.v2-seccion > .hb-wrap, .v2-siguenos > .hb-wrap { position: relative; z-index: 1; }

.v2-titulo {
	margin: 0 0 var(--hb-sp-40);
	font-family: var(--hb-f-display);
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	text-align: center;
	color: var(--hb-c-contrast);
}
.v2-titulo--izq { text-align: left; }
.v2-centro { text-align: center; margin: var(--hb-sp-40) 0 0; }
.v2-botones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.v2-ancho { width: 100%; }

/* ── Hero: la foto entera, los botones y el titular de oro a lo ancho ── */
.v2-hero { position: relative; isolation: isolate; min-height: min(56.25vw, 100svh); display: grid; align-items: end; overflow: hidden; }
.v2-hero > picture { display: contents; }
.v2-hero__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.v2-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.85) 100%);
}
.v2-hero__texto { padding: 0 0 clamp(1rem, 3vw, 3rem); }
.v2-hero .v2-botones { padding-left: clamp(1rem, 10vw, 12.5rem); margin-bottom: 0.5rem; }
/* En movil la foto apaisada se queda en 220 px de alto: se le da altura y se
   encuadra al comico, y los botones bajan al pie para no taparle la cara. */
@media (max-width: 700px) {
	.v2-hero { min-height: 30rem; }
	.v2-hero__foto { object-position: 72% 20%; }
	.v2-hero .v2-botones { justify-content: center; padding-left: 0; margin-bottom: 0.75rem; }
}
.v2-hero__titulo {
	margin: 0;
	font-family: var(--hb-f-display);
	font-weight: 400;
	/* Una sola linea de lado a lado, como el Figma, en cualquier ancho. */
	font-size: 8.7vw;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	text-align: center;
	color: var(--hb2-oro);
}

/* ── Upcoming: foto + panel de fechas ── */
.v2-upcoming__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.v2-upcoming__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.v2-upcoming__lista { background: var(--hb2-panel); border-radius: 12px; padding: 0.75rem 1.25rem; max-height: 42rem; overflow-y: auto; }
.v2-upcoming__lista .hb-tickets { gap: 0; }
.v2-upcoming__lista .hb-ticket { background: none; border: 0; box-shadow: none; border-bottom: 1px solid rgb(255 255 255 / 0.12); border-radius: 0; padding: 1rem 0; }
.v2-upcoming__lista .hb-ticket:last-child { border-bottom: 0; }
.v2-upcoming__lista .hb-sin-fechas { margin: 1.5rem 0.5rem; }
@media (max-width: 860px) { .v2-upcoming__rejilla { grid-template-columns: 1fr; } }

/* ── What's Hambone: marco inclinado, comica por delante, jamon asomando ── */
.v2-whats__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.v2-whats__foto { position: relative; aspect-ratio: 656 / 684; max-width: 34rem; width: 100%; }
.v2-whats__marco { position: absolute; inset: 6% 0 12% 4%; transform: rotate(3.39deg); border: 6px solid var(--hb2-oro); border-radius: 8px; overflow: hidden; }
.v2-whats__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-whats__comica { position: absolute; left: -6%; bottom: 0; width: 100%; height: auto; }
.v2-whats__jamon { position: absolute; right: -8%; top: -6%; width: 32%; height: auto; transform: rotate(-8.96deg); }
.v2-whats__texto p { color: var(--hb-c-contrast); max-width: 34rem; }
.v2-whats__texto .v2-botones { margin-top: var(--hb-sp-30); }
@media (max-width: 860px) {
	.v2-whats__rejilla { grid-template-columns: 1fr; }
	.v2-whats__foto { margin-inline: auto; max-width: 26rem; }
}

/* ── La banda naranja ── */
.v2-banda__caja {
	max-width: 50rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
	border-radius: 20px;
	background: linear-gradient(180deg, #E07B1A 0%, var(--hb2-naranja) 100%);
	box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.8);
}
.v2-banda .v2-titulo { margin-bottom: 0; }
.v2-banda .v2-centro { margin-top: var(--hb-sp-30); }

/* ── Sample clips: tres miniaturas pegadas ── */
.v2-clips { background: var(--hb-c-base); }
.v2-clips__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 80rem; }
.v2-clips__lista img { display: block; width: 100%; height: auto; }
.v2-clips__lista a { display: block; transition: filter 0.2s var(--hb-ease); }
.v2-clips__lista a:hover { filter: brightness(1.1); }
@media (max-width: 700px) { .v2-clips__lista { grid-template-columns: 1fr; max-width: 22rem; gap: 0.75rem; } }

/* ── Mosaico a sangre ── */
.v2-mosaico { display: block; }
.v2-mosaico img { display: block; width: 100%; height: auto; }

/* ── Newsletter: caja de ladrillo naranja, el comico asoma por arriba ── */
.v2-lista { padding-top: calc(var(--hb-sp-60) + 3rem); }
.v2-lista__caja {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
	max-width: 50rem; margin-inline: auto; padding: 2.5rem 1.75rem 0;
	border-radius: 12px; background: var(--hb2-naranja);
}
.v2-lista__texto { padding-bottom: 2.5rem; }
.v2-lista__texto .v2-titulo { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); margin-bottom: 1.25rem; }
.v2-lista .hb-form__row { grid-template-columns: 1fr; }
.v2-lista .hb-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.v2-lista .hb-form input[type="text"],
.v2-lista .hb-form input[type="email"] { background: #fff; color: var(--hb-ink); border: 0; border-radius: 3px; }
.v2-lista .hb-consent { color: var(--hb-c-contrast); }
.v2-lista .hb-form input::placeholder { color: #5F5F5F; }
.v2-lista__comico { width: 100%; height: auto; margin-top: -6rem; align-self: end; }
@media (max-width: 760px) {
	.v2-lista__caja { grid-template-columns: 1fr; }
	.v2-lista__comico { margin-top: 0; max-width: 18rem; justify-self: center; }
}

/* ── «Work with us» con los recortes del Figma ── */
.hb-ww__recorte { display: block; width: calc(100% + 2 * var(--hb-sp-30)); max-width: none; height: auto; margin: auto calc(-1 * var(--hb-sp-30)) 0; }

/* ── Follow Us, en todas las paginas ── */
.v2-siguenos { position: relative; isolation: isolate; overflow: hidden; background: var(--hb2-naranja); padding-top: var(--hb-sp-50); }
.v2-siguenos__rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.v2-siguenos__comico { align-self: end; width: 100%; max-width: 44rem; height: auto; display: block; }
.v2-siguenos__titulo { margin: 0 0 0.5rem; text-transform: none; font-family: var(--hb-f-body); font-weight: 800; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); color: var(--hb-c-contrast); }
.v2-siguenos__redes { list-style: none; margin: 0; padding: 0; }
.v2-siguenos__redes a {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--hb-f-body); font-weight: 800; text-transform: uppercase;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3.25rem); line-height: 1.25;
	min-height: 44px; /* en movil el texto baja a 35 px de alto: el dedo necesita 44 */
	color: var(--hb-c-contrast); text-decoration: none;
}
.v2-siguenos__redes svg { color: var(--hb2-amarillo); width: 0.7em; height: 0.7em; }
.v2-siguenos__redes li:first-child a { color: var(--hb2-amarillo); }
.v2-siguenos__redes a:hover { color: var(--hb2-amarillo); }
@media (max-width: 760px) {
	.v2-siguenos__rejilla { grid-template-columns: 1fr; }
	.v2-siguenos__comico { order: 2; max-width: 24rem; margin-inline: auto; }
}

/* ── Pie minimo ── */
.v2-pie { background: #000; padding-block: 1.75rem; }
.v2-pie__fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.v2-pie__logo { width: 9.5rem; height: auto; display: block; }
.v2-pie .hb-colophon { margin: 0; text-align: center; }
/* `.v2-pie` delante: `.hb-footer a` (0,1,1) le pisaba el display:grid y el
   icono quedaba pegado a la izquierda, como los sociales el 21/09. */
.v2-pie .v2-pie__arriba {
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
	background: var(--hb2-amarillo); color: var(--hb-ink); border-radius: 3px;
}
.v2-pie__arriba:hover { filter: brightness(1.1); }
.v2-pie__arriba svg { display: block; }


/* ==========================================================================
   Paginas V2 · About, Upcoming, Gallery, Video Production y Contact
   ========================================================================== */

.v2-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-titulo--oro { color: var(--hb2-amarillo); }

/* ── Intro de About y Contact: foto inclinada + panel oscuro ── */
.v2-intro__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: 60rem; }
.v2-intro__foto { position: relative; z-index: 2; display: block; transform: rotate(-2.5deg); border: 8px solid var(--hb2-oro); border-radius: 6px; overflow: hidden; }
.v2-intro__foto img { display: block; width: 100%; height: auto; }
.v2-intro__panel { background: #2A2A2A; border-radius: 0 12px 12px 0; padding: clamp(1.5rem, 3vw, 2.5rem); margin-left: -0.5rem; }
.v2-intro__panel .v2-titulo { font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem); margin-bottom: 1rem; }
.v2-intro__panel p { color: var(--hb-c-contrast); }
@media (max-width: 760px) {
	.v2-intro__rejilla { grid-template-columns: 1fr; }
	.v2-intro__panel { margin: -1rem 0.5rem 0; border-radius: 12px; }
}

/* ── Video grande ── */
.v2-video__enlace { display: block; max-width: 80rem; margin-inline: auto; border-radius: 16px; overflow: hidden; }
.v2-video__enlace img { display: block; width: 100%; height: auto; transition: transform 0.4s var(--hb-ease); }
.v2-video__enlace:hover img { transform: scale(1.02); }

/* ── Cifras ── */
.v2-cifras__fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 80rem; margin-inline: auto; }
.v2-cifra { display: flex; align-items: center; gap: 0.5rem; }
.v2-cifra__num { font-family: var(--hb-f-display); font-size: clamp(3.5rem, 2rem + 4vw, 6.5rem); line-height: 0.9; color: var(--hb2-oro); }
.v2-cifra__txt { font-family: var(--hb-f-display); font-size: 1.25rem; line-height: 1.1; text-transform: uppercase; color: var(--hb-c-contrast); max-width: 9rem; }
@media (max-width: 860px) { .v2-cifras__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Who we are: tres caras en unas gafas de oro ── */
.v2-gafas { list-style: none; margin: 0 auto 2rem; padding: 0; display: flex; justify-content: center; align-items: flex-start; }
/* Ancho fijo por lente: con flex a secas, un nombre largo debajo encogia su
   lente y las tres salian de tamaños distintos en movil. */
.v2-gafas li { --lente: clamp(6rem, 25vw, 13rem); position: relative; flex: 0 0 var(--lente); display: grid; justify-items: center; align-content: start; gap: 0.6rem; text-align: center; }
.v2-gafas img {
	width: var(--lente); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
	border: clamp(8px, 1.2vw, 14px) solid var(--hb2-oro);
	box-shadow: inset 0 0 0 2px var(--hb2-amarillo), 0 0 0 2px #8C6400;
}
/* El puente de las gafas entre lente y lente */
.v2-gafas li + li::before {
	content: ""; position: absolute; top: calc(var(--lente) / 2 - 0.5rem); right: 100%;
	width: clamp(0.75rem, 2.5vw, 2rem); height: 1rem; background: var(--hb2-oro); border-radius: 4px;
}
.v2-gafas li + li { margin-left: clamp(0.75rem, 2.5vw, 2rem); }
.v2-gafas span { font-family: var(--hb-f-display); font-size: 1.1rem; color: var(--hb-c-contrast); text-transform: uppercase; }
.v2-gafas small { display: block; font-family: var(--hb-f-body); font-size: 0.8rem; text-transform: none; color: var(--hb2-amarillo); }
.v2-equipo__texto { max-width: 52rem; margin: 0 auto; text-align: center; color: var(--hb-c-contrast); font-size: var(--hb-s-small); }
@media (max-width: 560px) { .v2-gafas span { font-size: 0.85rem; } .v2-gafas small { font-size: 0.7rem; } }

/* ── Video Production: hero con las dos tarjetas ── */
.v2-vphero { padding-top: clamp(8rem, 18vw, 14rem); }
.v2-vphero .v2-fondo { filter: grayscale(1) brightness(0.45); }
.v2-socios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 53rem; margin-inline: auto; }
.v2-socio { display: grid; justify-items: center; align-content: start; gap: 0.75rem; padding: 1.5rem; border-radius: 10px; text-align: center; }
.v2-socio img { height: 3.25rem; width: auto; }
.v2-socio p { margin: 0; color: var(--hb-c-contrast); font-size: var(--hb-s-small); }
.v2-socio--nomadic { background: #B74913; }
.v2-socio--hambone { background: #2A2A2A; }
@media (max-width: 760px) { .v2-socios { grid-template-columns: 1fr; } }

/* ── What we do: tarjeta de color con la foto enmarcada ── */
.v2-formato { display: grid; justify-items: center; align-content: start; gap: 0.5rem; padding: 1.75rem 1.5rem 2rem; border-radius: 16px; text-align: center; }
.v2-formato h3 { margin: 0; font-family: var(--hb-f-display); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem); text-transform: uppercase; color: var(--hb-c-contrast); }
.v2-formato p { margin: 0; max-width: 18rem; color: var(--hb-c-contrast); font-size: var(--hb-s-small); }
/* El Figma pone blanco sobre oro y sobre jamon: 1,52:1 y 3,30:1. Ahi va
   tinta, como en «Work with us»; en el ocre el blanco si pasa (5,50:1). */
.v2-formato.hb-cta--gold h3, .v2-formato.hb-cta--gold p,
.v2-formato.hb-cta--ham h3, .v2-formato.hb-cta--ham p { color: var(--hb-ink); }
.v2-formato figure { margin: 1.5rem 0 0; padding: 0.6rem; border: 2px solid rgb(0 0 0 / 0.35); border-radius: 14px; }
.v2-formato figure img { display: block; width: 100%; max-width: 13rem; height: auto; border-radius: 10px; }

/* ── Our services: tejas 2x2 con foto; la descripcion al pasar ── */
.v2-tejas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 80rem; margin-inline: auto; }
.v2-teja { position: relative; overflow: hidden; border-radius: 8px; }
.v2-teja img { display: block; width: 100%; height: auto; }
.v2-teja__texto {
	position: absolute; inset: auto 0 0 0; padding: 1.25rem 1.5rem;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.85) 70%);
}
.v2-teja h3 { margin: 0; font-family: var(--hb-f-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem); text-transform: uppercase; color: var(--hb-c-contrast); }
.v2-teja p { margin: 0.25rem 0 0; font-size: var(--hb-s-small); color: var(--hb-c-contrast); max-width: 26rem; }
.v2-teja:hover h3 { color: var(--hb2-amarillo); }
@media (max-width: 760px) { .v2-tejas { grid-template-columns: 1fr; } }

/* ── Upcoming Shows: banner + panel de fechas ── */
.v2-agenda__banner img { display: block; width: 100%; height: auto; border-radius: 12px; }
.v2-agenda__banner { display: block; max-width: 80rem; margin: 0 auto 1.5rem; }
.v2-agenda__lista { max-width: 80rem; margin-inline: auto; background: var(--hb2-panel); border-radius: 12px; padding: 1rem; }
.v2-agenda__lista .hb-ticket { background: #000; border: 0; box-shadow: none; border-radius: 10px; margin-bottom: 1rem; }
.v2-agenda__lista .hb-ticket:last-child { margin-bottom: 0; }
.v2-agenda__lista .hb-sin-fechas { margin: 1rem; }

/* ── Contact: el formulario en dos columnas, etiquetas en Koulen ── */
.v2-contacto .hb-form { max-width: 53rem; margin-inline: auto; }
.v2-contacto .hb-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-contacto .hb-field > span { font-family: var(--hb-f-display); font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--hb-c-contrast); }
.v2-contacto .hb-form input,
.v2-contacto .hb-form select,
.v2-contacto .hb-form textarea { background: #fff; color: var(--hb-ink); border: 0; border-radius: 5px; }
.v2-contacto .hb-form input::placeholder,
.v2-contacto .hb-form textarea::placeholder { color: #5F5F5F; }
.v2-contacto .hb-form button { justify-self: center; min-width: 11rem; }
@media (max-width: 700px) { .v2-contacto .hb-form__row { grid-template-columns: 1fr; } }

/* ── Gallery: rejilla de 3 con esquinas redondas y filtros como el Figma ── */
.v2-galeria .hb-wrap { max-width: 82rem; }
.v2-galeria .v2-titulo + .hb-muted { text-align: center; margin: -1.5rem auto 1.5rem; max-width: 40rem; }
/* «15 photos shown» es un aviso para lector de pantalla (aria-live). La regla
   de arriba, escrita para `> .hb-muted`, lo cogia tambien y le daba margen
   negativo: salia encima de los filtros (visto por Edu el 25/09). */
#hb-galeria-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.v2-galeria .hb-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.v2-galeria .hb-sheet figure { border: 0; border-radius: 10px; filter: none; background: #111; }
.v2-galeria .hb-sheet img { aspect-ratio: 405 / 346; }
.v2-galeria .hb-sheet figure:hover { transform: scale(1.02); filter: brightness(1.08); }
.v2-galeria .hb-chips button {
	font-family: var(--hb-f-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em;
	color: var(--hb-c-contrast); border: 1px solid var(--hb2-amarillo); border-radius: 3px; min-width: 7rem; justify-content: center;
}
.v2-galeria .hb-chips button:hover,
.v2-galeria .hb-chips button[aria-pressed="true"] {
	background: linear-gradient(180deg, var(--hb2-amarillo) 0%, var(--hb2-oro) 100%); color: var(--hb-ink); border-color: var(--hb2-amarillo);
}
@media (max-width: 860px) { .v2-galeria .hb-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v2-galeria .hb-sheet { grid-template-columns: 1fr; } }