/* ==========================================================================
   Tienda y archivos de producto
   Medidas portadas de "TIENDA" (#837) y "Categorías" (#2752).
   ========================================================================== */

/* --- Cabecera del archivo -------------------------------------------------- */
.shop-hero {
	background-color: var(--shop-hero-bg, var(--bg-verde));
	overflow: hidden;
}

.shop-hero__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 20px;
	min-height: 244px;
	padding-top: 28px;
}

.shop-hero__antetitulo {
	font-family: var(--f-texto);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2em;
	color: var(--c-negro);
}

.shop-hero__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-display);
	font-weight: 800;
	line-height: 1em;
	color: var(--c-terracota);
}

/* Parrafo de la categoria, bajo el titulo. */
.shop-hero__intro {
	/* Sin recorte: los textos ya caben en tres lineas. */
	margin-top: 14px;
	max-width: 46ch;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.5;
	color: var(--c-texto);
}
.shop-hero__intro p + p { margin-top: .7em; }
/* Lo resaltado, en el color de marca. */
.shop-hero__intro strong {
	font-weight: 700;
	color: var(--c-negro);
}

.shop-hero__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	align-self: stretch;
	gap: 4px;
}
.shop-hero__foto {
	max-height: 210px;
	width: auto;
	margin-inline-start: auto;
}

/* Vineta: aparece al pasar el raton por la foto, a la altura de la cabeza. */
.shop-hero__lema {
	position: absolute;
	right: 8%;
	bottom: 58%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: 210px;
	padding: 12px 16px;
	border: 2px solid var(--c-terracota);
	/* La esquina sin redondear hace de rabito, apuntando a la foto. */
	border-radius: 18px 18px 4px 18px;
	background-color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	line-height: 1.3;
	color: var(--c-negro);
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.shop-hero__media:hover .shop-hero__lema,
.shop-hero__media:focus-within .shop-hero__lema {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.shop-hero__emoji {
	display: inline-block;
	width: 28px;
	height: auto;
	vertical-align: middle;
}

/* --- Filtros --------------------------------------------------------------- */
.shop-filtros__wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-block: 40px 30px;
}

.shop-filtro {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 999px;
	background-color: var(--c-borde);
	font-size: var(--fz-parrafo-xs);
	line-height: 1;
	color: var(--c-texto);
	transition: background-color var(--transicion), color var(--transicion);
}
.shop-filtro:hover {
	background-color: var(--bg-verde);
	color: var(--c-negro);
}
.shop-filtro.is-activo {
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}

/* --- Listado --------------------------------------------------------------- */
.shop-listado__wrapper { padding-block: 0 70px; }

.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.shop-listado__acciones {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.shop-listado__vacio {
	padding-block: 40px;
	text-align: center;
	color: var(--c-texto);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.shop-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 767px) {
	/* Sin la foto, la cabecera es solo el titulo y los sellos, centrados. */
	.shop-hero__wrapper {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: 0;
		padding-block: 30px;
		text-align: center;
	}
	.shop-hero__media { display: none; }

	.shop-hero__intro { max-width: none; }

	.shop-grid { grid-template-columns: 1fr; gap: 16px; }
	.shop-listado__wrapper { padding-bottom: 40px; }

}

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.producto { background-color: var(--bg-gris); }

.producto__wrapper {
	padding-block: 20px 60px;
}

/* Galeria a la izquierda, compra a la derecha. */
.producto__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 50px;
	align-items: start;
}

/* --- Galeria --------------------------------------------------------------- */
.producto__galeria {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Acompaña al desplazarse, sin salirse de su columna. La cabecera mide
	   unos 90px cuando esta a la vista. */
	position: sticky;
	top: 100px;
}

.producto__escena {
	position: relative;
	border-radius: var(--radio-card);
	background-color: var(--bg-verde);
	overflow: hidden;
}

/* Una diapositiva por hueco; el arrastre lo pone el navegador. */
.producto__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.producto__pista::-webkit-scrollbar { display: none; }

.producto__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	/* El zoom crece dentro de este marco y no se sale. */
	overflow: hidden;
}

.producto__foto {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .3s ease;
}
/* Al pasar el raton, la foto crece sobre el punto que se mira. */
.producto__foto.is-zoom {
	transform: scale(2);
	transition: none;
}

.producto__video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background-color: var(--c-negro);
}

.producto__visor {
	width: 100%;
	aspect-ratio: 1;
}
.producto__visor canvas { display: block; width: 100% !important; height: 100% !important; }

.producto__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--c-blanco);
	font-size: 20px;
	color: var(--c-negro);
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--transicion), background-color var(--transicion), color var(--transicion);
}
.producto__flecha--prev { left: 14px; }
.producto__flecha--next { right: 14px; }
.producto__escena:hover .producto__flecha,
.producto__flecha:focus-visible { opacity: 1; }
.producto__flecha:hover {
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}

.producto__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--c-blanco);
	font-size: 18px;
	color: var(--c-negro);
	cursor: pointer;
	transition: background-color var(--transicion), color var(--transicion);
}
.producto__zoom:hover {
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}
.producto__zoom[hidden] { display: none; }

/* --- Miniaturas, bajo la foto ---------------------------------------------- */
/* Todas a la vista: las que no caben bajan a una segunda fila. */
.producto__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.producto__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--c-borde-card);
	border-radius: 6px;
	background-color: var(--bg-verde);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--transicion);
}
.producto__thumb:hover,
.producto__thumb.is-activo { border-color: var(--c-terracota); }
.producto__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Las de video y 3D no llevan foto: icono y, si toca, una palabra. */
.producto__thumb--video,
.producto__thumb--modelo {
	flex-direction: column;
	gap: 2px;
	font-family: var(--f-texto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-terracota);
}
.producto__thumb--video i,
.producto__thumb--modelo i { font-size: 22px; }

.producto__ra {
	align-self: start;
}
.producto__ra[hidden] { display: none; }

/* --- Columna de compra ----------------------------------------------------- */
/*
 * La columna va por grupos y es el gap quien los separa: dentro de cada uno
 * las piezas no llevan margenes sueltos, asi no hay que ir sumando margenes
 * para saber cuanto respira cada cosa.
 */
.producto__info {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.producto__grupo {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.producto__terminos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 8px;
}
.producto__termino {
	font-size: var(--fz-parrafo-xs);
	line-height: 1.2;
	color: var(--c-texto);
	text-transform: uppercase;
}
.producto__termino--cat { color: var(--c-terracota); }

.producto__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-h3);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-terracota);
}

.producto__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	/* 2px menos abajo: la Varta deja hueco de sobra bajo la linea base. */
	padding: 8px 14px 6px;
	border-radius: 999px;
	background-color: var(--c-terracota);
	color: var(--c-blanco);
	font-size: var(--fz-parrafo-xs);
	font-weight: 700;
	line-height: 1;
}

.producto__nota {
	font-size: var(--fz-parrafo-xs);
	color: var(--c-texto);
}

/* Las listas de la descripcion: el liston de beneficios acabo aqui. */
.producto__descripcion-larga ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.producto__descripcion-larga li {
	position: relative;
	padding-left: 26px;
	margin-top: 8px;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.4;
	color: var(--c-negro);
}
/* El check lo dibuja el CSS: en el content no hay iconos de fuente. */
.producto__descripcion-larga li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--c-terracota);
	border-bottom: 2px solid var(--c-terracota);
	transform: rotate(-45deg);
}

.producto__precio {
	font-family: var(--f-titulo);
	font-size: var(--fz-h4);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-terracota);
}
.producto__precio del { opacity: .55; margin-right: 8px; }
.producto__precio ins { text-decoration: none; }

.woocommerce .producto__carrito .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 2px solid var(--c-terracota);
	border-radius: var(--radio-boton);
	/* !important: WooCommerce y sus extensiones pintan este boton desde varias
	   hojas y con selectores mas especificos. */
	background-color: var(--c-terracota) !important;
	color: var(--c-blanco) !important;
	font-family: var(--f-titulo);
	font-size: var(--fz-boton);
	font-weight: 700;
	line-height: 1.1em;
	transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}
.woocommerce .producto__carrito .single_add_to_cart_button:hover,
.woocommerce .producto__carrito .single_add_to_cart_button:focus-visible {
	background-color: var(--c-terracota-oscuro) !important;
	border-color: var(--c-terracota-oscuro);
	color: var(--c-blanco) !important;
}

.producto__upsells-titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-h4);
	font-weight: 700;
	color: var(--c-negro);
}
/*
 * En la columna de compra no hay ancho para la tarjeta de siempre: el titulo
 * se parte en dos y la descripcion no cabe. Aqui la tarjeta se tumba: foto
 * pequeña a la izquierda y el texto al lado, una por fila.
 */
.producto__upsells .products {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.producto__upsells .card-producto {
	flex-direction: row;
	align-items: stretch;
	height: auto;
}
.producto__upsells .card-producto:hover { transform: none; }

.producto__upsells .card-producto__media {
	flex: 0 0 96px;
	width: 96px;
}
.producto__upsells .card-producto__foto img {
	height: 100%;
	object-fit: cover;
}

/* La etiqueta y el corazon no caben: sobran en este tamaño. */
.producto__upsells .card-producto__superior { display: none; }

.producto__upsells .card-producto__cuerpo {
	gap: 4px;
	padding: 12px 14px;
}

.producto__upsells .card-producto__titulo {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 17px;
	line-height: 1.2em;
}

/* Sin descripcion ni boton: con el nombre y el precio basta. */
.producto__upsells .card-producto__resumen,
.producto__upsells .card-producto__ver { display: none; }

.producto__upsells .card-producto__pie {
	margin-top: auto;
	padding-top: 0;
	border-top: 0;
}
.producto__upsells .card-producto__precio { font-size: var(--fz-parrafo-xs); }

/* --- Variaciones ------------------------------------------------------------ */
/* La tabla de WooCommerce se convierte en filas de etiqueta + opciones. El
   markup de las bolitas y los botones lo pone woo-variation-swatches. */
.woocommerce .producto__carrito table.variations {
	width: 100%;
	margin: 0;
	padding-top: 22px;
	border: 0;
	border-top: 1px solid var(--c-borde-card);
}
.woocommerce .producto__carrito table.variations tbody,
.woocommerce .producto__carrito table.variations tr,
.woocommerce .producto__carrito table.variations th,
.woocommerce .producto__carrito table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}
/* Cada atributo en filas: la etiqueta arriba y sus opciones debajo. */
.woocommerce .producto__carrito table.variations tr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 20px;
}
.woocommerce .producto__carrito table.variations th.label {
	text-align: left;
}
.woocommerce .producto__carrito table.variations th.label label {
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-negro);
}
.woocommerce .producto__carrito table.variations td.value {
	width: 100%;
}
.woocommerce .producto__carrito table.variations th.label label::after { content: ":"; }

/* Las muestras las pinta el tema (inc/variaciones.php); el <select> de
   WooCommerce sigue ahi, oculto, porque su JS es quien manda. */
.producto__carrito .muestras select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.producto__carrito .muestras__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.producto__carrito .muestra {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	background-color: var(--bg-verde);
	cursor: pointer;
	transition: border-color var(--transicion), background-color var(--transicion), color var(--transicion);
}
.producto__carrito .muestra:hover { border-color: var(--c-terracota); }
.producto__carrito .muestra:focus-visible {
	outline: 2px solid var(--c-terracota);
	outline-offset: 2px;
}

/* La que no cabe en la combinacion elegida. */
.producto__carrito .muestra.is-fuera {
	opacity: .35;
	cursor: not-allowed;
}

/* --- De texto: pastilla ancha con el nombre dentro ------------------------- */
.producto__carrito .muestra--button {
	min-height: 46px;
	/* 2px menos abajo: la Varta deja hueco de sobra bajo la linea base. */
	padding: 14px 20px 12px;
	border-radius: 10px;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	line-height: 1;
	color: var(--c-texto);
	white-space: nowrap;
}
.producto__carrito .muestra--button:hover { color: var(--c-negro); }
.producto__carrito .muestra--button.is-activa {
	border-color: var(--c-terracota);
	background-color: var(--c-blanco);
	font-weight: 700;
	color: var(--c-negro);
}

/* --- De color y de imagen: bolitas ----------------------------------------- */
.producto__carrito .muestra--color,
.producto__carrito .muestra--image {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 3px;
	border-radius: 50%;
}
.producto__carrito .muestra--color.is-activa,
.producto__carrito .muestra--image.is-activa { border-color: var(--c-terracota); }

.producto__carrito .muestra--image img,
.producto__carrito .muestra__color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
/* El color va en el style del <li>, asi que la bolita lo hereda. */
.producto__carrito .muestra__color { background-color: inherit; }

/* Visto bueno sobre la elegida, con sombra para que se lea sobre cualquier
   color o foto. Es una marca de estado, no decoracion. */
.producto__carrito .muestra--color.is-activa::after,
.producto__carrito .muestra--image.is-activa::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 8px;
	border-left: 3px solid var(--c-blanco);
	border-bottom: 3px solid var(--c-blanco);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
	transform: rotate(-45deg) translate(1px, -2px);
}

.woocommerce .producto__carrito .reset_variations {
	display: inline-block;
	margin-top: 10px;
	font-size: var(--fz-parrafo-xs);
	color: var(--c-texto);
	text-decoration: underline;
}

/* Precio de la variacion elegida. */
.woocommerce .producto__carrito .woocommerce-variation-price {
	margin-bottom: 16px;
	font-family: var(--f-titulo);
	font-size: var(--fz-h4);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-terracota);
}
.woocommerce .producto__carrito .woocommerce-variation-price del {
	margin-right: 10px;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	color: var(--c-texto);
}
.woocommerce .producto__carrito .woocommerce-variation-price ins { text-decoration: none; }

/* --- Cantidad y compra ------------------------------------------------------ */
/*
 * La fila de comprar va separada por una linea. En un producto simple esa
 * fila es el propio form; en uno variable, el bloque que WooCommerce pinta
 * bajo el precio de la variacion elegida.
 */
.woocommerce .producto__carrito form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--c-borde-card);
}
/* Con variaciones, la tabla y el precio ocupan su propia linea. */
.woocommerce .producto__carrito form.variations_form { display: block; }
.woocommerce .producto__carrito .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 22px;
	border-top: 1px solid var(--c-borde-card);
}

.woocommerce .producto__carrito .quantity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 6px;
	border-radius: var(--radio-boton);
	background-color: var(--bg-verde);
}
.woocommerce .producto__carrito .quantity input {
	width: 42px;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	color: var(--c-texto);
	text-align: center;
	-moz-appearance: textfield;
}
/* Fuera las flechitas del navegador: ya hay botones. */
.woocommerce .producto__carrito .quantity input::-webkit-outer-spin-button,
.woocommerce .producto__carrito .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cantidad__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-family: var(--f-texto);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-terracota);
	cursor: pointer;
	/* El - y el + se apoyan alto dentro de su caja: se bajan 2px para que
	   queden a la altura del numero. */
	padding-top: 2px;
	transition: background-color var(--transicion), color var(--transicion);
}
.cantidad__boton:hover {
	background-color: var(--c-terracota);
	color: var(--c-blanco);
}

/* --- Acordeon --------------------------------------------------------------- */
.acordeon__item { border-top: 1px solid var(--c-borde-card); }
.acordeon__item:last-child { border-bottom: 1px solid var(--c-borde-card); }

.acordeon__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: none;
	font-family: var(--f-titulo);
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-negro);
	text-align: left;
	cursor: pointer;
}
.acordeon__titulo { font-size: 18px; }
.acordeon__cabecera:hover { color: var(--c-terracota); }
/* Abierto, el titulo toma el color de la marca. */
.acordeon__cabecera[aria-expanded="true"] { color: var(--c-terracota); }

.acordeon__icono {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--c-terracota);
	transition: transform var(--transicion);
}
.acordeon__cabecera[aria-expanded="true"] .acordeon__icono { transform: rotate(180deg); }

.acordeon__cuerpo {
	padding-bottom: 18px;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.5;
	color: var(--c-negro);
}
.acordeon__cuerpo[hidden] { display: none; }
.acordeon__cuerpo p + p { margin-top: .8em; }
.acordeon__cuerpo strong { color: var(--c-negro); }

/* --- Descripcion larga ------------------------------------------------------ */
.producto__descripcion-larga {
	font-size: var(--fz-texto);
	line-height: 1.6;
	color: var(--c-negro);
}
.producto__descripcion-larga p + p { margin-top: 1em; }

/* --- Lightbox --------------------------------------------------------------- */
body.lightbox-abierto { overflow: hidden; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-header) + 10);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	background-color: rgba(36, 36, 36, .9);
}
.lightbox[hidden] { display: none; }

.lightbox__figura {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: min(900px, 100%);
	margin: 0;
}
.lightbox__img {
	max-width: 100%;
	max-height: 78dvh;
	width: auto;
	height: auto;
	border-radius: var(--radio-card);
}
.lightbox__pie {
	font-size: var(--fz-parrafo-xs);
	line-height: 1.3;
	color: var(--c-blanco);
	text-align: center;
}

.lightbox__cerrar,
.lightbox__prev,
.lightbox__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .15);
	font-size: 22px;
	color: var(--c-blanco);
	cursor: pointer;
	transition: background-color var(--transicion);
}
.lightbox__cerrar:hover,
.lightbox__prev:hover,
.lightbox__next:hover { background-color: rgba(255, 255, 255, .3); }
.lightbox__prev[hidden],
.lightbox__next[hidden] { display: none; }

.lightbox__cerrar {
	position: absolute;
	top: 20px;
	right: 20px;
}

/* --- Detalles técnicos ------------------------------------------------------ */
.producto-detalles { background-color: var(--c-blanco); }

.producto-detalles__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	padding-block: 90px;
}

/* "Detalles" pequeño encima y "Técnicos" grande debajo, en dos lineas. */
.producto-detalles__titulo {
	font-family: var(--f-titulo);
	line-height: 1.5em;
}
.producto-detalles__titulo-suave {
	display: block;
	font-size: var(--fz-h4);
	font-weight: 400;
	color: var(--c-negro);
}
.producto-detalles__titulo-fuerte {
	display: block;
	font-size: var(--fz-display-2);
	font-weight: 800;
	color: var(--c-terracota);
}

.producto-detalles__lista {
	margin-top: 20px;
	/* Raya gruesa en terracota bajo el titulo; las de las filas van finas. */
	border-top: 4px solid var(--c-terracota);
}
.producto-detalle {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 16px;
	padding-block: 14px;
	border-bottom: 1px solid var(--c-borde);
}
.producto-detalle dt {
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-negro);
}
.producto-detalle dd {
	margin: 0;
	font-size: var(--fz-parrafo-xs);
	line-height: 1.4;
	color: var(--c-negro);
}

/* La foto, sobre un circulo de color y dentro de un aro de puntos. */
/* En columna: el visor arriba y, en movil, el boton de RA debajo. En fila el
   boton le robaba el ancho al visor y A-Frame dibujaba en una astilla. */
.producto-detalles__media {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* El ruedo es el cuadrado donde viven las formas, la foto y el visor. */
.producto-detalles__ruedo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
}
.producto-detalles__ruedo::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background-color: var(--bg-terracota);
}
.producto-detalles__aro {
	position: absolute;
	inset: 2%;
	border: 2px dashed var(--bg-terracota);
	border-radius: 50%;
}
.producto-detalles__foto {
	position: relative;
	width: 86%;
	height: auto;
}

/*
 * El visor va por encima del circulo y sin recortar, para que la cama pueda
 * salirse igual que hacen las fotos. La escena de A-Frame es transparente,
 * asi que el circulo amarillo se sigue viendo redondo por detras.
 */
.producto-detalles__visor {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
}
/* A-Frame mide el contenedor al arrancar: sin alto propio deja el canvas
   en 0 y no se ve nada. El hueco lo marca el aspect-ratio del visor. */
.producto-detalles__visor #aframe-container,
.producto-detalles__visor a-scene {
	display: block;
	width: 100%;
	height: 100%;
}
.producto-detalles__visor canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* La RA solo funciona en el movil, asi que en escritorio ni se enseña. */
.producto-detalles__ra { display: none; }

@media (max-width: 767px) {
	.producto-detalles__ra {
		display: inline-flex;
		flex: 0 0 auto;
		margin-top: 8px;
		white-space: nowrap;
	}
}

/* --- Tabla de tallas -------------------------------------------------------- */
.producto-tabla__wrapper { padding-block: 20px 60px; }

/* Todo dentro de una tarjeta gris con las esquinas muy redondeadas. */
.producto-tabla__caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 40px;
	border-radius: 28px;
	background-color: var(--c-borde);
}

.producto-tabla__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-display-2);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-terracota);
	text-align: center;
}

.producto-tabla__img { width: 100%; }
.producto-tabla__img img {
	display: block;
	width: 100%;
	height: auto;
}
.producto-tabla__img--movil { display: none; }

.producto-tabla__legal {
	font-size: var(--fz-parrafo-xs);
	line-height: 1.5;
	color: var(--c-texto);
	text-align: center;
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.producto__layout { gap: 20px 30px; }
	.producto__thumb { width: 42px; height: 42px; }
	.producto-detalles__wrapper { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
	.producto__wrapper { padding-block: 10px 40px; }
	.producto__layout { grid-template-columns: 1fr; gap: 24px; }
	.producto__titulo { font-size: var(--fz-h3); }

	.producto__thumb { width: 40px; height: 40px; }
	.producto__ra { align-self: stretch; }
	/* Sin raton no hay hover: las flechas se quedan a la vista. */
	.producto__flecha { opacity: 1; width: 34px; height: 34px; font-size: 17px; }
	.producto__flecha--prev { left: 8px; }
	.producto__flecha--next { right: 8px; }

	.lightbox { padding: 12px; gap: 4px; }
	.lightbox__cerrar, .lightbox__prev, .lightbox__next { width: 38px; height: 38px; font-size: 19px; }

	.producto-tabla__img--desktop { display: none; }
	.producto-tabla__img--movil   { display: block; }
	.producto-tabla__caja { padding: 24px 16px; border-radius: var(--radio-card); gap: 18px; }
	.producto-tabla__titulo { font-size: var(--fz-h3); }

	/* Apilado no hay columna que acompañar: deja de estar pegada. */
	.producto__galeria { position: static; }

	.producto-detalles__wrapper { padding-block: 40px; }
}