/* Plantilla "Ficha de Servicio": galeria + especificaciones a la izquierda,
   titulo + descripcion + beneficios + botones + formulario a la derecha. */

/* Galeria: foto principal + insignia + flechas superpuestas, miniaturas
   verticales a la derecha. */
.saniport-ficha-galeria { display: flex; gap: 12px; max-width: 80%; }
.saniport-ficha-galeria-main {
	position: relative;
	flex: 1;
	border-radius: var(--sp-radius);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--sp-gray-light);
}
.saniport-ficha-galeria-main img { width: 100%; height: 100%; object-fit: contain; display: block; }

.saniport-ficha-badge {
	position: absolute;
	top: 14px;
	left: 0;
	background: var(--sp-green);
	color: var(--sp-white);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 7px 16px 7px 14px;
	border-radius: 0 6px 6px 0;
	z-index: 1;
}

.saniport-ficha-galeria-arrows { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 1; }
.saniport-ficha-arrow {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--sp-gray-dark);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--sp-shadow);
}
.saniport-ficha-arrow:hover { background: var(--sp-white); }

.saniport-ficha-galeria-thumbs {
	flex-shrink: 0;
	width: 68px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	max-height: 400px;
}
.saniport-ficha-thumb {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--sp-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	background: none;
	padding: 0;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--sp-transition), border-color var(--sp-transition);
}
.saniport-ficha-thumb img { width: 100%; height: 100%; object-fit: cover; }
.saniport-ficha-thumb:hover { opacity: 1; }
.saniport-ficha-thumb.is-active { opacity: 1; border-color: var(--sp-blue); }

/* Especificaciones: misma logica de tabla que el resto del sitio, con
   soporte para pintar circulos de color en vez de texto. */
.saniport-ficha-especificaciones { margin: 32px 0 0; }
.saniport-ficha-especificaciones-titulo {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 14px;
}
.saniport-ficha-especificaciones-table {
	border: 1px solid var(--sp-gray-light);
	border-radius: var(--sp-radius);
	overflow: hidden;
}
.saniport-ficha-especificaciones-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--sp-gray-light);
}
.saniport-ficha-especificaciones-row:last-child { border-bottom: none; }
.saniport-ficha-especificaciones-row:nth-child(even) { background: var(--sp-gray-light); }
.saniport-ficha-especificaciones-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	color: var(--sp-blue);
}
.saniport-ficha-especificaciones-label { flex: 0 0 42%; font-weight: 600; color: var(--sp-gray-dark); font-size: 0.92rem; }
.saniport-ficha-especificaciones-valor { color: var(--sp-gray); font-size: 0.92rem; }
.saniport-ficha-especificaciones-colores { display: flex; gap: 6px; }
.saniport-ficha-color-swatch {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--swatch, var(--sp-gray-light));
	border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Titulo + subtitulo + descripcion. */
.saniport-ficha-titulo { font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin-bottom: 4px; }
.saniport-ficha-subtitulo { color: var(--sp-green-dark); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 14px; }
.saniport-ficha-descripcion { color: var(--sp-gray); }

/* Beneficios: fila de iconos con etiqueta corta, sin caja. */
.saniport-ficha-beneficios {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 22px 0;
}
.saniport-ficha-beneficio-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.saniport-ficha-beneficio-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--sp-green);
	color: var(--sp-green-dark);
}
.saniport-ficha-beneficio-item span:last-child { font-size: 0.78rem; font-weight: 700; color: var(--sp-gray-dark); line-height: 1.25; }

/* Botones Comprar / Alquilar. */
.saniport-ficha-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 28px; }
.saniport-ficha-cta .btn { border-radius: 8px; }
.saniport-btn-upper { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; }
.saniport-btn-dark { background: var(--sp-gray-dark); color: var(--sp-white); }
.saniport-btn-dark:hover { background: #111827; color: var(--sp-white); box-shadow: var(--sp-shadow-hover); }

/* Tarjeta del formulario: reutiliza .saniport-cotizacion-box (fondo blanco,
   sombra, radio) pero sin el fondo azul de la seccion completa. */
.saniport-ficha-form-box { border: 1px solid var(--sp-gray-light); }

/* Productos relacionados: grilla responsiva de 3 por fila (la altura
   uniforme de la miniatura ya la resuelve .saniport-servicio-media). */
.saniport-ficha-relacionados { margin: 60px 0 0; }
.saniport-ficha-relacionados .saniport-ficha-especificaciones-titulo { margin-bottom: 20px; }

/* Banda inferior: asesoria + cobertura, dos tarjetas grises. */
.saniport-ficha-ayuda { margin: 40px 0 0; }
.saniport-ficha-ayuda-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	background: var(--sp-gray-light);
	border-radius: var(--sp-radius);
	padding: 22px 24px;
	overflow: hidden;
}
.saniport-ficha-ayuda-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--sp-green);
	color: var(--sp-white);
}
.saniport-ficha-ayuda-body { flex: 1; }
.saniport-ficha-ayuda-body strong { display: block; font-size: 0.98rem; }
.saniport-ficha-ayuda-body p { margin: 2px 0 0; font-size: 0.85rem; }
.saniport-ficha-ayuda-card .btn { flex-shrink: 0; }
.saniport-ficha-mapa-peru { width: 46px; height: auto; color: var(--sp-green); fill: currentColor; flex-shrink: 0; opacity: 0.85; }

@media (max-width: 767px) {
	.saniport-ficha-beneficios { grid-template-columns: repeat(2, 1fr); }
	.saniport-ficha-ayuda-card { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
	.saniport-ficha-especificaciones-label { flex-basis: 55%; }
	.saniport-ficha-cta { flex-direction: column; align-items: stretch; }
	.saniport-ficha-cta .btn { justify-content: center; }
}