/* Ficha de producto (single-producto.php). */

.ficha__block,
.ficha__intro-head,
.ficha__editor {
	padding: 0 var(--edge);
}

/* --- Intro --------------------------------------------------------------- */

.ficha__intro {
	background: var(--c-cream-light);
	padding-bottom: clamp(24px, 4vw, 48px);
}

.ficha__intro-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	padding-top: clamp(32px, 4vw, 56px);
}

.ficha__title {
	font-family: var(--font-display);
	font-weight: 700;
	/* 76px a 1440, medido en el PNG del diseño */
	font-size: clamp(36px, 5.3vw, 102px);
	letter-spacing: -0.04em;
	line-height: 1;
}

.ficha__designer {
	font-family: var(--font-mono);
	font-size: clamp(14px, 1.4vw, 20px);
	margin-top: 8px;
}

.ficha__intro-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(20px, 3vw, 40px);
}

.ficha__lead {
	font-size: clamp(15px, 1.042vw, 20px);
	line-height: 1.3;
}


.ficha__hero-media {
	margin-top: clamp(24px, 4vw, 48px);
	padding: 0 var(--edge);
	display: flex;
	justify-content: center;
}

/* La foto del producto ocupa siempre la misma banda, como en el diseño: si no,
   cada producto salía de un tamaño según lo grande que fuera su archivo. */
.ficha__hero-media img {
	width: auto;
	height: clamp(300px, 43vw, 620px);
	max-width: 100%;
	object-fit: contain;
}

/* --- Galería ------------------------------------------------------------- */

.ficha__wide img { width: 100%; }

/* La tira va a sangre y cada foto conserva su proporción: todas a la misma
   altura y el ancho que les toque. Se recorre en horizontal, con las flechas y
   el contador encima. */
.ficha__slider {
	position: relative;
	margin-top: 2px;
}

.ficha__slides {
	position: relative;
	display: flex;
	gap: 10px;
	height: clamp(320px, 49vw, 720px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.ficha__slides::-webkit-scrollbar { display: none; }

.ficha__slides li {
	flex: none;
	scroll-snap-align: start;
}

.ficha__slides img {
	display: block;
	width: auto;
	height: 100%;
}

/* La barra no intercepta el ratón salvo en las flechas, para poder arrastrar
   la tira por debajo */
.ficha__slider-bar {
	position: absolute;
	top: clamp(12px, 2vw, 24px);
	left: var(--edge);
	right: var(--edge);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	pointer-events: none;
	color: var(--c-white);
	font-family: var(--font-mono);
	font-size: clamp(14px, 1.4vw, 18px);
}

.ficha__slider-count {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ficha__slider-arrow {
	pointer-events: auto;
	padding: 4px 8px;
	margin: -4px -8px;
}

/* --- Editor 3D ----------------------------------------------------------- */

.ficha__editor {
	border-bottom: 1px solid rgba(27, 27, 26, 0.15);
}

/* El titular y el botón van sobre una foto a sangre, de ahí que el bloque se
   salga de los márgenes de la ficha. */
.ficha__editor-banner {
	position: relative;
	padding: clamp(40px, 6vw, 80px) var(--edge);
	display: grid;
	align-content: center;
	min-height: clamp(300px, 32vw, 460px);
}

.ficha__editor-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ficha__editor-head {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
}

.ficha__editor-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.ficha__editor-external {
	font-size: clamp(13px, 0.903vw, 17.3px);
	font-weight: 300;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Al abrir el editor, este ocupa el sitio del banner: la foto y el titular
   "Descubre todas sus posibilidades" se recogen y vuelven al cerrar con la X.
   El relevo se hace plegando las dos filas de rejilla a la vez y cruzando
   las opacidades, para que sea un solo movimiento y no dos saltos. */
.ficha__editor-pliegue {
	/* la sangre la lleva el pliegue, no el banner: su hijo recorta lo que
	   sobra al plegarse y recortaría también la foto si saliera de él */
	margin-inline: calc(-1 * var(--edge));
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ficha__editor-pliegue > * {
	min-height: 0;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.3s ease 0.2s;
}

.ficha__editor:not(.is-collapsed) .ficha__editor-pliegue { grid-template-rows: 0fr; }

.ficha__editor:not(.is-collapsed) .ficha__editor-pliegue > * {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ficha__editor-marco { position: relative; }

.ficha__editor-close {
	position: absolute;
	top: clamp(28px, 3.4vw, 48px);
	right: 12px;
	z-index: 2;
	width: clamp(34px, 2.6vw, 44px);
	height: clamp(34px, 2.6vw, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-dark);
	color: var(--c-white);
	font-size: clamp(20px, 1.6vw, 26px);
	line-height: 1;
}

.ficha__editor-close:hover { opacity: 0.85; }

/* Plegado de inicio; el botón lo abre (product.js) */
.ficha__editor-frame {
	display: block;
	width: 100%;
	height: min(80vh, 900px);
	margin: clamp(24px, 3vw, 40px) 0;
	border: 0;
	background: var(--c-cream-light);
}

.ficha__editor-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 68px);
	letter-spacing: -0.04em;
	line-height: 1;
}

.ficha__editor-copy {
	max-width: 52ch;
	font-size: clamp(15px, 1.042vw, 20px);
	line-height: 1.4;
	margin-top: 16px;
}

/* --- Bloques con titular (plegables, product.js) -------------------------- */

.ficha__block {
	/* Arriba, el mismo aire que cuando está plegado: el titular no se separa
	   más del filete por abrirse. Lo que crece es el hueco de abajo. */
	padding-top: 10px;
	/* 33px a 1440 hasta el filete siguiente, medido en el PNG */
	padding-bottom: clamp(24px, 2.3vw, 44px);
	border-top: 1px solid rgba(27, 27, 26, 0.15);
	transition: padding 0.3s ease;
}

.ficha__block.is-collapsed {
	padding-top: 10px;
	padding-bottom: 10px;
}

.ficha__heading {
	font-weight: 700;
	font-size: clamp(18px, 2vw, 26px);
	letter-spacing: -0.02em;
	margin-bottom: clamp(24px, 3vw, 40px);
	transition: margin 0.3s ease;
}

.is-collapsed .ficha__heading { margin-bottom: 0; }

/* Plegado, el titular lleva solo la rayita de la izquierda; al abrirse crece
   hasta subrayarlo entero, como el resto de enlaces de la web. Medidas del
   diseño: 0.127em de grueso, a 0.144em de la línea base. El filete va de fondo
   para poder animarlo. La flecha se queda fuera, por eso esto va en el span y
   no en el botón. */
.ficha__toggle { text-align: left; }

.ficha__toggle span {
	display: inline;
	margin-left: -0.5em;
	padding-left: 0.5em;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.285em);
	background-size: 100% 0.127em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.35s ease;
}

.is-collapsed .ficha__toggle span { background-size: 0.5em 0.127em; }

@media (prefers-reduced-motion: reduce) {
	.ficha__toggle span { transition: none; }
}

.ficha__toggle::after { content: ' ↓'; }
.is-collapsed .ficha__toggle::after { content: ' ↑'; }

/* El cuerpo se pliega animando la fila del grid a 0 */
.ficha__body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.3s ease;
}

/* El del editor va con la misma curva y duración que el pliegue del banner. */
.ficha__editor .ficha__body {
	transition: grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.ficha__editor .ficha__body > div > * {
	opacity: 1;
	transition: opacity 0.3s ease 0.25s;
}

.ficha__editor.is-collapsed .ficha__body > div > * {
	opacity: 0;
	transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ficha__editor-pliegue,
	.ficha__editor-pliegue > *,
	.ficha__editor .ficha__body,
	.ficha__editor .ficha__body > div > * { transition: none; }
}

.ficha__body > div {
	min-height: 0;
	overflow: hidden;
}

.is-collapsed .ficha__body { grid-template-rows: 0fr; }

/* --- Barra fija bajo la cabecera (product.js la muestra y la posiciona) --- */

.ficha__bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 19; /* under the header, so it hides behind it when translated up */
	background: var(--c-white);
	border-bottom: 1px solid rgba(27, 27, 26, 0.1);
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

.ficha__bar.is-visible { transform: none; }

.ficha__bar-inner {
	padding: 12px var(--edge);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ficha__bar-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 28px);
	letter-spacing: -0.04em;
	line-height: 1;
}

.ficha__label {
	font-family: var(--font-mono);
	font-size: clamp(14px, 0.972vw, 18.7px);
	margin-bottom: 8px;
}

.ficha__list {
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.55;
	margin-bottom: 32px;
}

.ficha__notas p {
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.4;
	margin-bottom: 12px;
}

/* --- Descripción técnica ------------------------------------------------- */

.ficha__tecnica {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
}

/* El pie "mm · pulgadas" se apoya en el fondo de la columna, a la altura
   del final del texto de la izquierda, no justo debajo del plano. */
.ficha__plano {
	/* es un <figure>: sin esto arrastra los márgenes del navegador (1em 40px),
	   que lo metían por los lados y lo levantaban del fondo */
	margin: 0;
	display: flex;
	flex-direction: column;
}

.ficha__plano img { width: 100%; }

/* En el diseño "mm" va en negro y "· pulgadas" en gris claro. */
.ficha__plano figcaption {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-dark);
	text-align: right;
	margin-top: auto;
	padding-top: 12px;
}

.ficha__plano figcaption span { color: #b2b1b0; }

/* --- Acabados ------------------------------------------------------------ */

.ficha__group-label {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	text-align: right;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(27, 27, 26, 0.15);
	margin-bottom: clamp(16px, 2vw, 24px);
}

.ficha__acabados {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(8px, 1.5vw, 24px);
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* The swatch is either a flat colour or a photographed texture; the name
   sits on top of it either way */
.ficha__acabado {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid rgba(27, 27, 26, 0.15);
}

.ficha__acabado img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ficha__acabado-name {
	position: relative;
	display: block;
	padding: 12px;
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	line-height: 1.3;
	white-space: pre-line;
}

.ficha__acabado.is-dark .ficha__acabado-name { color: var(--c-white); }

.ficha__note {
	font-size: clamp(14px, 0.972vw, 18.7px);
	color: var(--c-grey-warm);
	text-align: right;
}

.ficha__note a { text-decoration: underline; }

/* El botón de la intro, como el de la ficha de proyecto: caja de 229 x 42 y
   letra de 19px a 1440 (FICHA PRODUCTO.png). */
.ficha__button {
	padding: 0.53em 0.79em;
	font-size: clamp(15px, 1.32vw, 25.3px);
}

/* --- Descargables -------------------------------------------------------- */

.ficha__descargas li {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(27, 27, 26, 0.15);
	font-size: clamp(14px, 1.3vw, 17px);
}

.ficha__descargas li:first-child { border-top: 1px solid rgba(27, 27, 26, 0.15); }

.ficha__descarga-format,
.ficha__descarga-nota {
	font-family: var(--font-mono);
	font-size: clamp(13px, 0.903vw, 17.3px);
	color: var(--c-grey-warm);
}

.ficha__descargas a {
	grid-column: 3;
	justify-self: end;
}

/* --- Diseñador ----------------------------------------------------------- */

.ficha__disenador {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
}

.ficha__disenador img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ficha__disenador-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.5vw, 44px);
	letter-spacing: -0.04em;
	margin-bottom: 20px;
}

.ficha__disenador-bio {
	max-width: 52ch;
	font-size: clamp(15px, 1.042vw, 20px);
	line-height: 1.45;
}

.ficha__disenador-bio p + p { margin-top: 14px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.ficha__intro-head,
	.ficha__tecnica,
	.ficha__disenador,
	.ficha__editor-head {
		grid-template-columns: 1fr;
	}

	.ficha__intro-aside { align-items: flex-start; }

	.ficha__editor-actions { align-items: flex-start; }

	.ficha__acabados { grid-template-columns: repeat(2, 1fr); }
	.ficha__slides { height: clamp(220px, 56vw, 420px); }
}

@media (max-width: 600px) {
	/* "Solicitar información" va siempre en una línea: antes que partirla, se
	   achica el botón. En la barra que aparece al bajar es el titular el que
	   cede sitio. */
	.ficha__button,
	.ficha__bar .button {
		flex: 0 0 auto;
		white-space: nowrap;
		padding: 8px 12px;
		font-size: 14px;
	}

	.ficha__bar-inner { gap: 12px; }

	.ficha__bar-title {
		min-width: 0;
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* "(Requiere contraseña)" baja bajo el nombre en vez de ir en medio de la
	   fila; el enlace se queda a la derecha, centrado en las dos líneas. */
	.ficha__descargas li {
		grid-template-columns: 1fr auto;
		row-gap: 2px;
	}

	.ficha__descarga-name { grid-area: 1 / 1; }

	.ficha__descarga-nota { grid-area: 2 / 1; }

	.ficha__descargas a { grid-area: 1 / 2 / 3 / 3; }
}