/* Página de producto — capa Sortícula.
 *
 * No se reescribe `templates/product.tpl`: el selector de variantes, el precio
 * en vivo y el botón de agregar dependen de las clases `js-*` y del store.js del
 * tema, y reescribirlos rompería las 5 variantes de metal. Lo que se hace aquí
 * es vestir ese markup con nuestros tokens.
 *
 * Hace falta porque `style-colors.scss.tpl` genera los colores a partir de los
 * ajustes del panel (fondo blanco, botón lima), que son fijos, mientras nuestra
 * paleta cambia por visita. Sin esto, las opciones de metal quedaban en texto
 * oscuro sobre fondo oscuro, ilegibles.
 *
 * Todo va dentro de `.template-product` (clase que el layout pone en <body>)
 * para no tocar la home.
 */

.template-product {
	background: var(--bg);
	color: var(--fg);

	/* --- Título y migas ------------------------------------------------- */

	.page-header {
		background: transparent;
	}

	.page-header h1 {
		font-family: var(--serif);
		font-weight: 400;
		/* Mismo token que el título de categoría, pero con techo propio: aquí la
		   columna es estrecha y el nombre del producto se desbordaba por la
		   derecha. Antes era un clamp() paralelo que lo dejaba MÁS chico que el
		   de categoría en todo el escritorio (28px vs 34.8px en 1024px), y es el
		   LCP de la página más importante de la tienda. */
		font-size: min(var(--fs-h1), 44px);
		line-height: var(--lh-title);
		letter-spacing: var(--track-title);
		color: var(--fg);
		overflow-wrap: anywhere;
		/* El tema pone .text-uppercase con !important */
		text-transform: none !important;
	}

	.breadcrumbs,
	.breadcrumbs a {
		color: var(--fg-muted);
		font-family: var(--sans);
		letter-spacing: var(--track-caps-md);
	}

	/* --- Precio ---------------------------------------------------------- */

	.js-price-display {
		font-family: var(--sans);
		font-weight: 600;
		color: var(--fg);
	}

	.price-compare {
		color: var(--fg-muted);
		text-decoration: line-through;
	}

	/* --- Variantes (el metal) --------------------------------------------
	   Era el peor problema: los chips heredaban el color de texto del tema. */

	.form-label {
		color: var(--fg-muted);
		font-family: var(--sans);
		font-size: var(--fs-micro);
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
	}

	.btn-variant {
		background: transparent;
		color: var(--fg);
		border-color: var(--line);
		font-family: var(--sans);
		font-weight: 500;
		transition:
			background 0.25s,
			color 0.25s,
			border-color 0.25s;
	}

	.btn-variant:hover {
		border-color: var(--fg);
		color: var(--fg);
	}

	.btn-variant.selected {
		background: var(--accent);
		border-color: var(--accent);
		color: var(--accent-ink);
	}

	/* --- Agregar al carrito ---------------------------------------------- */

	.btn-add-to-cart,
	.btn-primary {
		background: var(--accent);
		border-color: var(--accent);
		color: var(--accent-ink);
		font-family: var(--sans);
		font-weight: 600;
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
	}

	.btn-add-to-cart:hover,
	.btn-primary:hover {
		background: var(--accent-deep, var(--accent));
		border-color: var(--accent-deep, var(--accent));
		color: var(--accent-ink);
	}

	/* --- Cantidad y descripción ------------------------------------------ */

	/* El selector de cantidad quedaba en texto oscuro sobre fondo oscuro */
	input,
	select,
	textarea {
		background: transparent;
		color: var(--fg);
		border-color: var(--line);
	}

	/* Secundarios respecto a la cifra. Antes era --fg, que los igualaba al
	   número: dos signos gritando al lado de lo único que hay que leer. */
	.form-quantity-icon {
		color: var(--fg-muted);
	}

	.user-content {
		color: var(--fg-muted);
		font-family: var(--sans);
		line-height: 1.7;
	}

	.user-content strong,
	.user-content b,
	.user-content h1,
	.user-content h2,
	.user-content h3 {
		color: var(--fg);
	}

	/* Las líneas divisorias del tema son negras fijas y desaparecían sobre
	   fondos oscuros. */
	.bottom-line,
	.top-line,
	.right-line,
	.left-line {
		border-color: var(--line);
	}

	/* --- Galería -----------------------------------------------------------
	   Cada diapositiva monta su marco con el truco de `padding-bottom`, que el
	   tema calcula a partir de la proporción REAL de cada foto: salían marcos de
	   225, 451 y 601 px y el carrusel quedaba dentado, con franjas de fondo
	   vacías. Se normaliza el marco a vertical 4:5 —el mismo lenguaje que los
	   marcos de la home— y la foto se recorta dentro.

	   Lleva !important porque el tema fija ese padding elemento por elemento. */

	.product-image-column .js-product-slide-link,
	.product-image-column .js-item-image-padding {
		padding-bottom: 125% !important;
		height: 0;
	}

	.product-image-column img,
	.js-product-slider-image {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	.product-image-column .swiper-wrapper {
		align-items: flex-start;
	}
}

/* --- La ficha como panel de reserva ------------------------------------
   Del referente de layout: la columna de compra deja de ser una lista suelta
   pegada al borde y pasa a ser una tarjeta que flota sobre el fondo, con la
   foto respirando a su lado. El tema la dibujaba a ancho completo y sin fondo,
   así que precio, metales y botón se leían como texto suelto en la página.

   El ancho fijo del tema (400 px) dejaba el nombre de la experiencia en cuatro
   líneas; 460 lo resuelve sin robarle sitio a la foto. */

.template-product #single-product > .container-fluid {
	max-width: var(--maxw);
	margin: 0 auto;
	/* .p-0 del tema lleva !important */
	padding: var(--space-6) var(--pad) var(--space-8) !important;
}

@media (min-width: 768px) {
	.template-product .product-image-column {
		width: calc(100% - 460px);
		padding-right: var(--space-7);
	}

	.template-product .product-info-column {
		width: 460px;
	}

	.template-product .sticky-product {
		top: var(--space-5);
	}
}

.template-product .product-info-column {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-7) var(--space-6);
	/* La fila del tema estira las dos columnas a la misma altura y la tarjeta
	   quedaba con un palmo de fondo vacío bajo el botón de compra. */
	align-self: flex-start;
}

/* Las líneas del tema separaban las dos columnas con un filete a sangre; con
   la tarjeta sobran y solo ensucian el borde. */
.template-product .product-image-column,
.template-product .product-info-column {
	border: 0;
}

.template-product .product-info-column {
	border: 1px solid var(--line);
}

/* --- Descripción: el ritmo del manifiesto -------------------------------
   El tema la encajona en una caja con filetes y una pestaña "DESCRIPCIÓN" en
   versalitas, con media página vacía a la derecha. El referente la presenta
   como el Manifiesto de la home: etiqueta a la izquierda, texto de lectura a
   la derecha, sin caja. */

.template-product [data-store^='product-description-'] {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: var(--section-y) var(--pad) 0;
	border: 0;
}

.template-product [data-store^='product-description-'] .row {
	justify-content: flex-start;
}

.template-product [data-store^='product-description-'] [class*='col-'] {
	flex: 1;
	max-width: none;
	border: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.template-product [data-store^='product-description-'] [class*='col-'] {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		column-gap: var(--space-8);
		align-items: start;
	}

	/* Lo que no es etiqueta ni texto ocupa la fila entera */
	.template-product [data-store^='product-description-'] .fb-comments,
	.template-product [data-store^='product-description-'] #reviewsapp {
		grid-column: 1 / -1;
	}
}

/* La pestaña "DESCRIPCIÓN" pasa a ser una etiqueta del sistema, con la marca
   de acento que llevan todas las eyebrow del sitio. */
.template-product [data-store^='product-description-'] .text-uppercase.bottom-line {
	border: 0;
	padding: 0 !important;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-xs);
	color: var(--fg-muted);
}

/* Las coordenadas viven DENTRO del rótulo, y el rótulo es un flex en fila: sin
   esto quedaban como segundo ítem, al lado de "La experiencia", desbordando el
   rail de 240px y encimándose con la columna del texto. Bajan a su propio
   renglón; el guion del ::before sigue en línea con el rótulo. */
.template-product [data-store^='product-description-'] .text-uppercase.bottom-line {
	flex-wrap: wrap;
}

.template-product [data-store^='product-description-'] .sc-coordenadas {
	flex: 0 0 100%;
}

.template-product [data-store^='product-description-'] .text-uppercase.bottom-line::before {
	content: '';
	width: 22px;
	height: 2px;
	flex: none;
	background: var(--accent);
}

.template-product .user-content {
	max-width: var(--measure);
	padding: 0 !important;
	line-height: 1.6;
}

/* El tema fuerza .font-small (13px) sobre toda la descripción */
.template-product .user-content,
.template-product .user-content p,
.template-product .user-content li {
	font-size: var(--fs-body);
	/* El tema fija `line-height: 22px` directamente sobre el `li`, así que la
	   herencia del 1.6 no llegaba: los bullets iban apretados a 17px/22px
	   mientras los párrafos respiraban. */
	line-height: var(--lh-body);
}

.template-product .user-content h1,
.template-product .user-content h2,
.template-product .user-content h3 {
	font-size: var(--fs-h3);
	line-height: 1.05;
	margin: var(--space-7) 0 var(--space-4);
}

.template-product .user-content > :first-child {
	margin-top: 0;
}

/* La descripción de una experiencia es "El Manifiesto": dos o tres párrafos
   largos, y lo primero que se lee de la ficha. Sin medida de lectura acotada se
   estiraba a todo el ancho de la columna y se leía como una ficha técnica. */
.template-product .user-content {
	max-width: var(--measure);
}

/* El primer párrafo entra como entradilla: da el tono antes de que empiece la
   letra pequeña. */
.template-product .user-content > p:first-of-type {
	font-size: var(--fs-lg);
	line-height: var(--lh-lede);
	color: var(--fg);
}

/* --- Coordenadas del viaje ----------------------------------------------
   La fila de datos que acompaña al relato, bajo la etiqueta de la columna
   izquierda. Es lo único que sobrevive de la vieja sección "Qué incluye": el
   listado y el itinerario pasaron a la descripción del producto, que se escribe
   en el editor del panel y se estila con las reglas de .user-content de más
   arriba. */

.sc-coordenadas {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fg-muted);
}

.sc-coordenadas .meta-label {
	font-weight: 600;
	letter-spacing: var(--track-caps-xs);
	text-transform: uppercase;
	color: var(--fg);
}

@media (max-width: 899px) {
	.sc-coordenadas {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-4);
		align-items: baseline;
	}
}

/* --- Reglas de la casa (acordeón) --------------------------------------- */

.sc-reglas {
	padding: var(--section-y) var(--pad);
	background: var(--bg);
	color: var(--fg);
}

.sc-reglas .shell {
	max-width: var(--maxw-narrow);
}

.sc-reglas .eyebrow {
	margin-bottom: var(--space-6);
}

.sc-reglas .fila {
	border-bottom: 1px solid var(--line);
}

.sc-reglas .cab {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	background: none;
	border: 0;
	color: var(--fg);
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.1;
	text-align: left;
	padding: var(--space-5) 2px;
	cursor: pointer;
	transition: color 0.3s;
}

.sc-reglas h3 {
	margin: 0;
	font-size: inherit;
}

.sc-reglas .cab:hover {
	color: var(--accent);
}

/* El signo se dibuja en CSS y no en el markup: sin JS el panel abierto no
   puede quedar marcado con un "+" que mentiría. */
.sc-reglas .signo {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--accent);
}

.sc-reglas .signo::before,
.sc-reglas .signo::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.sc-reglas .signo::before {
	width: 100%;
	height: 1.5px;
}

.sc-reglas .signo::after {
	width: 1.5px;
	height: 100%;
	transition: transform 0.3s var(--ease);
}

.sc-reglas .cab[aria-expanded='true'] .signo::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.sc-reglas .panel {
	display: grid;
	gap: var(--space-3);
	padding: 0 2px var(--space-6);
}

.sc-reglas .panel p {
	margin: 0;
	position: relative;
	padding-left: var(--space-5);
	color: var(--fg-muted);
	font-size: var(--fs-body);
	line-height: 1.55;
}

.sc-reglas .panel p::before {
	content: '·';
	position: absolute;
	left: 0;
	color: var(--accent);
}

/* --- Otras experiencias ------------------------------------------------- */

.sc-otras {
	padding: var(--section-y) var(--pad);
	background: var(--bg);
	color: var(--fg);
}

.sc-otras .head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
}

/* Estas dos reglas venían compartidas con la sección "Qué incluye"; al retirarla
   se quedan acá, que es el único sitio que las usa. */
.sc-otras .title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--fs-h2);
	line-height: 0.96;
	margin: 0;
}

.sc-otras .ital {
	font-style: italic;
	color: var(--accent);
}

/* El CTA que vuelve al panel de reserva. Toma la caja de los botones del sitio
   (cápsula, versalitas tracked); el color sale del bloque, que acá es
   `section--invert`, así que --accent ya es el que contrasta con el fondo. */
.sc-otras .cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--btn-pad-md);
	border: 1.5px solid var(--accent);
	border-radius: 100px;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	text-decoration: none;
	transition:
		transform 0.35s var(--ease),
		background 0.3s,
		color 0.3s,
		border-color 0.3s;
}

.sc-otras .cta:hover {
	transform: translateY(-3px);
	color: var(--accent-ink);
}

.sc-otras .grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--space-5);
}

.sc-otra {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--fg);
	text-decoration: none;
	transition: border-color 0.3s;
}

.sc-otra:hover {
	border-color: var(--accent);
	color: var(--fg);
}

/* PhotoSlot se dibuja con position:absolute; inset:0, así que el marco lo pone
   el contenedor: vertical 4:5, el mismo de las tarjetas de la home. */
.sc-otra .foto {
	display: block;
	flex: none;
	width: 120px;
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.sc-otra .otra-img {
	transition: transform 0.6s var(--ease);
}

.sc-otra:hover .otra-img {
	transform: scale(1.05);
}

.sc-otra .body {
	display: block;
	flex: 1;
	min-width: 0;
}

.sc-otra .who {
	display: block;
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	color: var(--fg-muted);
	margin-bottom: var(--space-2);
}

.sc-otra .nombre {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1;
	margin-bottom: var(--space-3);
	overflow-wrap: anywhere;
}

.sc-otra .precio {
	display: block;
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--fs-body);
}

.sc-otra .per {
	font-weight: 400;
	color: var(--fg-muted);
}

.sc-otra .go {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--line-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	transition:
		transform 0.35s var(--ease),
		background 0.3s,
		color 0.3s,
		border-color 0.3s;
}

.sc-otra:hover .go {
	transform: translate(4px, -4px);
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.sc-otras .cta,
	.sc-otra,
	.sc-otra .go,
	.sc-otra .otra-img,
	.sc-reglas .cab,
	.sc-reglas .signo::after {
		transition: none;
	}

	.sc-otra:hover .go {
		transform: none;
	}

	.sc-otra:hover .otra-img {
		transform: none;
	}

	.sc-otras .cta:hover {
		transform: none;
	}
}

@media (max-width: 599px) {
	/* En móvil la tarjeta tenía tres columnas en 390 px y el nombre caía en
	   tres líneas: la foto se achica y la flecha se sienta bajo el precio. */
	.sc-otra {
		gap: var(--space-4);
		padding: var(--space-3);
	}

	.sc-otra .foto {
		width: 92px;
	}

	.sc-otra .go {
		width: 34px;
		height: 34px;
		font-size: var(--fs-sm);
	}
}

/* --- Los controles del panel de reserva ---------------------------------
   Del referente de layout: reservar es una secuencia de decisiones —material,
   horario, cuántas personas— y cada una se toma con cápsulas, no con casillas de
   sistema. El markup sigue siendo el del tema (el select nativo es la fuente de
   verdad y el que viaja al carrito); acá solo se redibuja.

   El chip del tema viene de la rejilla de tallas: un cuadrado de 48 px que flota
   a la izquierda con filete a la derecha y abajo, pensado para pegarse a sus
   vecinos. Se le quita el flotado y los filetes para que sea una cápsula.

   Ninguna regla nombra una variación en concreto: valen igual para "Material",
   para "Horario" o para lo que la dueña cargue mañana en el panel. */

/* Los filetes entre variaciones partían el panel en cajones —y el de la izquierda
   dejaba una raya vertical a media tarjeta—; con el ritmo vertical de las cápsulas
   sobran los tres. */
.template-product .js-product-variants-group.bottom-line {
	border-bottom: 0;
}

.template-product .js-product-variants.left-line {
	border-left: 0;
}

.template-product .sc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	/* 16 px = el sangrado que el tema (px-3) le da a la etiqueta de arriba */
	padding: 0 var(--space-4) var(--space-5);
}

.template-product .sc-chips .btn-variant {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 px de alto: el mínimo de toque en móvil, y de paso la cápsula queda
	   con el mismo aire que el selector de cantidad. */
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--space-4);
	/* El borde ES el indicador de la cápsula sin elegir, así que tiene que llegar
	   a 3:1 contra el panel: --line-strong (32% del texto) se queda entre 1.8 y
	   2.7:1 según la paleta —en Cobalto es donde peor se ve—. Al 60% mezclado
	   hacia --surface va de 3.2 a 6.1:1 en las cinco. */
	border: 1.5px solid color-mix(in srgb, var(--fg) 60%, var(--surface));
	border-radius: 100px;
	font-size: var(--fs-sm);
	line-height: 1.2;
	text-align: center;
}

.template-product .sc-chips .btn-variant-content {
	display: block;
	min-height: 0;
	margin: 0;
	line-height: 1.2;
}

.template-product .sc-chips .btn-variant:hover {
	border-color: var(--fg);
}

/* Se repite el estado seleccionado porque estas reglas cargan después de las de
   arriba y empatan en especificidad: sin esto el chip elegido perdería el borde
   de acento y solo cambiaría el fondo. */
.template-product .sc-chips .btn-variant.selected {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Variación de color: la muestra es el círculo, no el texto */
.template-product .sc-chips .btn-variant-color {
	width: 44px;
	padding: 0;
}

.template-product .sc-chips .btn-variant-color .btn-variant-content {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

/* --- Nota de cotización del oro ----------------------------------------
   El tinte no puede ser el acento con opacidad baja: en las paletas de acento
   muy saturado (lima, menta) el texto perdía contraste. Se mezcla hacia
   --surface, que es el fondo real de la tarjeta, así que el texto conserva
   exactamente el contraste que ya tiene sobre el panel. */

.template-product .sc-oro-wrap {
	padding: 0 var(--space-4);
}

.template-product .sc-oro-note {
	margin: 0 0 var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-left: 2px solid var(--accent);
	border-radius: 8px;
	background: color-mix(in srgb, var(--accent) 10%, var(--surface));
	color: var(--fg);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.template-product .sc-oro-note[hidden] {
	display: none;
}

/* --- Precio: leyenda y cifra en la misma línea -------------------------- */

.template-product .sc-price-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
}

.template-product .sc-price-caption {
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	color: var(--fg-muted);
}

/* En 390 px la leyenda y la cifra no caben en una línea sin partir el precio en
   dos; se apilan y solo se ponen en fila cuando hay sitio. */
@media (min-width: 600px) {
	.template-product .sc-price-row {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-4);
	}

	.template-product .sc-price-row .js-price-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}
}

/* --- El segundo precio, el bono y el abono ------------------------------
   Tres líneas que cuelgan bajo la cifra y que no pueden competir con ella. El
   componente nativo de Tiendanube pinta el precio en efectivo y su hoja no se
   puede tocar desde el panel, así que se viste desde acá.

   Van alineadas a la derecha como el precio dentro de `.js-price-container`,
   pero solo desde 600 px: abajo de eso la fila se apila y todo va a la izquierda,
   que es lo que ya hace `.sc-price-row`. */

.template-product .payment-discount-price {
	color: var(--accent);
}

.template-product .sc-pay-note,
.template-product .sc-abono-nota {
	margin: var(--space-1) 0 0;
	font-family: var(--sans);
	font-size: var(--fs-label);
	line-height: 1.4;
	color: var(--fg-muted);
	max-width: 34ch;
}

/* El bono sí levanta la voz: es una condición que hace ganar plata a quien la
   cumple, y la dueña lo trata como un regalo, no como una rebaja. De ahí el
   filete y no un fondo de color, que lo volvería un cartel de oferta. */
.template-product .sc-bono {
	margin: var(--space-2) 0 0;
	padding-left: var(--space-3);
	border-left: 2px solid var(--accent);
	font-family: var(--sans);
	font-size: var(--fs-label);
	line-height: 1.45;
	color: var(--fg);
	max-width: 34ch;
}

@media (min-width: 600px) {
	.template-product .sc-pay-note,
	.template-product .sc-abono-nota {
		text-align: right;
	}

	/* El filete del bono se pasa al otro lado: con el bloque alineado a la
	   derecha, una barra a la izquierda queda flotando lejos de su texto. */
	.template-product .sc-bono {
		text-align: right;
		padding-left: 0;
		padding-right: var(--space-3);
		border-left: 0;
		border-right: 2px solid var(--accent);
	}
}

/* --- Personas (la cantidad nativa) -------------------------------------- */

.template-product .sc-qty-label {
	padding-bottom: var(--space-1) !important;
}

/* La cápsula ya viene de skin.css; acá solo se alinea con el resto de los
   controles del panel, se le da su propia fila y el mismo borde que las cápsulas
   de variante (ver la nota de contraste de arriba). */
.template-product .js-product-form .form-quantity {
	margin: 0 var(--space-4) var(--space-5);
	/* Estaba al 60% del texto: con la cifra ahora grande y los signos pequeños,
	   ese marco pesaba más que lo que enmarca. Al 34% sigue leyéndose la cápsula
	   en las cinco paletas sin robarle protagonismo al número. Se mezcla contra
	   --surface, que es el fondo real del control, así que el resultado es opaco
	   y no depende del alfa. */
	border-color: color-mix(in srgb, var(--fg) 34%, var(--surface));
}

/* La cápsula recorta lo que se sale de su radio, así que el anillo de foco de los
   signos − / + quedaba cortado: se dibuja hacia dentro. */
.template-product .form-quantity .form-quantity-icon:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -4px;
}

/* --- Agregar al carrito ------------------------------------------------- */

/* El sangrado se hace con calc y no con `width:auto` porque el CTA es un
   <input type="submit">: en un elemento reemplazado, auto es el ancho del texto y
   el botón se encogía a la mitad del panel. */
.template-product .js-product-form .btn-add-to-cart,
.template-product .js-product-form .js-addtocart-placeholder {
	display: block;
	width: calc(100% - var(--space-6));
	margin: 0 var(--space-4);
	min-height: 56px;
	border-radius: 100px;
}

/* --- Ancla del panel ---------------------------------------------------- */

/* La barra de navegación es fija: sin este margen el CTA de "Otras
   experiencias" dejaba el panel justo debajo del logo. */
.template-product #reservar {
	scroll-margin-top: var(--space-9);
}

/* --- Móvil (390 px) ----------------------------------------------------- */

@media (max-width: 599px) {
	/* La tarjeta mantenía el acolchado de escritorio (48/32) y, sumado a los 16 px
	   que el tema le da a cada bloque de dentro, dejaba el nombre de la experiencia
	   con 294 px útiles en un teléfono de 390. */
	.template-product .product-info-column {
		padding: var(--space-6) var(--space-4);
	}
}

@media (max-width: 767px) {
	/* 42 px era suficiente con ratón, no con el pulgar */
	.template-product .form-quantity .form-quantity-icon {
		width: 48px;
		height: 48px;
	}

	.template-product .form-quantity .form-control {
		height: 48px;
	}

	/* Las cápsulas de una variación de dos opciones (mañana / tarde) reparten el
	   ancho, como en el referente; con tres o más vuelven a fluir. */
	.template-product .sc-chips .btn-variant {
		flex: 1 1 auto;
	}

	.template-product .sc-chips .btn-variant-color {
		flex: none;
	}
}

/* --- Qué pasa después de reservar ----------------------------------------
   Va bajo el botón de compra. Es la única parte de la ficha que habla del
   flujo y no del producto, así que se distingue: numerada, apagada y con la
   cifra en acento, para que se lea como un recorrido y no como más letra
   chica de las que ya hay tres encima. */

.sc-prod-pasos {
	list-style: none;
	counter-reset: sc-paso;
	margin: var(--space-5) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: var(--space-3);
}

.sc-prod-pasos li {
	counter-increment: sc-paso;
	display: grid;
	grid-template-columns: 1.6em 1fr;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0;
	color: var(--fg-muted);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.sc-prod-pasos li::before {
	content: counter(sc-paso);
	font-weight: 700;
	font-size: var(--fs-micro);
	letter-spacing: var(--track-caps-xs);
	color: var(--accent);
}

/* --- Prueba social junto al precio ---------------------------------------- */

.template-product .sc-prod-resenas {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	margin: var(--space-3) 0 0;
	font-family: var(--sans);
	font-size: var(--fs-label);
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-underline-offset: 0.25em;
}

.template-product .sc-prod-resenas:hover {
	text-decoration-color: currentColor;
}

.template-product .sc-prod-resenas-estrellas {
	color: var(--accent);
}

/* --- La segunda salida: WhatsApp ----------------------------------------- */
/* Contorno y no relleno: al lado del CTA principal tiene que leerse como la
   alternativa, no como un segundo "comprar". */

.template-product .sc-prod-wa {
	display: block;
	margin-top: var(--space-3);
	min-height: 44px;
	background: transparent;
	border: 1px solid var(--fg);
	color: var(--fg);
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: var(--track-caps-sm);
	text-transform: uppercase;
	text-align: center;
}

.template-product .sc-prod-wa:hover,
.template-product .sc-prod-wa:focus-visible {
	background: var(--fg);
	color: var(--bg);
}

/* Mismo corte que la nota del efectivo: desde 600px el bloque del precio se
   alinea a la derecha y la línea de reseñas lo acompaña. */
@media (min-width: 600px) {
	.template-product .sc-prod-resenas {
		display: flex;
		justify-content: flex-end;
	}
}