/* ==========================================================================
   ficha.css — Minimalismo refinado (referencia Lightship).
   Mucho aire, hairlines finos, imágenes grandes redondeadas, texto secundario
   en gris suave, pills. Sin reglas negras gruesas ni números pesados.
   ========================================================================== */

.ficha { padding-bottom: var(--section-gap-mobile); }
@media (min-width: 768px) { .ficha { padding-bottom: var(--section-gap); } }

/* --- Masthead ---------------------------------------------------------- */
.ficha-hero { margin-top: var(--spacing-40); }
.ficha-hero__kicker {
	font-size: var(--text-body-sm); letter-spacing: .18em; text-transform: uppercase;
	color: var(--color-text-muted); margin-bottom: var(--spacing-8);
}
/* Título en el panel, encima del precio */
.ficha-hero__title { letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-24); }

.ficha-hero__layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-40); }
@media (min-width: 900px) {
	.ficha-hero__layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.85fr); gap: var(--spacing-64); align-items: start; }
}
.ficha-hero__gallery { min-width: 0; }
.ficha-hero__media {
	position: relative; margin: 0;
	border-radius: var(--radius-images); overflow: hidden;
	background: var(--color-paper-white);
	aspect-ratio: 4 / 3;
}
@media (min-width: 900px) { .ficha-hero__media { aspect-ratio: auto; height: clamp(460px, 64vh, 720px); } }
/* Miniaturas justo debajo de la foto principal */
.ficha-hero__gallery .ficha-strip__thumbs { margin-top: var(--spacing-12); }
.ficha-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; display: block; }
.ficha-hero__state { position: absolute; top: var(--spacing-16); left: var(--spacing-16); z-index: 2; }

/* --- Slider: botones prev/next + contador sobre la foto principal ------- */
.ficha-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: none; border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .9); color: var(--color-pure-black);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: background-color .15s ease, transform .12s ease;
}
.ficha-gallery__nav:hover { background: #fff; }
.ficha-gallery__nav:active { transform: translateY(-50%) scale(.92); }
.ficha-gallery__nav:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 2px; }
.ficha-gallery__nav svg { width: 24px; height: 24px; display: block; }
.ficha-gallery__nav--prev { left: var(--spacing-12); }
.ficha-gallery__nav--next { right: var(--spacing-12); }

.ficha-gallery__counter {
	position: absolute; bottom: var(--spacing-12); right: var(--spacing-12); z-index: 2;
	padding: var(--spacing-4) var(--spacing-12);
	background: rgba(0, 0, 0, .62); color: #fff;
	border-radius: var(--radius-full);
	font-size: var(--text-caption); font-variation-settings: "wght" 600;
	letter-spacing: .03em; white-space: nowrap; pointer-events: none;
}

.ficha-hero__badge { display: inline-block; margin-bottom: var(--spacing-16); }
.ficha-hero__panel .price { display: block; margin: 0 0 var(--spacing-28); }
.price__figure { display: block; }
.ficha-hero__panel .price__figure { font-size: clamp(40px, 5.5vw, 56px); line-height: 1; letter-spacing: -0.025em; }
.ficha-hero__panel .price__figure--ask { font-size: clamp(26px, 3.5vw, 34px); }

.ficha__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-12); }
.ficha__cta .btn--solid { justify-content: space-between; }
@media (min-width: 480px) { .ficha__cta { align-items: flex-start; } .ficha__cta .btn--solid { min-width: 290px; } }
.ficha-hero__note {
	margin-top: var(--spacing-24); padding-top: var(--spacing-16);
	border-top: 1px solid var(--color-outline-gray);
	max-width: 36ch; line-height: 1.5;
}

/* --- Specs: fila ligera, generosa ------------------------------------- */
.ficha-stats { margin-top: var(--section-gap-mobile); }
@media (min-width: 768px) { .ficha-stats { margin-top: var(--section-gap); } }
.ficha-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	/* Hairlines con bordes reales por celda (evita que el gap de 1px desaparezca por redondeo). */
	border-top: 1px solid var(--color-outline-gray);
	border-left: 1px solid var(--color-outline-gray);
}
.stat {
	display: flex; flex-direction: column-reverse; gap: var(--spacing-8);
	border-right: 1px solid var(--color-outline-gray);
	border-bottom: 1px solid var(--color-outline-gray);
	padding: clamp(var(--spacing-28), 3.5vw, var(--spacing-40)) var(--spacing-24);
}
.stat__value {
	font-weight: var(--font-weight-bold); font-variation-settings: "wght" 700;
	font-size: clamp(22px, 2.4vw, 30px); line-height: 1; letter-spacing: -0.01em;
}
.stat__label {
	margin: 0;
	font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .14em;
	color: var(--color-text-muted);
}

/* --- Tira de miniaturas: UNA fila con scroll horizontal (no se apila) --- */
.ficha-strip { margin-top: var(--spacing-40); }
.ficha-strip__thumbs {
	display: flex; flex-wrap: nowrap; gap: var(--spacing-8);
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--spacing-4);
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}
.ficha-strip__thumbs > li { flex: 0 0 auto; scroll-snap-align: center; }
.ficha-gallery__thumb {
	width: 96px; height: 68px; padding: 0;
	border: 1px solid var(--color-outline-gray); border-radius: 12px; overflow: hidden;
	background: var(--color-paper-white); cursor: pointer; opacity: .6;
	transition: opacity .2s ease, border-color .2s ease;
}
.ficha-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; display: block; }
.ficha-gallery__thumb:hover { opacity: 1; }
.ficha-gallery__thumb.is-active { opacity: 1; border-color: var(--color-pure-black); }
.ficha-gallery__thumb:focus-visible { outline: 2px solid var(--color-pure-black); outline-offset: 2px; }
.ficha-gallery__empty {
	width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--color-outline-gray); border-radius: var(--radius-images);
	background: var(--color-paper-white);
}

/* --- Detalles: secciones limpias en dos columnas ----------------------- */
.ficha__details { margin-top: var(--section-gap-mobile); }
@media (min-width: 768px) { .ficha__details { margin-top: var(--section-gap); } }
.ficha__block + .ficha__block { margin-top: var(--spacing-64); }
@media (min-width: 900px) {
	.ficha__block { display: grid; grid-template-columns: 4fr 8fr; gap: var(--spacing-64); align-items: start; }
}
.ficha__block-title { letter-spacing: var(--tracking-heading-sm); margin-bottom: var(--spacing-16); }
.ficha__prose { max-width: 60ch; color: var(--color-text-muted); line-height: 1.5; }
.ficha__prose p { margin-bottom: var(--spacing-16); }
.ficha__prose p:last-child { margin-bottom: 0; }

/* --- Banda de contacto (textura de +) ---------------------------------- */
.ficha-cta-band { margin-top: var(--section-gap-mobile); }
@media (min-width: 768px) { .ficha-cta-band { margin-top: var(--section-gap); } }

/* --- Relacionados ------------------------------------------------------ */
.ficha__related { margin-top: var(--section-gap-mobile); padding-top: var(--spacing-64); border-top: 1px solid var(--color-outline-gray); }
@media (min-width: 768px) { .ficha__related { margin-top: var(--section-gap); } }
.ficha__related-title { margin-bottom: var(--spacing-40); letter-spacing: var(--tracking-heading-sm); }
@media (min-width: 768px) { .ficha__related .car-grid { grid-template-columns: repeat(3, 1fr); } }

/* Espacio para que la barra fija no tape contenido al final */
.ficha { padding-bottom: calc(var(--section-gap-mobile) + 72px); }
@media (min-width: 768px) { .ficha { padding-bottom: calc(var(--section-gap) + 72px); } }