/**
 * WEB-04 — Piloto visual web (Nara Arena).
 * Intro producto → Hero 01 → grid 02–05.
 * Scoped a .tb-signature-page--visual-web (no afecta header global).
 */

/* ----- Picture base: render completo 3:2 ----- */
.tb-visual-web-picture {
	display: block;
	width: 100%;
	margin: 0;
}

.tb-visual-web-picture img,
.tb-visual-web__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
}

/*
 * Espaciado header → intro (anula 5rem editorial solo en piloto).
 * #content.site-content ya aporta ~40px (desktop) / ~30px (≤959);
 * el padding del inner se calibra para un hueco visual total ≈ 56–72 / 40–48 / 24–32.
 */
.tb-signature-page--editorial.tb-signature-page--visual-web .tb-publish-page__inner {
	padding-top: var(--space-24); /* + ~40 site-content ≈ 64px */
}

@media (max-width: 959px) {
	.tb-signature-page--editorial.tb-signature-page--visual-web .tb-publish-page__inner {
		padding-top: var(--space-16); /* + ~30 ≈ 46px */
	}
}

@media (max-width: 767px) {
	.tb-signature-page--editorial.tb-signature-page--visual-web .tb-publish-page__inner {
		padding-top: 0; /* + ~30 site-content ≈ 30px */
	}
}

/* ----- Hero stack: intro primero, galería después ----- */
.tb-signature-page--visual-web .tb-signature-hero {
	display: block;
	grid-template-columns: unset;
	min-height: 0;
	gap: 0;
	align-items: stretch;
	margin-bottom: var(--tb-sig-section, 3rem);
}

.tb-signature-page--visual-web .tb-signature-hero__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16, 1rem);
	min-width: 0;
	padding-block: 0;
	margin: 0 0 var(--space-32); /* intro → hero: 32px móvil */
	align-items: start;
}

.tb-signature-page--visual-web .tb-signature-hero__lead,
.tb-signature-page--visual-web .tb-signature-hero__buy {
	display: grid;
	gap: var(--space-16, 1rem);
	min-width: 0;
}

.tb-signature-page--visual-web .tb-signature-hero__opening,
.tb-signature-page--visual-web .tb-signature-hero__intro {
	max-width: none;
}

.tb-signature-page--visual-web .tb-signature-hero__price {
	margin-top: 0;
}

.tb-signature-page--visual-web .tb-signature-hero__cta {
	margin-top: 0.25rem;
}

@media (min-width: 768px) {
	.tb-signature-page--visual-web .tb-signature-hero__content {
		margin-bottom: var(--space-40); /* intro → hero: 40px tablet */
	}
}

@media (min-width: 900px) {
	.tb-signature-page--visual-web .tb-signature-hero {
		display: block;
		grid-template-columns: unset;
		min-height: 0;
		gap: 0;
	}

	.tb-signature-page--visual-web .tb-signature-hero__content {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		row-gap: 0;
		margin-bottom: var(--space-48); /* intro → hero: 48px desktop */
		align-items: start;
	}

	.tb-signature-page--visual-web .tb-signature-hero__buy {
		padding-top: 0.15rem;
	}
}

/* ----- Stack editorial: hero 01 + grid 02–05 ----- */
.tb-visual-web-editorial {
	display: grid;
	gap: 1.25rem; /* 20px */
	width: 100%;
	margin: 0;
	min-width: 0;
}

.tb-visual-web-editorial__hero {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	min-width: 0;
	overflow: visible;
	background: transparent;
}

.tb-visual-web-editorial__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem; /* 20px */
	width: 100%;
	margin: 0;
	min-width: 0;
}

.tb-visual-web-editorial__cell {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	min-width: 0;
	overflow: visible;
	background: transparent;
}

@media (min-width: 640px) {
	.tb-visual-web-editorial {
		gap: 1.5rem; /* 24px */
	}

	.tb-visual-web-editorial__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem; /* 24px */
	}
}

@media (max-width: 767px) {
	.tb-signature-page--visual-web .tb-visual-web-editorial__hero {
		aspect-ratio: auto;
		margin-inline: 0;
		width: 100%;
		max-width: 100%;
	}
}

/* ----- Cards Signature (índice Bañeras + Otros modelos): Slot 01 3:2 completo ----- */
.tb-baneras-card__media:has(.tb-visual-web-picture),
.tb-related-signature__media:has(.tb-visual-web-picture),
.tb-signature-cards__media:has(.tb-visual-web-picture),
.tb-signature-page--editorial .tb-related-signature--editorial .tb-related-signature__media:has(.tb-visual-web-picture) {
	aspect-ratio: 3 / 2;
	padding: 0;
	overflow: hidden;
	background: transparent;
	align-items: stretch;
	justify-content: stretch;
}

.tb-baneras-card__media .tb-visual-web-picture,
.tb-related-signature__media .tb-visual-web-picture,
.tb-signature-cards__media .tb-visual-web-picture,
.tb-baneras-card__media .tb-visual-web-picture img,
.tb-related-signature__media .tb-visual-web-picture img,
.tb-signature-cards__media .tb-visual-web-picture img {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.tb-baneras-card__media .tb-visual-web-picture img,
.tb-related-signature__media .tb-visual-web-picture img,
.tb-signature-cards__media .tb-visual-web-picture img,
.tb-signature-page--editorial .tb-related-signature--editorial .tb-related-signature__media .tb-visual-web-picture img {
	height: auto;
	aspect-ratio: 3 / 2;
	/* Render completo: anula cover/contain/zoom del explorer y editorial. */
	object-fit: initial;
	object-position: center;
	transform: none;
}

/* Anula cover/zoom editorial sobre cards Arena. */
.tb-signature-page--editorial .tb-related-signature--editorial .tb-related-signature__card:hover .tb-related-signature__media .tb-visual-web-picture img,
.tb-signature-page--editorial .tb-related-signature--editorial .tb-related-signature__card:focus-visible .tb-related-signature__media .tb-visual-web-picture img {
	transform: none;
	object-fit: initial;
}

/* WEB-09 — sticky header no tapa el inicio del configurador. */
#configurador {
	scroll-margin-top: calc(var(--header-height-sticky, 4rem) + 1rem);
}